清單

能夠展現基本文字與項目的列表。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
橙希
卡莉絲
羽田白音
<div class="ts-list is-unordered">
    <div class="item">橙希</div>
    <div class="item">卡莉絲</div>
    <div class="item">羽田白音</div>
</div>
結構
巢狀式清單

在項目裡面擺放一個清單可以達成巢狀式清單的結構。

オルタナティブガールズ
悠木美弥花
柊つむぎ
朝比奈乃々
<div class="ts-list is-unordered">
    <div class="item">
        オルタナティブガールズ
        <div class="ts-list is-unordered">
            <div class="item">悠木美弥花</div>
            <div class="item">柊つむぎ</div>
            <div class="item">朝比奈乃々</div>
        </div>
    </div>
</div>
外觀
無序的

沒有順序的排列項目,每個項目前面都會有一個黑點。

七波白音
宮風夕梨
紬木沙羅
<div class="ts-list is-unordered">
    <div class="item">七波白音</div>
    <div class="item">宮風夕梨</div>
    <div class="item">紬木沙羅</div>
</div>
有序的

項目前都會有一個數字作為順序。

伊波咲
栗宮希實
詩羽
<div class="ts-list is-ordered">
    <div class="item">伊波咲</div>
    <div class="item">栗宮希實</div>
    <div class="item">詩羽</div>
</div>
尺寸

更改清單的大小。

箒木日向子
大舘流花
海蔵もも
箒木日向子
大舘流花
海蔵もも
箒木日向子
大舘流花
海蔵もも
<div class="ts-list is-small is-unordered">
    <div class="item">箒木日向子</div>
    <div class="item">大舘流花</div>
    <div class="item">海蔵もも</div>
</div>
<div class="ts-list is-unordered">
    <div class="item">箒木日向子</div>
    <div class="item">大舘流花</div>
    <div class="item">海蔵もも</div>
</div>
<div class="ts-list is-large is-unordered">
    <div class="item">箒木日向子</div>
    <div class="item">大舘流花</div>
    <div class="item">海蔵もも</div>
</div>
樣式變數
說明

項目之間的空白間隙高度。

在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標