下拉式選擇 - Tocas UI

初入上手

開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive

格局設計

箱型容器 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

導覽

導覽標記 Breadcrumb 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab

應用程式

格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-select">
    <select>
        <option>蘋果</option>
        <option>西瓜</option>
        <option>香蕉</option>
    </select>
</div>

狀態

停用的

使下拉選擇欄位呈現無法互動、點擊的模樣。若你希望真正地停用選取行為，請在該下拉選擇欄位增加 disabled 標籤以符合 HTML 規範。

<div class="ts-select is-disabled">
    <select>
        <option>MySpace</option>
        <option>Facebook</option>
        <option>Twitter</option>
    </select>
</div>

外觀

實心填充的

帶有實心背景的欄位能更明確地呈現這是可供互動的元素。

<div class="ts-select is-solid">
    <select>
        <option>Golang</option>
        <option>PHP</option>
        <option>Node.js</option>
    </select>
</div>

底線的

以實心背景和底線明顯呈現一個欄位，讓使用者如填寫表單一樣。

<div class="ts-select is-underlined">
    <select>
        <option>台東</option>
        <option>高雄</option>
        <option>台南</option>
    </select>
</div>

基本的

移除所有多餘的結構，僅呈現下拉文字與輔助圖示。

<div class="ts-select is-basic">
    <select>
        <option>AMD</option>
        <option>Intel</option>
    </select>
</div>

負面的

令一個欄位看起來帶有負面或危險的狀態，通常可能是指這個欄位沒有被選擇。

<div class="ts-select is-negative">
    <select>
        <option>Yami Odymel</option>
        <option>Mac Taylor</option>
        <option>Val Pyen</option>
    </select>
</div>

流動的

使欄位的寬度符合父容器的寬度。

<div class="ts-select is-fluid">
    <select>
        <option>千導院楓</option>
        <option>粒櫻杏子</option>
        <option>若葉昴</option>
    </select>
</div>

尺寸

更改下拉式選擇的大小。

<div class="ts-select is-small">
    <select>
        <option>小型欄位</option>
    </select>
</div>
<div class="ts-select">
    <select>
        <option>預設欄位</option>
    </select>
</div>
<div class="ts-select is-large">
    <select>
        <option>大型欄位</option>
    </select>
</div>

較密的

變更元件的內距，令元素之間看起來更密集。

<div class="ts-select is-dense">
    <select>
        <option>Tensorflow</option>
    </select>
</div>

狀態

停用的 is-disabled

外觀

實心填充的 is-solid 底線的 is-underlined 基本的 is-basic 負面的 is-negative 流動的 is-fluid 尺寸 is-small 較密的 is-dense