關聯標籤
用以作為某個元素的輔助要素,如:建議、項目篩選、次要行為。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
Yami Odymel
<div class="ts-chip">
    <div class="ts-image">
        <img src="user.png" />
    </div>
    Yami Odymel
    <button class="ts-close"></button>
</div>
概要

這個元件會根據不同情境其用途而有所變化,例如:用在輸入欄位裡標記好友的人名、卡片底部時的推薦關鍵字,甚至是針對某個訊息的表情反應,就像 Slack 或 Discord 那樣。

你可以查看底部的組合應用章節來看看可以用在哪裡。

種類
輸入項目

當關聯選項成為一個輸入項目的時候,可以將其當作核取方塊或是單選方塊使用。被核取的項目會有勾選圖示作為視覺輔助。

<label class="ts-chip is-input">
    <input type="checkbox" checked />
    <div class="content">健身</div>
</label>
<label class="ts-chip is-input">
    <input type="checkbox" />
    <div class="content">遊戲</div>
</label>
<label class="ts-chip is-input">
    <input type="checkbox" />
    <div class="content">閱讀新聞</div>
</label>
可切換項目

這和輸入項目有點雷同,但在視覺上更像是切換了某個狀態的開、關。

<label class="ts-chip is-toggle is-circular">
    <input type="checkbox" />
    <div class="content">最近熱門</div>
</label>
<label class="ts-chip is-toggle is-circular">
    <input type="checkbox" checked />
    <div class="content">沒去過的地點</div>
</label>
內容
關閉按鈕

擺放一個關閉按鈕可以讓使用者刪除這個選項。

對空音商事
動態思想
<div class="ts-chip is-circular">
    對空音商事
    <button class="ts-close"></button>
</div>
<div class="ts-chip is-circular is-outlined">
    動態思想
    <button class="ts-close is-secondary"></button>
</div>
圖片

以圖片呈現這個選項想要表達的主體。

Yami Odymel
<div class="ts-chip is-circular">
    <div class="ts-image is-circular">
        <img src="user.png" />
    </div>
    Yami Odymel
</div>
狀態
停用的

使選項呈現無法互動、點擊的模樣。若你希望真正地停用核取行為,請在該核取方塊增加 disabled 標籤以符合 HTML 規範。

24 小時營業
<div class="ts-chip is-disabled">
    24 小時營業
</div>
外觀
外框線的

以簡單的框線結構呈現出一個項目。

台灣
美國
香港
<div class="ts-chip is-outlined">
    <span class="ts-flag is-taiwan-flag is-rounded"></span>
    台灣
</div>
<div class="ts-chip is-outlined">
    <span class="ts-flag is-america-flag is-rounded"></span>
    美國
</div>
<div class="ts-chip is-outlined">
    <span class="ts-flag is-hong-kong-flag is-rounded"></span>
    香港
</div>
次要的

當關聯選項是個次要的輸入或可切換項目時,其核取狀態會較為不明顯,適合用於比較不醒目的地方。

<label class="ts-chip is-toggle is-outlined is-secondary">
    <input type="checkbox" checked />
    <div class="content">👀 8</div>
</label>
<label class="ts-chip is-input is-outlined is-secondary">
    <input type="checkbox" checked />
    <div class="content">免費 WiFi</div>
</label>
圓角的

使元件的角落以圓角呈現。

影片
音樂
<div class="ts-chip is-circular">影片</div>
<div class="ts-chip is-circular">音樂</div>
流動的

選項的寬度可以跟父容器相同。

<div class="ts-grid is-3-columns">
    <div class="column">
        <label class="ts-chip is-fluid is-input is-outlined">
            <input type="checkbox" checked />
            <div class="content">小尺碼</div>
        </label>
    </div>
    <div class="column">
        <label class="ts-chip is-fluid is-input is-outlined">
            <input type="checkbox" />
            <div class="content">中等尺寸</div>
        </label>
    </div>
    <div class="column">
        <label class="ts-chip is-fluid is-input is-outlined">
            <input type="checkbox" />
            <div class="content">最大</div>
        </label>
    </div>
</div>
側邊圖示

在兩側放置圖示以輔助這個選項。

影片
自行車活動
<div class="ts-chip is-start-icon">
    <span class="ts-icon is-video-icon"></span>
    影片
</div>
<div class="ts-chip is-end-icon">
    自行車活動
    <span class="ts-icon is-person-biking-icon"></span>
</div>
尺寸

更改關聯標籤的大小。

小型標籤
預設標籤
大型標籤
<div class="ts-chip is-small">
    <span class="ts-icon is-heart-icon"></span>
    小型標籤
</div>
<div class="ts-chip">
    <span class="ts-icon is-heart-icon"></span>
    預設標籤
</div>
<div class="ts-chip is-large">
    <span class="ts-icon is-heart-icon"></span>
    大型標籤
</div>
較密的

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

Caris Events
<div class="ts-chip is-dense is-outlined">
    Caris Events
</div>
間隔的

在前或後新增間隔以避免與其他元件相鄰太近。

文章發表者為 Mac Taylor
Sciuridae Li 是這個社團的管理員。
記得向 Sean Wei 說聲早安!
文章發表者為 <span class="ts-chip is-start-spaced">
    <img src="user.png" />
    Mac Taylor
</span>
<span class="ts-chip is-end-spaced">
    <img src="user.png" />
    Sciuridae Li
</span> 是這個社團的管理員。
記得向 <span class="ts-chip is-spaced">
    <img src="user.png" />
    Sean Wei
</span> 說聲早安!
組合應用
反應

在某些內容底下能夠擺放關聯選項作為對該訊息的反應。

如果你有去釣魚大賽,你可能會被禁止進入:「我們不歡迎職業選手」

<div class="ts-segment">
    <p>如果你有去釣魚大賽,你可能會被禁止進入:「我們不歡迎職業選手」</p>
    <div class="ts-wrap is-compact">
        <label class="ts-chip is-toggle is-secondary is-circular is-outlined">
            <input type="checkbox" checked />
            <div class="content">👌 21</div>
        </label>
        <label class="ts-chip is-toggle is-secondary is-circular is-outlined">
            <input type="checkbox" />
            <div class="content">👀 8</div>
        </label>
        <div class="ts-chip is-outlined is-circular">
            <span class="ts-icon is-plus-icon"></span>
        </div>
    </div>
</div>
標題功能

標題下方可以擺放輔助功能讓使用者有更多選擇。

歡迎回家
溫度 32°C、濕度 48%
<div class="ts-header is-center-aligned is-large">
    歡迎回家
</div>
<div class="ts-text is-center-aligned is-description">
    溫度 32°C、濕度 48%
</div>
<div class="ts-space"></div>
<div class="ts-wrap is-center-aligned is-compact">
    <button class="ts-chip is-outlined">
        <span class="ts-icon is-sun-icon"></span>
        打開所有燈光
    </button>
    <button class="ts-chip is-outlined">
        <span class="ts-icon is-stopwatch-icon"></span>
        設定鬧鐘
    </button>
</div>
卡片選項

有時候在卡片裡擺放按鈕會顯得太顯眼,此時就可以使用關聯選項。

爭鮮 PLUS
迴轉壽司餐廳 $$ 4.5
<div class="ts-box" style="max-width: 360px">
    <img class="ts-image" src="image.png">
    <div class="ts-content">
        <div class="ts-header">爭鮮 PLUS</div>
        <div class="ts-meta is-secondary is-small">
            <span class="item">迴轉壽司餐廳</span>
            <span class="item">$$</span>
            <span class="item">4.5 <span class="ts-icon is-star-icon"></span></span>
        </div>
        <div class="ts-divider is-section"></div>
        <div class="ts-wrap is-compact">
            <button class="ts-chip is-circular">
                <span class="ts-icon is-utensils-icon"></span>
                預訂桌位
            </button>
            <button class="ts-chip is-circular">
                <span class="ts-icon is-motorcycle-icon"></span>
                透過外送訂餐
            </button>
        </div>
    </div>
</div>
文字建議

類似 Google 應用程式會在回覆訊息時提出的文字自動完成建議。

<div class="ts-row">
    <div class="column" style="width: 46px;">
        <div class="ts-image is-rounded">
            <img src="user.png">
        </div>
    </div>
    <div class="column is-fluid">
        <div class="ts-input is-fluid">
            <textarea placeholder="回覆這封電子郵件…"></textarea>
        </div>
        <div class="ts-space"></div>
        <div class="ts-row is-compact">
            <div class="column">
                <div class="ts-wrap is-compact">
                    <button class="ts-chip is-circular">
                        沒問題!
                    </button>
                    <button class="ts-chip is-circular">
                        抱歉,我那天有事。
                    </button>
                </div>
            </div>
            <div class="column is-fluid is-end-aligned">
                <button class="ts-button">送出</button>
            </div>
        </div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n