關聯標籤 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

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>

次要的

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

👀 8

免費 WiFi

<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> 說聲早安！

組合應用

反應

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

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

👌 21

👀 8

<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-wrap is-center-aligned is-compact has-top-spaced">
    <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-grid">
    <div class="column">
        <div class="ts-avatar is-large">
            <img src="user.png">
        </div>
    </div>
    <div class="column is-fluid">
        <div class="ts-input">
            <textarea placeholder="回覆這封電子郵件…"></textarea>
        </div>
        <div class="ts-grid is-compact has-top-spaced">
            <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>

在尋找相似的元件嗎？

計數徽章