Notice

用於訊息公告、提示等等用途。使用類別名稱為 .notice 並以此作為子元件前綴詞。注意的是,Notice 預設是不顯示的,如要顯示 Notice 需加上 .is:on

The message port closed before a response was received.


God! The message port closed before a response was received.

<div class="notice"> <main class="notice_body"> <p class="notice_txt"></p> <button class="btn-close sz:sm"></button> </main> </div>

Title

除了在內文使用 <strong> 之外,也可以在 .notice_body 內新增 .notice_title

Notice!

The message port closed before a response was received.

<div class="notice"> <main class="notice_body"> <div class="notice_content"> <h6 class="notice_title"></h6> <p class="notice_txt"></p> </div> <button class="btn-close sz:sm"></button> </main> </div>

Header

可以在 .notice 內新增 .notice_head,並將 Title 與 Close 移動到此。

Notice!

The message port closed before a response was received.

<div class="notice"> <header class="notice_head"> <strong class="notice_title"></strong> <button class="btn-close sz:sm"></button> </header"> <main class="notice_body"> <div class="notice_content"> <p class="notice_txt"></p> </div> </main> </div>

Time & Decoration

.notice_head 新增 .notice_time 用以標註時間。也可以置入 Icon / Symbol 元件,甚至可以置入 Avatar。

Notice!

The message port closed before a response was received.


Notice!

The message port closed before a response was received.


Notice!

The message port closed before a response was received.


A
Notice!

The message port closed before a response was received.

<div class="notice"> <header class="notice_head"> <div class="avatar"></div> <strong class="notice_title"></strong> <time class="notice_time"></time> <button class="btn-close sz:sm"></button> </header"> <main class="notice_body"> <div class="notice_content"> <p class="notice_txt"></p> </div> </main> </div>

Status

可透過狀態類別更改 Notice 的配色。狀態類別或屬性有以下三種:

  • 成功:.is:success[status=success]
  • 警告:.is:warning[status=warning]
  • 危險:.is:danger[status=danger]
Success!

The message port closed before a response was received.


Warning!

The message port closed before a response was received.


Danger!

The message port closed before a response was received.

<div class="notice is:success"></div> <div class="notice" status="success"></div>

Theme

可加上 .theme:dark 更換成深色主題。

Dark!

The message port closed before a response was received.

<div class="notice theme:dark"></div>

Position

可加上以下類別名稱來決定 Notice 出現的位置。

右上

The message port closed before a response was received.

左上

The message port closed before a response was received.

右下

The message port closed before a response was received.

左下

The message port closed before a response was received.