台灣正體

關閉按鈕

一個關閉或是刪除的行為按鈕。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<span class="ts-close"></span>
外觀
次要的

較不顯眼的樣式。

<span class="ts-close is-secondary"></span>
不重要的

可有可無的樣式。

<span class="ts-close is-tertiary"></span>
圓角的

使按鈕的四個角落都變得稍微有點圓角修飾。

<span class="ts-close is-rounded"></span>
尺寸

更改關閉按鈕的大小。

<span class="ts-close is-small"></span>
<span class="ts-close"></span>
<span class="ts-close is-large"></span>
<span class="ts-close is-big"></span>
間隔的

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

解決 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 的心得
組合應用
選項移除

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

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

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

說明項目
多國語元支援的函式庫,協助網站跨國交際。
協助圖像處理的類別,必須要安裝 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>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標