Skip to main content

 

パターン

 

 

OutSystems

Alert

重要な情報、エラー、警告を強調表示します。

Alertは、エンドユーザーの注意を促し、重要な情報を画面に示す必要がある場合に使用します。

使用方法

プレースホルダにメッセージを追加し、ブロックのプロパティでアラートタイプを設定します。

  1. Alertパターンをプレビューにドラッグします。
  2. 必須のAlert値を設定します。
  3. 入力パラメータをデフォルト値に設定します。
  4. 表示するメッセージを入力します。
  5. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
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パターンに開始アニメーションを追加する

  1. 「ShowAlert」という名前のBoolean型のローカル変数を作成し、デフォルト値を「False」に設定します。
  2. コンテナをプレビューにドラッグし、名前を付けます(例: AlertAnimation)。
  3. コンテナのプロパティで、DisplayをTrueからShowAlertに変更します。

  4. Animateパターンをコンテナにドラッグします。

  5. EnterAnimationプロパティをEnterTopに変更します。

  6. AlertパターンをAnimateプレースホルダにドラッグします。

  7. アラートタイプを設定します(必須値)。
  8. 表示するメッセージを入力します。

  9. パブリッシュしてテストします。

  • Was this article helpful?