下拉式選擇

基礎的下拉式項目輸入欄位。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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-active">
    <select>
        <option>TeaMeow</option>
        <option>Tunalog</option>
        <option>EnekoCore</option>
    </select>
</div>
內容
自訂內容

在下拉選擇欄位中擺放更豐富的內容,如:圖示旗幟或是大頭貼

使用此樣式的時候原生 HTML 選擇元素將無法使用,須搭配彈出式選單或是以 JavaScript 觸發其他元素。查看底部的組合應用章節來檢視如何使用。

Taiwan
<div class="ts-select">
    <div class="content">
        <span class="ts-flag is-tw-flag"></span>
        Taiwan
    </div>
</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>
組合應用
彈出式選單

下拉式選擇欄位能夠與彈出式選單一同使用。像 Facebook 貼文發表那樣,一個帶有圖示輔助的內容隱私設定欄位。

所有人
<div class="ts-select is-active">
    <div class="content">
        <span class="ts-icon is-users-icon"></span> 所有人
    </div>
    <div class="ts-dropdown is-bottom">
        <button class="item">
            <span class="ts-icon is-users-icon"></span> 所有人
        </button>
        <button class="item is-selected">
            <span class="ts-icon is-user-group-icon"></span> 僅有朋友
        </button>
        <button class="item">
            <span class="ts-icon is-lock-icon"></span> 只限自己
        </button>
    </div>
</div>
使用者標註

在電子信箱或是標註人名時,常常會有一個可供新增更多使用者的下拉式選擇欄位。

不重要預置圖片,僅作為範例用
ゲオルイース
不重要預置圖片,僅作為範例用
グイーネ
<div class="ts-select is-fluid">
    <div class="content">
        <div class="ts-chip">
            <div class="ts-image">
                <img src="user.png" />
            </div>
            ゲオルイース
            <button class="ts-close is-small"></button>
        </div>
        <div class="ts-chip">
            <div class="ts-image">
                <img src="user.png" />
            </div>
            グイーネ
            <button class="ts-close is-small"></button>
        </div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標