Message
原 Notice 組件更名為 Message。用於訊息公告、提示、訊息傳遞等等用途。使用類別名稱為 .message 並以此作為子元件前綴詞。注意的是，message 預設是不顯示的，如要顯示 message 需加上 .is:on。
<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> 可用來作簡易小標。
<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。
<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 移動到此。
<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
<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
<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
<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
<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
<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
<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
<div class="message" status="warning"></div>
Danger
<div class="message" status="danger"></div>
Theme
可加上 .theme:dark 更換成深色主題。
<div class="message theme:dark"></div>
Position
可加上以下類別名稱來決定 message 出現的位置。
- 右上：
.@top-right。 - 左上：
.@top-left。 - 右下：
.@bottom-right。 - 左下：
.@bottom-left。