表單控制項 - 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-control">
    <div class="label">使用者名稱</div>
    <div class="content">
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
</div>

概要

這個通常用在表單輸入欄位上，這會單純地將欄位區分為標籤、內容，可以說是帶有固定寬度的網格系統。這個元件並不太適合應用於響應式設計的網頁，因為其要求父容器要有一定的寬度。此時建議使用網格系統來建立一個更彈性的表單會較為合適。

外觀

標籤對齊

標籤可以置起始位置，但這樣可能會讓標籤距離內容欄位太遠而不好辨識。

年齡

<div class="ts-control">
    <div class="label is-start-aligned">年齡</div>
    <div class="content">
        <div class="ts-input is-fluid">
            <input type="number">
        </div>
    </div>
</div>

內距增高的

如果在內容欄位裡擺放純文字或是某些較矮的元素則需要特別增高內距以避免其高度無法與標籤對齊。

電子信箱地址

[email protected]

封鎖廣告內容

啟用

<div class="ts-control">
    <div class="label">電子信箱地址</div>
    <div class="content is-padded">
        [email protected]
    </div>
</div>
<div class="ts-control">
    <div class="label">封鎖廣告內容</div>
    <div class="content is-padded">
        <label class="ts-switch">
            <input type="checkbox" checked />
            啟用
        </label>
    </div>
</div>

流動的

內容欄位預設的寬度不是全寬，如果希望填滿父容器寬度則可以使用此樣式。

暱稱

<div class="ts-control">
    <div class="label">暱稱</div>
    <div class="content is-fluid">
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
</div>

較寬的

使整個控制項運用更多的空白，適合較窄的容器。

標籤

<div class="ts-control">
    <div class="label">標籤</div>
    <div class="content">
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
</div>
<div class="ts-control is-wide">
    <div class="label">標籤</div>
    <div class="content">
        <div class="ts-input is-fluid">
            <input type="text">
        </div>
    </div>
</div>

組合應用

區段分隔線

如果有兩個控制項欄位互不相關，可以考慮透過區段分隔線將其分開。

使用者名稱

密碼

行銷通知

我想接收到更多的電子信箱通知。

<div class="ts-wrap is-vertical">
    <div class="ts-control">
        <div class="label">使用者名稱</div>
        <div class="content">
            <div class="ts-input is-fluid">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="ts-control">
        <div class="label">密碼</div>
        <div class="content">
            <div class="ts-input is-fluid">
                <input type="password">
            </div>
        </div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-control">
        <div class="label">行銷通知</div>
        <div class="content is-padded">
            <label class="ts-switch">
                <input type="checkbox" checked />
                我想接收到更多的電子信箱通知。
            </label>
        </div>
    </div>
</div>

特別區塊

透過內容區塊點綴也能讓某個控制項看起來像一個獨立的邏輯區塊。

真實姓名

危險地區

注意，你將無法復原這項行為。

<div class="ts-wrap is-vertical">
    <div class="ts-control">
        <div class="label">真實姓名</div>
        <div class="content">
            <div class="ts-input is-fluid">
                <input type="text">
            </div>
        </div>
    </div>
    <div class="ts-divider"></div>
    <div class="ts-control">
        <div class="label">危險地區</div>
        <div class="content">
            <div class="ts-content is-rounded is-secondary is-padded">
                <button class="ts-button is-outlined is-negative">移除使用者</button>
                <div class="ts-space is-small"></div>
                <div class="ts-text is-description">注意，你將無法復原這項行為。</div>
            </div>
        </div>
    </div>
</div>

在尋找相似的元件嗎？

外觀

標籤對齊 is-start-aligned 內距增高的 is-padded 流動的 is-fluid 較寬的 is-wide

組合應用

區段分隔線 {{ts-divider}} 特別區塊 {{ts-content}}