Releases: teacat/tocas
Tocas 2.0 RC 6
重大修復,請儘早更新至此版本
重大改變
- 拋棄 Grid 的 RWD 樣式,統一採用原生 RWD 輔助樣式。
- 如果沒有指定
stackable
的話,Menu 現在預設是水平捲動。 - 卡片的重疊樣式現在命名為
overlapped content
而不是overlay content
。 - 透過
stackable
來讓表格層疊,而不是unstackable
讓表格不層疊。 - 移除手機上按下 Button 時的藍色高光。
- 現在 Form 內的 Select Dropdown 不再需要
.ts.basic.dropdown
。
Bug 修正
- 修正隱藏的 Divider 不會隱藏文字。
- 修正獨立的 Sub Header 無作用。
- 修正輸入欄位群組的 Focus 選擇器。
- 修正上下皆吸附的 Segment 無作用。
- 聚焦看板 Primary 選擇器錯字。
- 修正下拉式功能選單的 z-index。
- 修正
centered
的 Grid。 - 修正
inverted
的 List 文字顏色。 - 修正連結樣式的 Step 顏色。
- 修正將標籤放置於上的 Statistic 奇怪標籤間距。
調整和新增
- 新增 Placeholder 給
[contenteditable]
的 Div。 - 新增
circular
給 Label。 - Button 現在是 Relative 位置。
- 新增
left floated
和right floated
給 Segment。 - Comment 的邊距現在給予
author
而不是metadata
,這將使得你能夠把作者名和中繼資料放在同行。 - 減少子 Comment 的間距。
- Icon 的語氣現在被新增
!important
。 - 現在 Form 內的輸入欄位都會是流動寬度。
- Calendar 現在有背景顏色而不是透明了。
- Item 現在有帶點式中繼資料。
Tocas 2.0 RC 5
重大修復,請儘早更新至此版本
Bug 修正
- 統一連結顏色和樣式。
- 修正
.vertical
的輸入欄位邊框。 - 移除吸附時標籤的邊框。
調整和新增
- 淡化邊框顏色。
- 放大
<h1>
到<h5>
之間的字體大小 - 卡片現在支援連結樣式了。
- 標籤支援
.floated
了。 - 新增
.horizontal
標籤。 - 可以自訂圖示標題中的圖示大小了!
- 清單現在有著跟頁面文字一樣的顏色。
.extra.content
現在可以被擺在卡片的上面、中間。
Tocas 2.0 RC 4
重大修復,請儘早更新至此版本
- 修正按鈕沒有 Active(按下)效果。
- 修正卡片中的 opinion 按鈕有背景顏色。
- 移除卡片中吸附按鈕的框線。
- 修正下拉式選單按鈕的 Hover 停滯問題。
Tocas 2.0 RC 3
新功能和拋棄
Tocas 2 拋棄了 SASS 方面的函式支援,現在幾乎都用原生寫法,意思是你將沒有辦法引用 tocas.sass
然後使用以往的輔助函式,如:+block
、+inline-block
、+table
...等。
拋棄列表
-
顏色渲染函式
你現在不能「重新編譯」來新增元件顏色了,原有顏色不變(
primary
、info
...)。 -
輔助函式
你現在不能夠透過引用
tocas.sass
來使用以往的輔助函式。 -
移除了多餘的過場動畫
現在的按鈕和輸入欄位都更加地直覺。
當然,也有好消息要宣布。
新功能列表
-
所有樣式現在都保存在變數中。
意思是你可以簡單地改變變數中的顏色數值或其他樣式,然後重新編譯,個人化你的 Tocas。
-
更少使用
&
作為 Selector。現在 Selectors 更簡潔了,不需要死腦筋的去思考這個樣式的 Selector 是哪個。
-
沒有多餘的迴圈。
現在不常使用迴圈了,所以和上一個特色一樣,不需要推敲原本的 Selector 為何。
-
Tocas.js 確定加入。
更棒的是,你完全不需要 jQuery,Tocas.js 是完全獨立的。
完全重寫和問題修正
Tocas 2 是完全重寫,並且包含了部分 Semantic UI 的原始碼(Less 轉 Sass),
所以在元件的變化上也更加的穩定一些,不會遇到有不對齊的部分。
在 Tocas 1 的單位不標準的問題也已經修正,現在採用 px
、em
、rem
,但是時機和配合上都沒有問題。
支援圖示系統!
和 Sematic UI 一樣,引進了 Font Awesome 作為圖示系統,現在你可以盡情地採用 <i class="icon">
來使用圖示並和 Tocas UI 的樣式一同搭配了!例如_圓角_、旋轉,等。
要用的時候請記得將 font
和 tocas.css
放在同個目錄中。
可用元件
- 元素 Elements
- 按鈕 Button
- 容器 Container
- 分隔線 Divider
- 標題 Header
- 圖示 Icon
- 影像 Image
- 輸入欄位 Input
- 看板 Jumbotron
- 標籤 Label
- 清單 List
- 讀取指示器 Loader
- 引用 Quote
- 片段 Segment
- 步驟 Step
- 聚合型
- 麵包屑 Breadcrumb
- 表單 Form
- 網格系統 Grid System
- 選單 Menu
- 訊息 Message
- 表格 Table
- 模塊
- 伸縮選單 Accordion
- 日曆 Calendar
- 核取方塊 Checkbox
- 淡化器 Dimmer
- 下拉選單 Dropdown
- 進度條 Progress
- 視圖
- 卡片 Card
- 聊天室 Chatroom
- 留言 Comment
- 動態軸 Feed
- 項目 Item
- 統計數據 Statistic
Tocas 1.0
Careful of the units
The size units are still not confirmed, for example you might meet px
, em
, rem
at the same time.
尺寸單位仍未確認,舉例來說你可能會同時遇到 px
, em
, rem
。
And this problem might NOT be fixed in next few releases.
而這個問題可能不會在接下的幾個釋出中修正。
Available Elements
[WIP] 為尚未完成,但已有雛形
- 元素 Elements
- 按鈕 Button
- 核取方塊 Checkbox [WIP]
- 容器 Container
- 分隔線 Divider
- 標題 Header
- 圖片 Image
- 輸入欄位 Input
- 聚焦看板 Jumbotron
- 標籤 Label
- 清單 List
- 讀取指示器 Loader
- 片段 Segment
- 外觀型 Views
- 卡片 Card
- 聊天室 Chatroom
- 留言 Comment
- 統計數據 Statistic [WIP]
- 聚合型 Collections
- 網格系統 Grid
- 選單 Menu
- 訊息 Message
- 表格 Table
- 模塊 Modules
- 下拉選單 Dropdown [WIP]
- 進度條 Progress [WIP]