アラート
成功、警告、エラーメッセージを表示します。
使い方
このコンポーネントを適用するには、ブロック要素にuk-alert属性を追加します。
<div uk-alert></div>- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div uk-alert>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
閉じるボタン
閉じるボタンを作成し、その機能を有効にするには、アラートボックス内の<button>または<a>要素に.uk-alert-closeクラスを追加します。閉じるアイコンを適用するには、閉じるコンポーネントのuk-close属性を追加します。
<div uk-alert>
<a href class="uk-alert-close" uk-close></a>
</div><div uk-alert> <a href class="uk-alert-close" uk-close></a> <h3>Notice</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
スタイル修飾子
いくつかのスタイル修飾子が利用可能です。異なる外観を適用するには、次のいずれかのクラスを追加してください。
| クラス | 説明 |
|---|---|
.uk-alert-primary |
メッセージを目立たせるスタイルにします。 |
.uk-alert-success |
成功または肯定的なメッセージを示します。 |
.uk-alert-warning |
警告を含むメッセージを示します。 |
.uk-alert-danger |
重要なメッセージまたはエラーメッセージを示します。 |
<div class="uk-alert-primary" uk-alert> <a href class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> <div class="uk-alert-success" uk-alert> <a href class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> <div class="uk-alert-warning" uk-alert> <a href class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> <div class="uk-alert-danger" uk-alert> <a href class="uk-alert-close" uk-close></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div>
コンポーネントオプション
これらのオプションはどれもコンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら
| オプション | 値 | デフォルト | 説明 |
|---|---|---|---|
animation |
真偽値 | true |
フェードアウトするか、直接非表示にします。 |
duration |
数値 | 150 |
アニメーションの継続時間（ミリ秒単位）。 |
sel-close |
CSSセレクター | .uk-alert-close |
閉じるトリガー要素。 |
animationはプライマリオプションであり、属性値で唯一のオプションである場合はキーを省略できます。
<span uk-toggle=".my-class"></span>JavaScript
JavaScriptコンポーネントの詳細はこちら。
初期化
UIkit.alert(element, options);イベント
このコンポーネントがアタッチされた要素で、次のイベントがトリガーされます。
| 名前 | 説明 |
|---|---|
beforehide |
アイテムが非表示になる前に発生します。イベントでpreventDefault()を呼び出すことで非表示を防止できます。 |
hide |
アイテムが非表示になった後に発生します。 |
メソッド
コンポーネントには次のメソッドが利用可能です。
閉じる
UIkit.alert(element).close();アラートを閉じて削除します。