此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

導覽標記

提示目前瀏覽的階層、分類項目。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-breadcrumb">
    <a class="item">映画</a>
    <a class="item">受賞作</a>
    <a class="item is-active">聲の形</a>
</div>
狀態
啟用的

表示目前正處於的位置。

<div class="ts-breadcrumb is-divided">
    <a class="item">
        <span class="ts-icon is-house-icon"></span>
    </a>
    <a class="item">
        <span class="ts-icon is-users-icon is-end-spaced"></span>會員管理
    </a>
    <a class="item is-active">
        建立使用者
    </a>
</div>
外觀
自訂圖示的

預設的導覽標記會以斜線分隔,透過自訂圖示可以透過 divider 元素客製化分隔圖示。

<div class="ts-breadcrumb is-customized">
    <a class="item">網站</a>
    <div class="divider">
        <span class="ts-icon is-caret-right-icon"></span>
    </div>
    <a class="item">註冊程序</a>
    <div class="divider">
        <span class="ts-icon is-caret-right-icon"></span>
    </div>
    <a class="item">個人資料</a>
</div>
階段的

讓導覽標記有階段性的感覺,這會讓非啟用的項目全部淡化呈現。

<div class="ts-breadcrumb is-stepped is-chevroned">
    <a class="item">聯絡我們</a>
    <a class="item">技術問題</a>
    <a class="item is-active">表單</a>
</div>
箭頭的

以箭頭分隔項目。

<div class="ts-breadcrumb is-chevroned">
    <a class="item">線上購物</a>
    <a class="item">24H 送達</a>
    <a class="item">智慧型手機</a>
</div>
連字符的

以基本的連字符號分隔項目。

<div class="ts-breadcrumb is-hyphenated">
    <a class="item">無線滑鼠</a>
    <a class="item">快速響應</a>
    <a class="item">特價下殺</a>
</div>
尺寸

更改導覽標記的大小。

<div class="ts-breadcrumb is-small">
    <a class="item">使用文件</a>
    <a class="item">程式開發</a>
    <a class="item">Golang</a>
</div>
<div class="ts-breadcrumb">
    <a class="item">使用文件</a>
    <a class="item">程式開發</a>
    <a class="item">Golang</a>
</div>
<div class="ts-breadcrumb is-large">
    <a class="item">使用文件</a>
    <a class="item">程式開發</a>
    <a class="item">Golang</a>
</div>
組合應用
區塊導覽標記

如果希望導覽標記以一個區塊呈現,別忘記能夠搭配敘述卡片內容區塊使用。

<div class="ts-segment is-secondary">
    <div class="ts-breadcrumb is-chevroned">
        <a class="item">電影</a>
        <a class="item">科幻與冒險</a>
        <a class="item">星際效應</a>
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標