簡短通知

帶動作的浮動訊息通知。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
你已成功地還原檔案了。
<div class="ts-snackbar">
    <div class="content">你已成功地還原檔案了。</div>
    <button class="action">重新送出</button>
</div>
概要

適合擺放在角落的通知元件,這和常駐訊息類似但能擺放動作按鈕。

結構
文字

簡短通知最基礎的文字訊息。

澳門首家線上賭場上線啦!
<div class="ts-snackbar">
    <div class="content">澳門首家線上賭場上線啦!</div>
</div>
動作

帶有動作的簡短通知可以在點擊後執行某項行為。

這個檔案已經損毀了。
<div class="ts-snackbar">
    <div class="content">這個檔案已經損毀了。</div>
    <button class="action">移至回收桶</button>
</div>
關閉按鈕

擺放關閉按鈕讓使用者能提早關閉通知。

檢舉已送出,你會在之後收到電子信件通知。
<div class="ts-snackbar">
    <div class="content">檢舉已送出,你會在之後收到電子信件通知。</div>
    <button class="close"></button>
</div>
外觀
負面的

表明這個動作執行之後可能有危險、負面或破壞性的意味。

你有五則訊息尚未讀取。
<div class="ts-snackbar">
    <div class="content">你有五則訊息尚未讀取。</div>
    <button class="action is-negative">全部刪除</button>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標