內容遮罩 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-centered">
        <div class="ts-loading is-large" style="color: #FFF"></div>
    </div>
</div>

外觀

半部的

遮罩可以只覆蓋父容器的上、中、下部份。

置上遮罩

然後這裡會放一段文字。

置中遮罩

然後這裡會放一段文字。

置底遮罩

然後這裡會放一段文字。

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-top">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">置上遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-middle">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">置中遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-bottom">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">置底遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>

內容置中的

置中遮罩的內容，適合用來擺放讀取狀態。

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-centered">
        <div class="ts-loading is-large" style="color: #FFF"></div>
    </div>
</div>

淡化的

遮罩可以處於父容器的上、中、下部份。

置上遮罩

然後這裡會放一段文字。

置底遮罩

然後這裡會放一段文字。

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-faded is-top">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">置上遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>
<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-faded is-bottom">
        <div class="ts-content" style="color: #FFF">
            <div class="ts-header">置底遮罩</div>
            然後這裡會放一段文字。
        </div>
    </div>
</div>

次要的

沒有背景的遮罩會顯得不重要，但可以用來呈現內容在某些物件上。

限時特價

現在購買這個蛋糕只需要新台幣 3,000 元！

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-secondary is-bottom">
        <div class="ts-content" style="color: #333">
            <div class="ts-header">限時特價</div>
            現在購買這個蛋糕只需要新台幣 3,000 元！
        </div>
    </div>
</div>

模糊的

被遮蔽的內容能夠以模糊化處理。

<div class="ts-image">
    <img src="image.png" style="max-width: 450px">
    <div class="ts-mask is-blurring"></div>
</div>

組合應用

關閉按鈕

透過搭配遮罩與關閉按鈕可以讓圖片的右上角有個常見的移除、關閉動作。

<div class="ts-image is-rounded">
    <img src="image.png" width="150">
    <div class="ts-mask is-secondary is-top">
        <div class="ts-content is-compact is-end-aligned has-leading-none">
            <button class="ts-close"></button>
        </div>
    </div>
</div>

附屬資訊

圖片的右下角可以擺放時間或是檔案大小。

32 KB

<div class="ts-image is-rounded">
    <img src="image.png" width="150">
    <div class="ts-mask is-secondary is-bottom">
        <div class="ts-content is-compact is-end-aligned">
            <div class="ts-badge">32 KB</div>
        </div>
    </div>
</div>