清單 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

橙希

卡莉絲

羽田白音

<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>

樣式變數

	說明	預設值	目標
--gap	項目之間的空白間隙高度。	`0rem`	`.ts-list`

在尋找相似的元件嗎？

中繼資料