台灣正體

輔助樣式

所有元素皆可使用的全域輔助樣式。
初入上手
開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive 輔助樣式 Utilities
格局設計
箱型容器 Box 絕對置中 Center 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 空白間隔 Space 水平排列 Row 間隔容器 Wrap
表單
按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch
文字與段落
分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text
視覺回饋
圓形量測計 Gauge 讀取狀態 Loading 快顯視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar
多媒體與圖示
大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset
資料顯示
可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table 時間軸 Timeline
導覽
導覽標記 Breadcrumb 彈出式選單 Dropdown 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab
應用程式
邊緣抽屜 App Drawer 格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar 頂部列 App Topbar
JavaScript 模組
選單模組 Module Dropdown 工具提示 Module Tooltip 分頁模組 Module Tab 樣式切換 Module Toggle
概要

全域輔助樣式是十分有害的功能,你必須謹慎使用。所有全域輔助樣式的前輟一定是 u-

可以在所有元件使用的樣式就是全域輔助樣式,例如:u-hidden 能夠隱藏任意元素的可見度,很適合用於響應式設計u-dark 可以強制將某個元素轉為暗色系主題(請檢視主題色系頁面)。

為了避免到處充斥輔助樣式,Tocas UI 會盡可能地限制全域輔助樣式的用法。

使用方式

隱藏某個元素,可以搭配響應式設計來在某些裝置上隱藏元素。許多 Tocas UI 模組都使用這些輔助樣式來切換某些元件。

樣式
display: none;
visibility: hidden;
在亮色主題☀️下會套用 display: none;
在暗色主題🌙下會套用 display: none;
<div class="u-hidden">這段文字會被隱藏。</div>
<div class="u-dark-hidden">這段字在暗色模式🌙下會被隱藏。</div>
增加內距

增加任意元素的內距。為了更加清楚地看見其變化,我們在這個範例替間距加上了背景顏色,在實際應用中並不會看到這個背景色。

如果你想要單獨控制上下垂直的空白,請考慮使用空白間距元件。

樣式
padding: 1rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
padding: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
增加內距。
增加更大的內距。
<div class="u-padded">增加內距。</div>
<div class="u-very-padded">增加更大的內距。</div>
增加外距

增加任意元素的外距,適合用在某些不能增加內距的時候。為了更加清楚地看見其變化,我們在這個範例替間距加上了背景顏色,在實際應用中並不會看到這個背景色。

如果你想要單獨控制上下垂直的空白,請考慮使用空白間距元件。

樣式
margin: 1rem;
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
margin: 1.5rem;
margin-left: 1.5rem;
margin-right: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
增加外距。
增加更大的外距。
<div style="display: flex; flex-direction: column; background: var(--ts-gray-300);">
    <div class="u-spaced">增加外距。</div>
    <div class="u-very-spaced">增加更大的外距。</div>
</div>
貼邊的

搭配響應式設計讓某個有框線的元件能在行動裝置或螢幕過小時,移除「左右框線」與「圓角」來貼齊容器邊緣。

舉例來說:一個片段本來看起來像一張獨立的卡片,但在行動裝置可以讓移除圓角來貼齊螢幕邊緣,得到更多可呈現內容的空間。

這是一個片段內容
<div class="ts-segment u-edged">
    這是一個片段內容
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標