此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

提示訊息

不帶過多要素的基本提示、警示文字。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
看過來
請收起側腳架並按住煞車與 GO 按鍵重新啟動馬達。
<div class="ts-notice">
    <div class="title">看過來</div>
    <div class="content">請收起側腳架並按住煞車與 GO 按鍵重新啟動馬達。</div>
</div>
概要

這個元件通常用於使用者在執行完某個動作之後會出現的提示訊息(如:表單成功送出、刪除失敗)。

外觀
外框線的

僅描繪訊息的外框線使其看起來較沒有那麼顯眼。

測試階段
目前網站正在進行測試,若有任何不穩定現象請稍待數分鐘即會恢復正常。
<div class="ts-notice is-outlined">
    <div class="title">測試階段</div>
    <div class="content">
        目前網站正在進行測試,若有任何不穩定現象請稍待數分鐘即會恢復正常。
    </div>
</div>
負面的

帶有危險意味的訊息。

刪除失敗
若要刪除此資料夾,請先清空內部的所有檔案。
<div class="ts-notice is-negative">
    <div class="title">刪除失敗</div>
    <div class="content">若要刪除此資料夾,請先清空內部的所有檔案。</div>
</div>
尺寸

更改提示訊息的大小。

小型訊息
這裡是一段文字訊息。
預設訊息
這裡是一段文字訊息。
大型訊息
這裡是一段文字訊息。
<div class="ts-notice is-small">
    <div class="title">小型訊息</div>
    <div class="content">這裡是一段文字訊息。</div>
</div>
<div class="ts-notice">
    <div class="title">預設訊息</div>
    <div class="content">這裡是一段文字訊息。</div>
</div>
<div class="ts-notice is-large">
    <div class="title">大型訊息</div>
    <div class="content">這裡是一段文字訊息。</div>
</div>
較密的

變更元件的內距,令元素之間看起來更密集。

請求已送出
等待對方接受你的好友請求後,便能看到雙方的上線狀態。
<div class="ts-notice is-dense">
    <div class="title">請求已送出</div>
    <div class="content">等待對方接受你的好友請求後,便能看到雙方的上線狀態。</div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標