步驟指示器
呈現目前行為的進度、章節跳轉。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
帳單對象
購物車
付款
<div class="ts-procedure">
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">帳單對象</div>
        </div>
        <div class="line"></div>
    </div>
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">購物車</div>
        </div>
        <div class="line"></div>
    </div>
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">付款</div>
        </div>
        <div class="line"></div>
    </div>
</div>
內容
圖示

每個步驟都可以帶有象徵圖示。

<div class="ts-procedure">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator">
                <span class="ts-icon is-user-icon icon"></span>
            </div>
            <div class="label">帳號建立</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-active">
        <div class="content">
            <div class="indicator">
                <span class="ts-icon is-id-card-icon icon"></span>
            </div>
            <div class="label">身份驗證</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator">
                <span class="ts-icon is-eye-icon icon"></span>
            </div>
            <div class="label">等待審核</div>
        </div>
        <div class="line"></div>
    </a>
</div>
註釋

以註釋大略解釋某個步驟的行為。

<div class="ts-procedure">
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">
                下標
                <div class="description">決定此標的物價格。</div>
            </div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">
                付款
                <div class="description">支付相關費用。</div>
            </div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">
                領回
                <div class="description">取得已得標商品。</div>
            </div>
        </div>
        <div class="line"></div>
    </a>
</div>
狀態
已完成

表示某個步驟已經完成。

<div class="ts-procedure">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">連接電源</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">啟用 WiFi</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">掃描 QR Code</div>
        </div>
        <div class="line"></div>
    </a>
</div>
啟用的

標明目前正處於的步驟狀態。

<div class="ts-procedure">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">建立訂單</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-active">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">配送貨物</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">完成訂單</div>
        </div>
        <div class="line"></div>
    </a>
</div>
處理中

表示這個資源正在指定的步驟處理中。與「啟用中」不同的是這更像表明現在的背景進度已經執行到哪一步。

<div class="ts-procedure">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">提出修正</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-processing">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">等待通知</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">獲得獎勵</div>
        </div>
        <div class="line"></div>
    </a>
</div>
停用的

淡化某個步驟令使用者無法回頭或是表示尚未有能夠到達該步驟的條件。

<div class="ts-procedure">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">建立 PIN 碼</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-processing">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">初始化指紋辨識</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-disabled">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">配置重設密碼</div>
        </div>
        <div class="line"></div>
    </a>
</div>
外觀
緊緻的

以更小化的方式呈現步驟指示。

<div class="ts-procedure is-compact">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">上傳檔案</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-processing">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">設定密碼</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">分享給朋友</div>
        </div>
        <div class="line"></div>
    </a>
</div>
層疊的

文字可以與指示器層疊,這樣就不會使用過多的寬度空間。

<div class="ts-procedure is-stacked">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">建立伺服器</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-processing">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">設定 IP 位址</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">封鎖來源</div>
        </div>
        <div class="line"></div>
    </a>
</div>
負面的

表示某個環節出錯了。

<div class="ts-procedure">
    <a class="item is-negative">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">建立帳號</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">驗證信箱</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">歡迎使用</div>
        </div>
        <div class="line"></div>
    </a>
</div>
無序的

讓使用者知道能夠在任意步驟來回穿越而不須按照順序,在這個狀況下完成的步驟不會有線條指示。

<div class="ts-procedure is-unordered">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">影片資訊</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-active">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">廣告營利</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">隱私設定</div>
        </div>
        <div class="line"></div>
    </a>
</div>
<div class="ts-procedure is-unordered is-compact">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">影片資訊</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-active">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">廣告營利</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">隱私設定</div>
        </div>
        <div class="line"></div>
    </a>
</div>
垂直的

以上下垂直的方式展示每個步驟,適合放於側邊給予指示。

<div class="ts-procedure is-vertical">
    <a class="item is-completed">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">分割磁碟</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item is-active">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">安裝系統</div>
        </div>
        <div class="line"></div>
    </a>
    <a class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">初始化環境</div>
        </div>
        <div class="line"></div>
    </a>
</div>
尺寸

更改步驟指示器的大小。

確認資訊
選擇上車地點
付款
確認資訊
選擇上車地點
付款
確認資訊
選擇上車地點
付款
<div class="ts-procedure is-small">
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">確認資訊</div>
        </div>
        <div class="line"></div>
    </div>
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">選擇上車地點</div>
        </div>
        <div class="line"></div>
    </div>
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">付款</div>
        </div>
        <div class="line"></div>
    </div>
</div>
<div class="ts-procedure">
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">確認資訊</div>
        </div>
        <div class="line"></div>
    </div>
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">選擇上車地點</div>
        </div>
        <div class="line"></div>
    </div>
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">付款</div>
        </div>
        <div class="line"></div>
    </div>
</div>
<div class="ts-procedure is-large">
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">確認資訊</div>
        </div>
        <div class="line"></div>
    </div>
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">選擇上車地點</div>
        </div>
        <div class="line"></div>
    </div>
    <div class="item">
        <div class="content">
            <div class="indicator"></div>
            <div class="label">付款</div>
        </div>
        <div class="line"></div>
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n