關閉按鈕 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

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

在尋找相似的元件嗎？

按鈕