通知

建立可切換的通知，並使其自動淡出。

使用方式

當您將滑鼠游標懸停在訊息上時，通知將不會淡出，而是保持可見，直到您停止懸停為止。您也可以透過點擊通知來關閉它。為了顯示通知，元件提供了一個簡單的 JavaScript API。以下程式碼片段可讓您開始使用。

JavaScript

UIkit.notification({
    message: 'my-message!',
    status: 'primary',
    pos: 'top-right',
    timeout: 5000
});

// Shortcuts
UIkit.notification('My message');
UIkit.notification('My message', status);
UIkit.notification('My message', { /* options */ });

<button class="demo uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Notification message'})">Click me</button>

HTML 訊息

您可以在您的通知訊息內使用 HTML，例如來自圖示元件的圖示。

UIkit.notification("<span uk-icon='icon: check'></span> Message");

<button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: '<span uk-icon=\'icon: check\'></span> Message with an icon'})">With icon</button>

位置

新增以下其中一個參數，將通知的位置調整到不同的角落。

UIkit.notification("…", {pos: 'top-right'})

位置	程式碼
`左上`	`UIkit.notification("…", {pos: 'top-left'})`
`頂部置中`	`UIkit.notification("…", {pos: 'top-center'})`
`右上`	`UIkit.notification("…", {pos: 'top-right'})`
`左下`	`UIkit.notification("…", {pos: 'bottom-left'})`
`底部置中`	`UIkit.notification("…", {pos: 'bottom-center'})`
`右下`	`UIkit.notification("…", {pos: 'bottom-right'})`

<p uk-margin>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Left…', pos: 'top-left'})">Top Left</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Center…', pos: 'top-center'})">Top Center</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Right…', pos: 'top-right'})">Top Right</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Left…', pos: 'bottom-left'})">Bottom Left</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Center…', pos: 'bottom-center'})">Bottom Center</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Right…', pos: 'bottom-right'})">Bottom Right</button>
</p>

樣式

可以透過將狀態新增至訊息來設定通知的樣式，以指示主要、成功、警告或危險狀態。

UIkit.notification("…", {status: 'primary'})

樣式	程式碼
`主要`	`UIkit.notification("…", {status:'primary'})`
`成功`	`UIkit.notification("…", {status:'success'})`
`警告`	`UIkit.notification("…", {status:'warning'})`
`危險`	`UIkit.notification("…", {status:'danger'})`

<p uk-margin>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Primary message…', status: 'primary'})">Primary</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Success message…', status: 'success'})">Success</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Warning message…', status: 'warning'})">Warning</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Danger message…', status: 'danger'})">Danger</button>
</p>

全部關閉

您可以透過呼叫 UIkit.notification.closeAll() 來關閉所有開啟的通知。

<button class="uk-button uk-button-default close" onclick="UIkit.notification.closeAll()">Close All</button>

元件選項

這些選項中的任何一個都可以應用於元件屬性。用分號分隔多個選項。了解更多

選項	值	預設值	描述
`message`	字串	`false`	要顯示的通知訊息。
`status`	字串	`null`	通知狀態顏色。
`timeout`	數字	`5000`	通知消失前的可見持續時間。如果設定為 `0`，通知將不會自動隱藏。
`group`	字串		如果您想關閉特定群組中的所有通知，這很有用。
`pos`	字串	`頂部置中`	顯示角落。

JavaScript

深入了解JavaScript 元件。

初始化

這是一個 功能元件，可以省略元素引數。

UIkit.notification(options);
UIkit.notification(message, status);

事件

以下事件將在附加此元件的元素上觸發

名稱	描述
`close`	在通知關閉後觸發。

方法

以下方法可用於元件

關閉

UIkit.notification(element).close(immediate);

關閉通知。

名稱	類型	預設值	描述
`immediate`	布林值	true	使通知轉場移出。

協助工具

通知元件會自動設定適當的 WAI-ARIA 角色、狀態和屬性。

通知具有 alert 角色。

文件

通知