Releases: teacat/tocas
Releases · teacat/tocas
Tocas 2.3.0
極重大更新,多個樣式被修改!破壞兼容性!
兼容性破壞
- Pure Menu 現在叫做 Link Menu。
- Chatroom 改名為 Speeches,結構大有不同。
- Celled List 被廢除。
- [data-ts-native] 被廢除,現在是預設套用了。
焦點矚目
- 新的 Font Awesome 4.7.0 圖示系統!(#186)
- 顏色系統重寫,現在顏色對比較明顯與清晰但不會過於黑白。(#108)
- Chatroom 的結構簡化了,並重新命名成 Speeches,支援更多內容。(#142)
- 新的 Structured Message 能夠呈現更多樣、帶豐富內容的訊息,類似 Android 的通知卡片。(#265)
- Progress 新增多個讀取樣式,像 Material Design 的 Indeterminate 的樣式。(#282)
- Speeches 的對話氣泡現在可以連成一串,就像 Facebook Messenger 那樣。(#328)
- Menu 裡面現在可以有 Right Item 將單個項目置右,適合排版用。(#315)
- Menu 可以 Attached 在任何元件上了!(#294)
- Menu 有了 Stretched Item 可以將特定項目拉最寬,適合排版用。(#321)
- 新增了類似網格佈局的左右欄 Form 排版,類似 Bootstrap Horizontal Form。(#273)
- Calendar 日曆元件有了全尺寸的樣式!(#264)
- 廢除 Celled List,取而代之的是新的 Segmented List。(#335)
- Form 有了 Fieldset 的標籤支援,可劃分欄位區塊!(#347)
- Link Button 能讓一個 Button 看起來像連結。(#344)
- Items 現在可以看起來像 Bootstrap Media Object 那樣排版使用者頭像和輕量資訊了。(#272)
- Pure Menu 改名叫做 Link Menu 了,且不需額外加上 Borderless 樣式了。(#287)
- Card 裡面可以擺放 Actions 動作按鈕了!(@2a92767c695a9169ae950561446659936e7a7a90)
- 原生標籤現在有了 Tocas UI 的樣式。(#379)
新元件
- 新的 Tab 分頁籤模塊!(#237)
- 新的 Snackbar 通知元件!(#129)
- 嵌套影片、設定長寬比的 Embed 元件!(#314)
- 新的側邊欄 Sidebar 模塊!(#203)
- 新的 Scrollspy 模塊可以讓選單隨著捲軸自動變動 Active 啟用項目!(#292)
- 右鍵選單 Contextmenu 模塊!(@062ea027cd3f3cdd8f12b238a6b70f6c49a573b7)
新功能
- Spaceless Container 能在行動裝置上移除左右空白。(#233)
- Menu 有 Fixed 樣式可以固定在 Top, Left, Right, Bottom。(#231)
- Message 現在可以右側邊 Actions 按鈕了。(#244)
- Input 有了僅有底線的 Underlined 樣式。(#249)
- Table 有了新的 Indicated 功能,可將左側邊框變得醒目。(#248)
- List 支援了 Stackable 可在行動裝置上層疊。(#228)
- Button 有了 Or 的條件樣式,可將按鈕切分成兩部分,中間安插文字。(#251)
- Label 有了 Pointing 樣式,可以有個三角形指標。(#254)
- Message 有了僅有框線的 Outlined 樣式。(#258)
- Message 有關閉的 JavaScript 模塊了。(#259)
- Button 有了新的 Pulsing 脈動樣式,會有水波紋的脈動吸引使用者注意。(#263)
- Progress 支援了新的 Buffer 的緩衝條。(#281)
- Speeches 的對話氣泡可以自訂是否要有 Pointing 樣式。(#324)
- Speeches 支援 Image 能夠擺放圖片的訊息。(#329)
- Card 的 Content 有了 Padded 功能。(#283)
- Table 裡面可以有 Caption 標籤用來敘述表格。(#286)
- Table 可以 Attached 附著在其他元件上了。(#295)
- 純文字的 Text Menu。(#316)
- Card 裡面可以擺放影片了。(#311)
- Menu 有 Image Item 可以擺放單純的圖片。(#311)
- Input 有了 Secondary、Tertiary 的樣式能讓預設背景色是灰色。(#341)
- Form 有了 Message 輔助訊息樣式,可隨著狀態變更顏色,類似
<small>
。(#340) - Top Aligned Icon 在 Header 裡能讓圖示對齊上部,而非中間。(#346)
- Button 支援浮動在角落了。(#350)
- Close Button 能看起來像一個關閉按鈕。(#353)
- Items 有了 Segmented 樣式,能看起來像層疊的 Segments。(#349)
- Label 可以是 Fluid 變成全寬。(#358)
- Item 可以擺放圖示當成圖示清單了。(#351)
- Sidebar 支援 Secondary、Tertiary 語調。(#343)
- 新的 Fitted Menu。(#338)
- Image 裡面可以有角落 Icon。(#360)
- Squared Image 會確保圖片一定是正方形的。(#360)
- Statistic 支援分隔線樣式 Divided 功能。(#365)
- Pointing Tabbed Menu 會在啟用的頁籤上有個粗體框線,就像 GitHub 頁籤。(#356)
- Statistic 支援 Aligns 對齊了。(#364)
- Statistic 可以透過 Fluid 自我均分了。(#368)
- Menu 支援 One、Two、Three⋯⋯Items 來固定均分項目寬度。(#367)
- Item 裡面可以有 Actions 動作按鈕。(@7f793045c948d35ef32027b020c72d29f42fb246)
- Label 現在支援 Basic 基本樣式,讓標籤看起來更簡潔了。(#)
- Header 的 Sub Header 子標題可以是 Inline 同行模式。(@780f79bd7db1d21080e1e97e1b0106f1ef11568e)
- Label 裡面可以擺置關閉按鈕。(#371)
- Grid 現在支援 Stretched Column,可將欄位拉伸到最寬,並縮短其他欄位。(#321)
- Items 和 List 的項目現在有了已選擇 Selected 的樣式。(#382)
Bug 修正
- Tabbed Menu 的 Active 卻是一般 Menu 的樣式。(#241)
- #229 的問題,Horizontal List 的 Margin 從左邊換到右邊。(#230)
- Item 非全寬的問題。(#195)
- Cards 瀑布流和 Stackable、Doubling 使用上出問題。(#223)
- Hovering Card 的 Z Index。(#235)
- Modal Dimmer 的 Overflow。(#246)
- Dropdown 和 Modal Dimmer 的 Z Index 穿透問題。(#227)
- Icon Buttons 不對齊。(#250)
- Message 內的
<p>
和.header
間距問題。(#260) - Error Action Input 的聚焦右邊框顏色。(#266)
- Floating Dropdown Menu 上半部的不是圓角。(#268)
- Card 的 Meta 不會換行。(#269)
- 滑鼠移過標籤會透明。(#226)
- Focus Input 不起作用。(#270)
- Dimmer 在 Body 時沒辦法覆蓋全螢幕。(#278)
- Quote 的對齊。(#290、#291)
- Header 裡的 Floating Label 失效。(#299)
- Warning Input 卻還有背景顏色。(#303)
- Modal 裡的 Link Image 會全高。(#313)
- Card 的 Meta 在特定顏色下不明顯。(#276)
- Attached Header 和 Segment 的框線重複。(#284)
- Separated Button 的最後一個按鈕還是有右外距。(#285)
- Disabled Item 在 List 裡面不會套用到 Content、Header⋯⋯等。(#306)
- Slate 加上背景和 Container 後文字不會有陰影。(#275)
- Menu Dropdown Active 時背景顏色是 Basic。(#337)
- 長期以來 Container Grid 和 Container > Grid 不對齊。(#147)
- Attached Buttons 不能自我上下堆疊。(#348)
- 許多地方的 Line Height 重疊。(#309)
- Separated Buttons 會拆開 Labeled Button 的標籤。(#359)
- Feed 頭像和文字不對齊。(#336)
- Horizontal List 的 Center Aligned 無作用。(#363)
- Attached 在不同元件總是用奇異方式修正。(#372)
- 移除 Secondary Menu 的負外距。(#377)
- 讓寬 Sidebar 在行動裝置上填滿整個螢幕。(#376)
調整和新增
- Slate 裡面現在可以擺置 Tab 了。(#236)
- Message 支援 Attached 在 Input 底部了。(#243)
- Card 的 Image Header 背景顏色加深了。(#232)
- Horizontal List 現在會換行了。(#229)
- 透過 JavaScript 可以在行動裝置上隱藏 Tooltip 了。(#234)
- 新增 Bottom Menu 用於 Sidebar Menu 中將項目至底。(#238)
- 替 Comment 的 Meta 顏色加深。(#206)
- Slider 左右現在可以擺放 Label 了。(#255)
- Slider 的左半邊透過 JavaScript 可以有顏色了。(#256)
- Message 的 Close 圖示現在更美觀了。(#257)
- Toggle 的陰影移除了。(#298)
- List 的 Link Header 點擊範圍不會寬到整個容器去了。(#305)
- Right Aligned List 能讓清單置右。(#317)
- Sub Header 現在也有語意顏色了。(#300)
- Progress 可以夾在 Segments 中間了。(#301)
- Slate 裡面可以透過 Embed 元件擺放背景影片了。(#323)
- Basic 的按鈕顏色現在文字深色、框線淺色。(#297)
- Secondary Pointing Menu 支援 Vertical 模式了。(#345)
- 重寫 Statistic 的所有外距。(#373)
- Message 現在不用 Close Icon 而是用 Close Button。(#381)
尚未完成、測試中
- Input 有了原地編輯的功能(點擊文字編輯)。(#252)
文件頁面
Tocas 2.2.2
極重大更新,多個樣式被修改!
焦點矚目
-
Tocas UI 現在不仰賴 Noto Sans TC CJK 字體了,這樣的好處是:
- 加速網頁開啟時間,省去了至少 3 MB 的下載容量。
- 支援多國語言,日文、俄文、簡體中文不會有缺字的問題。
- 在 macOS 系統上會採用預設字體,比起 Noto Sans 來說要更美觀。
當然也有壞處。
- 這意味著不同使用者、系統、瀏覽器所呈現的字體都不一樣。
-
List 的黑點符號為了確保統一外觀,所以引用了低於 50 KB 的 Lato 字體。
-
Tocas UI 的版本號碼現在沒有
v
前輟了。(#205)
新增
- List 現在會依照階級而有不同的符號黑點。(#215)
- Ordered List 現在支援透過
[data-value]
和[value]
自訂符號了。(#216) - 單一個 Statistic 現在可以透過
centered
置中了。(#210)
Bug 修正
- 修正 Slate 裡面的 Container 原本會把文字縮到中間的問題。(#220)
- 修正 Slate 裡面的
ts.header
字體大小奇異,被 Slate Header 樣式覆蓋的問題。(#219) - 修正 Slate 中 Icon 按鈕的大小。(#218、#208)
- 修正
<ol>
清單的數字會和內文重疊的外距問題。(#217) - 修正兩個 List 之間的 Margin。(#198)
- 修正 List 在空間不足時,黑點會跟內文換行的問題。(#214)
調整
- List 的 Selection 模式背景不再那麼圓弧了(將圓角改為正常圓角)。
- List 的黑點現在變得更粗、更符合清單了。(#211)
- 現在游標的反白顏色從系統預設更改為深灰色。(#200)
- 多重引言現在不會越來越淡,從原本的透明度改為顏色淡化。(#197)
- Icon 的外距從
0.25rem
改為0.35rem
。(@0a5e39d322fc396a6490a860e7faf1ac3710753b) <strong>
和<optgroup>
的字體粗度現在改為500
。(#205)
文件頁面
- 所有 Jumbotron 都被 Slate 替代了。
- 修正 Gallery 範例卡片沒有 Stackable 的問題。(@db8a3dea79c939afe15f83540f290d715a57c89f)
Tocas 2.2.1
Tocas 2.2
極重大更新,多個樣式被修改!
距離上個更新好像又是兩個月左右,這次多了 56 個 Commit。然後⋯⋯新年快樂!這次的 Tocas UI 新增了幾個元件,還有多處 Bug 修正,也新增了多個點綴樣式,有些樣式也被更改,所以請詳細閱讀下列清單確認自己正在使用的元件使否也在修改列表其中。
焦點矚目
- Header 現在的厚度從
700
降回500
。(#174) - Dropdowns 現在的預設樣式是黏再一起的,並為其新增 Separated 樣式。 (#162)
- 新增 Modal 元件。(@bba66d634f1fa94f1878fdff3bde5a26b2975099)
- Table 現在支援重新排序了(Sorting)了,耶。(#169)
- Checkbox 的用法現在可以透過 JavaScript 簡化了。(#170)
新增
- Basic Dropdown 現在有了 Stackable 模式,可以在手機上層疊而非平行顯示。(#160)
- Dropdowns 現在可以在中間插入 Divider 來水平分隔下拉式選單了。(#164)
- Buttons 新增了 Separated 樣式,可以分開按鈕並帶有間距。(#138)
- Checkboxes 現在有了 Stackable 模式能夠在手機上層疊而非平行顯示。(#159)
- Header 現在有 Block 樣式可以讓自己像一個區塊那樣顯示了。(@412f430196448c9d685207142dc7c446d578bddd)
- Header 現在能夠 Attached 在其他元件上、下或中間了。(#144)
- 你現在能夠在 Slate 裡面放置 Image 當背景圖片了。(#148)
- Statistic 現在可以在旁邊放入異動數字。(#163)
- 新增 Reversed Grid 與 Row。(#178)
- Card 裡面的 Image 現在可以放置 Header。(#132)
- Images 現在有 Related 樣式可以擺置子圖片。(#86)
- Checkbox 現在有 Required 樣式可以帶有必填的符號。(@3feea9e2b952d07cf08e55409278b787fc9cebda)
Bug 修正
- Required 的 Checkbox 欄位現在智慧化,如果有欄位中 Label 則星號 Label,如果沒有 Label 則星號所有 Checkbox。(#152)
- 修正 Definition Table 左側的標頭文字顏色。(#151)
- 修正 Dropdown Button 會蓋過 Dropdown Menu 的問題。(#157)
- 修正 Dropdown 原本只能按周遭文字開啟,現在可以按下圖片開啟了。(#167)
- Action Input 現在可以有更多樣化的搭配。(#153)
- Menu 中的 List Item 現在不會有奇怪的點擊背景顏色。(#143)
- Form 裡面的 Textarea 現在可以透過 Resizable Field 來允許使用者重新調整文字框大小。(#146)
- 修正 Symbol 在 Card 裡面的位移。(#175)
- 修正 Menu 的 Unread 標記位移。(#165)
- 修正 Inverted Button 的奇怪顏色。(#156)
調整和新增
Tocas 2.1
極重大更新,請注意部分功能被拋棄!
是時候來到了 Tocas UI 2.1 版本,距離 2.0 相差了三個月左右,這其中新增、修改了許多功能與 Bug,然後聖誕快樂!
焦點矚目
這是一個重大版本的更新,其功能亦有重大變更,請仔細查看下方列表。
- Jumbotron(聚焦看板)現在改名為 Slate(板岩)了,並且有著更多的樣式與外觀。(#141)
- 新增 Popup(也稱作 Tooltip)元件,這是個純 CSS 而非仰賴 JavaScript 的元件。(#123)
按鈕、連結撰寫注意
本次更新將 <a>
與 <span>
更改成為了 display: inline-block
,如果你將按鈕放置於連結內,
並將按鈕設為 .right.floated
並不會有效果,這個時候請遵守「連結就該是連結,按鈕就該是按鈕。」,
倘若你想用連結把按鈕包住,那麼你可以直接這樣: <a class="ts right floated button">我是按鈕連結</a>
。
新增
- Message 現在有了 Secondary 的樣式。(#124)
- List 的項目現在也有了語氣,並且支援 Inverted。(#128)
- Card 現在有了 Compact 樣式,可令卡片依內容作為寬度基準。(#122)
- Checkbox 現在有了 Inverted 樣式。(#113)
- Image 現在有了 Link 效果,滑鼠移過時圖片會浮起。(#121)
Bug 修正
- Basic Button 的顏色現在都正確而且極具回饋感了。(#117)
- 修正了 Menu 中的項目會與 List 中項目有所衝突的問題。(#133)
- 修正了 Menu 項目 Disabled 時,項目中元素並無被停用的問題。
- 現在 Floated 效果能在 Flexbox 中生效。(#135)
調整和新增
Tocas 2.0.2
Tocas 2.0.1
重大改變
- 你現在可以將 Dropdown 放入 Menu 了。 (#114)
Bug 修正
- 修正幾個 Menu 顏色問題。
調整和新增
- 框線的顏色現在更深了。
- 陰影現在沒有那麼模糊。
- Dropdown 的 Divider 現在有了
.section
樣式。 - Dropdown 裡文字右側的圖示現在得到了外距改善。
Tocas 2.0
重大改變
- 移除了動畫系統(現在你需要手動使用 Animate.css)。
<figure>
不再有預設的外距了。
Tocas 2.0 RC 8
重大修復,請儘早更新至此版本
重大改變
- 新增動畫系統(尚未完成)。
- List 現在是 Flexbox 了。
- Button 新增
.very.compact
。 - Label 新增
.compact
。 - 當 Label 是
.empty
時,會透過text-indent
隱藏文字。 .fluid
Menu 現在沒有圓角了。- Checkbox 的標籤現在有預設文字顏色了。
Bug 修正
- 修正 #93 圖片無法水平置中。
- 修正
compact
沒辦法使labeled icon
和icon
Button 輕巧。 - 修正
stackable
的tabbed
Menu 框線。 - 修正 Active 的
tabbed
Menu 項目還能被點擊。 - 修正 Firefox 的
inline field
輸入欄位會偏移。 - 修正
.large.screen.only
的 RWD。 - 修正 Message 裡面連結的顏色。
- 修正部分 Menu 有圓角 Hover 問題。
調整和新增
- 新增反色連結顏色。
- 移除 Checkbox 群組在
.field
內的內距。
Tocas 2.0 RC 7
重大修復,請儘早更新至此版本
重大改變
- 新增
Slider
滑桿模塊。 - 新增
<html data-ts-native>
。 - 新增 Active 的連結樣式。
waterfall
Cards 現在可以自訂排數了。- 新增 Sub Menu。
Bug 修正
- 修正多個 Firefox Bug(如:Dropdown 沒有箭頭、Input 狀態無圖示)。
- 修正 Segment 的 Loading Loader 偏移。
- 修正
stackable
Cards 的頂部間距。 - 修正
waterfall
Cards 的卡片間距。
調整和新增
- 新增
borderless
的 Dropdown。 - 調整 Segment 和 Button 反色時的框線顏色。