台灣正體

圖片組合

將多張照片組合在一起。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
不重要預置圖片,僅作為範例用
不重要預置圖片,僅作為範例用
不重要預置圖片,僅作為範例用
<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-imagesis-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>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標