分隔線 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-divider"></div>

概要

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

外觀

區段的

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

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

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

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

垂直的

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

嗶嗶嗶。

旁邊是國際換日線。

<div class="ts-box is-horizontal">
    <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">2022 年 04 月 01 日</div>
<div class="ts-divider is-center-text">你可能會喜歡這些商品</div>
<div class="ts-divider is-end-text">商品說明</div>

組合應用

第三方登入

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

電子信箱地址

密碼

或是透過下列方式登入

<div class="has-flex-center has-full-size">
    <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">
                <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">
                <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>