台灣正體

簡短通知

帶動作的短時間浮動訊息通知。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
你已成功地還原檔案了。
<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="action is-negative">全部刪除</button>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標