分隔線
區隔主題或段落的分隔線段。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-divider"></div>
概要

分隔線預設情況下並沒有外距,因為除了用以區隔文字段落之外,分隔線的設計初衷是希望其能單獨作為線條使用。相關搭配方式請參閱底部的組合應用章節。

外觀
區段的

區段的分隔線會有空白間隔相隔上下內容。

我是微笑小安安,歡迎來到小安網站。

你將會在這裡看見一個魔法師的日常生活。沒錯,只要你能夠單身三十年,你也可以跟我一樣成為魔法師。

<p>我是微笑小安安,歡迎來到小安網站。</p>
<div class="ts-divider is-section"></div>
<p>你將會在這裡看見一個魔法師的日常生活。沒錯,只要你能夠單身三十年,你也可以跟我一樣成為魔法師。</p>
垂直的

在一個水平的箱型容器裡擺放垂直的分隔線可以劃分兩個區塊。

嗶嗶嗶。
旁邊是國際換日線。
<div class="ts-box is-horizontal" style="height: 100px;">
    <div class="ts-content">嗶嗶嗶。</div>
    <div class="ts-divider is-vertical"></div>
    <div class="ts-content">旁邊是國際換日線。</div>
</div>
文字的

分隔線中間能夠插入文字。

2022 年 04 月 01 日
你可能會喜歡這些商品
商品說明
<div class="ts-divider is-start-text">20220401 日</div>
<div class="ts-divider is-center-text">你可能會喜歡這些商品</div>
<div class="ts-divider is-end-text">商品說明</div>
組合應用
第三方登入

通常會在登入或註冊表單下方會有個支援第三方登入的功能,透過分隔線可以明確地告訴使用者有額外方式能進行登入。

電子信箱地址
密碼
或是透過下列方式登入
<div class="ts-center">
    <div class="ts-segment" style="width: 280px">
        <div class="ts-wrap is-vertical">
            <div class="ts-text is-label">電子信箱地址</div>
            <div class="ts-input is-start-icon is-fluid">
                <span class="ts-icon is-envelope-icon"></span>
                <input type="text" />
            </div>
            <div class="ts-text is-label">密碼</div>
            <div class="ts-input is-start-icon is-fluid">
                <span class="ts-icon is-lock-icon"></span>
                <input type="password" />
            </div>
            <button class="ts-button is-fluid">註冊</button>
            <div class="ts-divider is-center-text">
                <div class="ts-text is-description">或是透過下列方式登入</div>
            </div>
            <button class="ts-button is-fluid is-start-icon is-outlined">
                <span class="ts-icon is-google-icon"></span> Google
            </button>
        </div>
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n