提示訊息 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

看過來

請收起側腳架並按住煞車與 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>

在尋找相似的元件嗎？

簡短通知