Close
A button that closes or deletes the object.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
<span class="ts-close"></span>
Variations
Secondary

較不顯眼的樣式。

<span class="ts-close is-secondary"></span>
Tertiary

可有可無的樣式。

<span class="ts-close is-tertiary"></span>
Sizes

更改關閉按鈕的大小。

<span class="ts-close is-small"></span>
<span class="ts-close"></span>
<span class="ts-close is-large"></span>
Spaced

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

解決 Docker Alpine 與 Puppeteer 的 Error
讓 NextCloud 支援影片縮圖預覽
羅技電競滑鼠 G603 和 G304 的心得
解決 Docker Alpine 與 Puppeteer 的 Error <span class="ts-close is-start-spaced"></span>
<span class="ts-close is-end-spaced"></span> 讓 NextCloud 支援影片縮圖預覽
羅技電競滑鼠 G603 <span class="ts-close is-spaced"></span> 和 G304 的心得
Compositions
Chips

關聯選項裡可以擺放關閉按鈕,看起來就像是一個能被刪除的選項。

卡莉絲伊繁星
雷莉雅
<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>
Table

放置在表格裡面可以讓使用者逐行刪除。

說明項目
多國語元支援的函式庫,協助網站跨國交際。
協助圖像處理的類別,必須要安裝 Imagick。
一個基於 HTML5 的遊戲引擎。
<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th class="is-collapsed"></th>
                <th>說明項目</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <button class="ts-close is-secondary"></button>
                </td>
                <td>多國語元支援的函式庫,協助網站跨國交際。</td>
            </tr>
            <tr>
                <td>
                    <button class="ts-close is-secondary"></button>
                </td>
                <td>協助圖像處理的類別,必須要安裝 Imagick。</td>
            </tr>
            <tr>
                <td>
                    <button class="ts-close is-secondary"></button>
                </td>
                <td>一個基於 HTML5 的遊戲引擎。</td>
            </tr>
        </tbody>
    </table>
</div>
Looking for similar components?
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel