圖片組合 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-imageset is-3-images">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

外觀

項目數量

指定一個組合裡面有幾張圖片，這是必要的樣式。可用的數量從 is-2-images 到 is-4-images，若僅有一張則不需指定。

<div class="ts-imageset is-4-images">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

人像的

使格局排列以左右呈現，適合用以展示垂直人像的照片。

<div class="ts-imageset is-portrait is-4-images">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

圓角的

使四個角落都變得稍微有點圓角修飾。

<div class="ts-imageset is-rounded is-3-images">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

密度

圖片的間距可以更密或是更寬鬆。

<div class="ts-imageset is-relaxed is-portrait is-3-images" style="max-width: 300px">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>
<div class="ts-imageset is-portrait is-3-images" style="max-width: 300px">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>
<div class="ts-imageset is-compact is-portrait is-3-images" style="max-width: 300px">
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
    <div class="item">
        <img src="image.png">
    </div>
</div>

在尋找相似的元件嗎？

多媒體圖片