下拉式選擇
基礎的下拉式項目輸入欄位。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n