Skip to content

Tocas 4.2.0
Compare
Choose a tag to compare
@YamiOdymel YamiOdymel released this 03 Mar 11:23
· 349 commits to master since this release
4.2.0
f828912
This commit was signed with the committer’s verified signature.
YamiOdymel Yami Odymel
GPG key ID: 68E469836934DB36
Learn about vigilant mode.

⚠️ 破壞性異動 ⚠️

這些破壞性異動仍可以繼續在 4.2.0 版本中正常使用，但在未來的版本可能隨時都會被移除，請盡快改為新用法。這些樣式被移至 /src/deprecated_420.css。

  • [Accordion] 改為使用 HTML 原生的 <details> 標籤 (#882, ab82979)。
  • [Grid] 多項功能被移除：is-doubling、is-stackable，請透過新的響應式系統搭配 is-x-columns 跟 is-stacked 使用。
  • HTML 的 [data-scale] 與 [data-scheme] 改為 is- 用法（如：is-small 跟 is-dark） (#896)。
  • 舊有的響應式系統完全重構，如 is-minimal-x, is-standard-x, is-maximal-x 都不再支援（包含網格系統的 is-minimal-5 用法…等），請使用新的響應式系統。
  • is-dark, is-light, is-inverted 都改為 u- 前輟，如：u-dark。
  • is-dark-only, is-light-only 改為 u-dark-hidden 跟 u-light-hidden 而且作用相反，需要額外注意。

新元件

  • [App Drawer] 可以讓左、右、下出現置頂的抽屜 (58f5631)。
  • [App Topbar] 可以呈現像應用程式那樣的頂部按鈕列 (5f2d867)。
  • [Timeline] 能以時間軸的方式陳列事情發生的經過 (70b8982)。
  • [Buttons] 新的按鈕群組，用以呈現類似 Split Button 樣式，可以讓按鈕旁邊緊鄰另一個按鈕 (#865, 92eb54b)。
  • 新增數個 JavaScript 模組：Dropdown, Tooltip, Toggle, Tab。

修正

  • [App Layout] 每個 .cell 現在都是 overflow: auto 來修正會在容器異常 Scrollable 的問題 (#900, a273064)。
  • [Procedure] 因為多行文字而造成 .indicator 扁掉的問題 (#883, f334bd7)。
  • [Dropdown] 修正 Dropdown 的 z-index 穿透更上層的 Modal 問題 (#853, 119054a)。
  • [Button] 修正帶有 is-large 的 Icon 在 is-labeled-icon 按鈕會不成比例的 em 問題 (#849, ccdd4a7)。
  • [Button] is-loading 會因為帶有 is-labeled-icon 樣式而看起來很奇怪 (#850, f72b9b7)。
  • [Button] 修正 is-ghost 的 Loading 顏色 (#868, f00c809)。
  • [Select] 項目的圖示大小跟 Dropdown 的 1.1em 不相符而看起來不對齊 (#857, dda2048)。
  • [Select] is-solid 會因為 CSS 優先順序而永遠無法套用 is-acitve 樣式的問題 (#858, dda2048)。
  • [Icon] 圖示的 z-index 會突破 Mask (#876, 0fdaaf6)。
  • [Tab] Item 裡面的文字與圖示現在會上下垂直置中避免跑位 (#864, e8838a2)。
  • [Tab] 修正 Item 若是 <button> 則會跑位的問題 (#859, 4c075cd)。
  • is-dark-only 原本只會相依使用者裝置的 color-scheme 但卻忽略了套用 is-dark 元素的條件 (#888, 95772e3)。

修改

  • [Procedure] 簡化結構，已經不再需要 .line 元素 (#899, 79ec645)。
  • [Dropdown] 項目套用 min-width: 0 來支援 text-overflow (3643801)。
  • [Dropdown] 項目裡的 Avatar 會有負外距來讓對齊看起來更整齊 (#854, 49c49cb)。
  • [Imageset] is-portrait 因為人像重點通常在上面，現在預設會以置上裁切為主 (#862, 2d3616f)。
  • [Imageset] is-portrait 左側欄位為了更妥善地呈現主體照片，比起右側欄位會有更大的佔比 (#860, 2d3616f)。
  • [Button] is-labeled-icon 裡的圖示現在會以 1.2em 大一點的尺寸顯示 (f69ce39)。
  • [Table] 調整了 <td> 的 is-padded 樣式相關內距 (8e05327)。
  • [Grid] 已經不再使用 display: grid 並改回使用 display: flex (cf9ff32)。
  • [File] 現在也跟其他 Input 一樣預設都是 100% 流動寬度 (#871, 90e1256)。
  • [Text] 沒有公開的 is-x-lines 的 is-1-line 改為複數的 is-1-lines (fa0f323)。
  • [Tab] 圖示現在是 1.1em 尺寸，變得更大一點了 (4c075cd)。
  • 移除了英文版本的文件，因為目前沒時間維護 (36a69c4)。
  • 更新到 FontAwesome 6.3.0 (3362365)。

新增

  • [Checklist] 新增了 is-info 跟 is-warning 的項目用來呈現資訊與警告項目 (#890, a40b794)。
  • [Container] 新增 is-padded 和 is-fitted 來變更內距大小，很適合響應式設計在行動裝置上減小內距 (#893, 1581215)。
  • [Dropdown] 新增 is-top-center 跟 is-bottom-center 來置中上下邊的選單 (#855, 3e8675e)。
  • [Control] 新的 is-stacked 可以搭配響應式設計在行動裝置上層疊 (#845, 715a4c0)。
  • [Loading] 可以水平置中的 is-centered (2eb22eb)。
  • [Content] 現在可以上下或左右單獨使用 is-fitted (d0aaa50)。
  • [Header] 現在和 Text 一樣有了 is-lowercased 與 is-uppercased 可以強制英文字母大小寫 (#878, 15a659c)。
  • [Rating] 現在支援 is-input 來讓使用者可以透過 checkbox 評分了 (#881, f3ad84b)。
  • [Button] 因為 is-secondary 按鈕在 is-secondary Content 上會不太明顯，所以新增一個 is-tertiary 樣式來暫時解決這個問題 (#810, f72b9b7)。
  • [Select] 透過 is-multiple 來使用複選的 [multiple] (#884, 01955e9)。
  • [Table] 新的 is-fitted 無內距的樣式 (#874, 8a5d2d0)。
  • [Input] 新增 is-relaxed 可以讓高度更高來呈現較寬鬆的模樣 (8784caa)。
  • [Close] 新增一個更大的 is-big 尺寸 (#851, 07726d7)。
  • [Close] 新的 is-rounded 正圓角樣式 (#852, 07726d7)。
  • [Flag] 新增 is-zz-flag 或 is-unknown-flag 來代表未知的國旗 (#875, 23a8a1b)。
  • [Grid] 新的 is-1-columns 來呈現只有一欄的欄位，通常用於響應式設計在 is-x-columns 之間切換 (#891, 73144d8)。
  • [Grid] 新增 is-reversed, is-stacked 和 is-order-x (e3f597e)。
  • [Menu] 現在也支援 is-horizontally-padded 來增加項目的內距 (#869, 722c580)。
  • Switch, Checkbox 跟 Radio 現在有 is-solo 樣式可以用來呈現沒有文字只有開關的模樣 (#833, 7ed49f3)。
  • 未公開的 Tocas Email 元件，可以檢視 /examples/email 先行預覽 (#866, fa1c2ae)。
  • 大部分的元件現已支援 Accent Color 領銜主色，可以替元件加上主要色系 (e56c86b)。
  • 全新的響應式系統可以透過 中斷點:樣式 來更加彈性地切換樣式 (#894)。

筆記

Grid 已經不再是 display: grid 並改回使用 display: flex (cf9ff32)。

Tocas 4 試圖在 Grid 元件使用 display: grid 來取代 Tocas 2 時的 display: flex 設計，結果不僅沒有變得更彈性，反而更加地綁手綁腳了。

舉例來說，沒有辦法像 Flexbox 那樣反轉欄位順序或是填滿剩餘空間；即便有，也沒有辦法自動將欄位換到下一列。

總之，display: grid 更像是給已經有一個排版設計的網頁使用，現在改回 Flexbox 設計之後，Tocas Grid 現在也多了幾項功能（例如：is-reversed 跟 is-order-x）。

Accordion 改用 <details> (#882, ab82979)。

正如 #882 說的那樣，使用者可以自行使用 .ts-row 來得到近似原本的設計，現在改為使用 HTML 原生的 <details> 可以更快地擁有一個簡易可折疊內容的功能。

基於 JavaScript 的全新的響應式系統 (#894)。

原先 Tocas 4 試圖簡化響應式設計系統，使用 CSS 來將介面劃分為 minimal、standard 和 maximal，希望使用者能以最小化、標準、最大化來決定介面上應該要有哪些元素。

但很快地這個系統並不可靠，主要的問題有這幾項：

  1. 依靠視窗寬度來決定元素的斷點實在是太過無用，例如：頁面上已經變得很擁擠，卻因為視窗還是很寬而無法觸發 CSS 的中斷點設定。
  2. 使用者可能有自訂樣式想要在行動裝置使用，但是要跟 Tocas UI 的中斷點同時觸發，就還要跑來看原始碼複製裝置中斷點的定義，實在太過繁瑣。
  3. 中斷點的定義寫死在 Tocas CSS 裡而不能自行修改，因為 Media Query 不支援從 CSS Variables 裡面讀取。
  4. 每個中斷點都要有重複的樣式，一個樣式如果有四個中斷點，就要重複寫四次。

在思考後，決定使用類似 Tailwind 那樣的 mobile:is-small 定義，但因為 Tocas 沒有編譯器，因此以 JavaScript 搭配 Mutation Observer 作為基礎系統。現在搭配 Tocas JS，可以透過 CSS Variable 定義中斷點，甚至還支援 Container Query，也可以使用中斷點來切換自己的樣式。

全域樣式 Utilities 系統 (0510e8e)。

全域樣式可以在任何元素上使用（甚至不是 Tocas UI 的元件），例如：想要隱藏某些元素，就勢必要有一個 is-hidden 樣式。

起初的前輟是 has- 但某些命名仍不太符合文法（如：has-dark、has-hidden），所以決定改為 u- 前輟。

Assets 2
Loading