Message

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

The message port closed before a response was received.

<div class="message"> <main class="message_body"> <p class="message_txt">The message port closed before a response was received.</p> <button class="btn-close sz:sm"></button> </main> </div>

內文中使用 <strong> 可用來作簡易小標。

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

<div class="message"> <main class="message_body"> <p class="message_txt"> <strong>God!</strong> The message port closed before a response was received. </p> <button class="btn-close sz:sm"></button> </main> </div>

Title

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

message!

The message port closed before a response was received.

<div class="message"> <main class="message_body"> <div class="message_content"> <h6 class="message_title"></h6> <p class="message_txt"></p> </div> <button class="btn-close sz:sm"></button> </main> </div>

Header

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

message!

The message port closed before a response was received.

<div class="message"> <header class="message_head"> <h6 class="message_title"></h6> <button class="btn-close sz:sm"></button> </header> <main class="message_body"> <div class="message_content"> <p class="message_txt"></p> </div> </main> </div>

Time & Decoration

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

Time
message!

The message port closed before a response was received.

<div class="message"> <header class="message_head"> <h6 class="message_title"></h6> <time class="message_time"></time> <button class="btn-close sz:sm"></button> </header> <main class="message_body"> <div class="message_content"> <p class="message_txt"></p> </div> </main> </div>

Iconfont
message!

The message port closed before a response was received.

<div class="message"> <header class="message_head"> <i class="icon fas fa-bomb"></i> <h6 class="message_title"></h6> <time class="message_time"></time> <button class="btn-close sz:sm"></button> </header> <main class="message_body"> <div class="message_content"> <p class="message_txt"></p> </div> </main> </div>

Iconfont
message!

The message port closed before a response was received.

<div class="message"> <header class="message_head"> <i class="icon fas fa-bomb"></i> <h6 class="message_title"></h6> <time class="message_time"></time> <button class="btn-close sz:sm"></button> </header> <main class="message_body"> <div class="message_content"> <p class="message_txt"></p> </div> </main> </div>

Symbol
message!

The message port closed before a response was received.

<div class="message"> <header class="message_head"> <i class="symbol">{code}</i> <strong class="message_title"></strong> <time class="message_time"></time> <button class="btn-close sz:sm"></button> </header> <main class="message_body"> <div class="message_content"> <p class="message_txt"></p> </div> </main> </div>

Avatar
A
message!

The message port closed before a response was received.

<div class="message"> <header class="message_head"> <div class="avatar :square clr:dark"> <span class="avatar_obj"></span> </div> <strong class="message_title"></strong> <time class="message_time"></time> <button class="btn-close sz:sm"></button> </header> <main class="message_body"> <div class="message_content"> <p class="message_txt"></p> </div> </main> </div>

Status

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

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

The message port closed before a response was received.

<div class="message" status="success"> <header class="message_head"> <h6 class="message_title"></h6> <button class="btn-close sz:sm"></button> </header> <main class="message_body"> <div class="message_content"> <p class="message_txt"></p> </div> </main> </div>

Warning
Warning!

The message port closed before a response was received.

<div class="message" status="warning"></div>

Danger
Warning!

The message port closed before a response was received.

<div class="message" status="danger"></div>

Theme

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

Dark!

The message port closed before a response was received.

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

Position

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

右上

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.