範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-snackbar">
<div class="content">你已成功地還原檔案了。</div>
<button class="action">重新送出</button>
</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>
在尋找相似的元件嗎?