Notices

Notices 可用於通知或是提示。
例如:當表單送出前或送出後,可利用 Notices 來回饋告知使用者資料是否正確。Notices 相關元件將以 .notice-* 為開頭。

預設樣式

Notices 的基本結構包含外層的 <div class="notice"> 以及文字顯示區域 <p class="notice-text">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

<div class="notice">
    <p class="notice-text">~略~</p>
</div>

Close

你可以新增一個關閉按鈕,讓使用者能夠自行決定是否要關閉。將 <a class="close"> 放置 .notice 當中。

×

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

<div class="notice">
    <a class="close">×</a>
    <p class="notice-text">~略~</p>
</div>

標題

標題設置有兩種方式,如果你要在訊息文字中顯示重要文字,可以使用 <strong>來表示,又或者你可以加上一個 <h6 class="notice-title">

×

Notice! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

×
Notice!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

<div class="notice">
    <a class="close">×</a>
    <p class="notice-text">
        <strong>Notice!</strong>
        ~略~
    </p>
</div>

<div class="notice">
    <a class="close">×</a>
    <h6 class="notice-title">Notice!</h6>
    <p class="notice-text">~略~</p>
</div>

設定顏色

Notices 可搭配 .color-* 來改變配色,Notices 的配色只提供 Primary, Success, Warning 以及 Error 四種。

×

Default! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

×

Primary! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

×

Success! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

×

Warning! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

×

Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

<div class="notice">~略~</div>
<div class="notice color-primary">~略~</div>
<div class="notice color-success">~略~</div>
<div class="notice color-warning">~略~</div>
<div class="notice color-error">~略~</div>

Corner

另外,Notices 提供另一種顯示方式,可以讓 Notice 像是一張小卡片一般顯示於右下角。

×

Notice! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

<div class="notice notice-corner color-success">~略~</div>

Static

如果想取消 .noticeposition: fixed 時,可在 .notice 加上 .notice-static

×

Notice! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, harum?

<div class="notice notice-static color-success">~略~</div>