通知

自動的にフェードアウトする切り替え可能な通知を作成します。

使用方法

通知は、マウスオーバーをやめるまで、メッセージにマウスオーバーするとフェードアウトせずに表示されたままになります。クリックして通知を閉じることもできます。通知を表示するために、コンポーネントはシンプルな 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`	文字列	`String`	null
`通知のステータスカラー。 // Stringを追加`	timeout	`5000`	数値
通知が消えるまでの表示時間。 `0` に設定すると、通知は自動的に非表示になりません。	文字列		group
`String //Stringを追加`	文字列	`中央上`	表示するコーナー。

JavaScript

JavaScriptコンポーネントの詳細はこちらをご覧ください。

初期化

これは `関数型コンポーネント` であり、要素引数を省略できます。

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

イベント

このコンポーネントがアタッチされた要素で、以下のイベントがトリガーされます。

名前	説明
`close`	通知が閉じられた後に発生します。

メソッド

コンポーネントでは以下のメソッドが利用可能です

閉じる

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

通知を閉じます。

名前	タイプ	デフォルト	説明
`immediate`	ブール値	true	通知をトランジションアウトします。

アクセシビリティ

通知コンポーネントは、適切な WAI-ARIA の役割、状態、およびプロパティを自動的に設定します。

*通知* には `alert` ロールがあります。

ドキュメント

通知