Alert
重要な情報、エラー、警告を強調表示します。
Alertは、エンドユーザーの注意を促し、重要な情報を画面に示す必要がある場合に使用します。
使用方法
プレースホルダにメッセージを追加し、ブロックのプロパティでアラートタイプを設定します。
- Alertパターンをプレビューにドラッグします。
- 必須のAlert値を設定します。
- 入力パラメータをデフォルト値に設定します。
- 表示するメッセージを入力します。
-
パブリッシュしてテストします。
デモ
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| AlertType | アラートのタイプを選択します。 | Alert Identifier | True | なし |
| ShowCloseButton | 区切り線の周囲のスペースを設定します。 | Boolean | False | False |
| ExtendedClass | このブロックにカスタムスタイルクラスを追加します。Text | False | なし |
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| .alert | .alert-error | 選択されたアラートタイプがErrorの場合 |
| .alert | .alert-info | 選択されたアラートタイプがInfoの場合 |
| .alert | .alert-success | 選択されたアラートタイプがSuccessの場合 |
| .alert | .alert-warning | 選択されたアラートタイプがWarningの場合 |
| .alert | .alert-close.is--hidden | ShowCloseButtonパラメータがFalseの場合 |
高度なユースケース
Alertパターンに開始アニメーションを追加する
- 「ShowAlert」という名前のBoolean型のローカル変数を作成し、デフォルト値を「False」に設定します。
- コンテナをプレビューにドラッグし、名前を付けます（例: AlertAnimation）。
-
コンテナのプロパティで、DisplayをTrueからShowAlertに変更します。
-
Animateパターンをコンテナにドラッグします。
-
EnterAnimationプロパティをEnterTopに変更します。
-
AlertパターンをAnimateプレースホルダにドラッグします。
- アラートタイプを設定します（必須値）。
-
表示するメッセージを入力します。
-
パブリッシュしてテストします。
