中繼資料 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

使用者條約隱私政策聯繫我們

<div class="ts-meta">
    <a class="item">使用者條約</a>
    <a class="item">隱私政策</a>
    <a class="item">聯繫我們</a>
</div>

外觀

次要的

使其文字顏色變得更不顯眼。

天野望火井向百合成海遙香

<div class="ts-meta is-secondary">
    <a class="item">天野望</a>
    <a class="item">火井向百合</a>
    <a class="item">成海遙香</a>
</div>

文字對齊

更改文字的對齊方式。

置起始位置置起始位置

我置中我置中

置結束位置置結束位置

<div class="ts-meta is-start-aligned">
    <a class="item">置起始位置</a>
    <a class="item">置起始位置</a>
</div>
<div class="ts-meta is-center-aligned">
    <a class="item">我置中</a>
    <a class="item">我置中</a>
</div>
<div class="ts-meta is-end-aligned">
    <a class="item">置結束位置</a>
    <a class="item">置結束位置</a>
</div>

尺寸

更改中繼資料的大小。

朝武芳乃常陸茉子ムラサメ

<div class="ts-meta is-small">
    <a class="item">朝武芳乃</a>
    <a class="item">常陸茉子</a>
    <a class="item">ムラサメ</a>
</div>
<div class="ts-meta">
    <a class="item">朝武芳乃</a>
    <a class="item">常陸茉子</a>
    <a class="item">ムラサメ</a>
</div>
<div class="ts-meta is-large">
    <a class="item">朝武芳乃</a>
    <a class="item">常陸茉子</a>
    <a class="item">ムラサメ</a>
</div>

組合應用

標題與資料

在部落格或是一些文章列表中，經常能看到其標題底下會有一個中繼資料的區塊。

野心更大的虛擬 YouTuber 團體邁向偶像化，而距離感也與日俱增

Yami Odymel 2020 年 02 月 14 日

圖像複用、反轉、鏡射：怎麼將遊戲壓縮在 40 KB 以下還同時保持關卡獨特性？

Yami Odymel 2020 年 01 月 18 日

<div class="ts-header">野心更大的虛擬 YouTuber 團體邁向偶像化，而距離感也與日俱增</div>
<div class="ts-meta is-secondary">
    <a class="item">Yami Odymel</a>
    <a class="item">2020 年 02 月 14 日</a>
</div>
<div class="ts-divider is-section"></div>
<div class="ts-header">圖像複用、反轉、鏡射：怎麼將遊戲壓縮在 40 KB 以下還同時保持關卡獨特性？</div>
<div class="ts-meta is-secondary">
    <a class="item">Yami Odymel</a>
    <a class="item">2020 年 01 月 18 日</a>
</div>

在尋找相似的元件嗎？

清單