下拉式選擇 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<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>

在尋找相似的元件嗎？

彈出式選單