アラート

アラートコンポーネントは、重要なメッセージをユーザーに表示するシンプルな方法です。注目が必要な項目を強調する通知のような役割を果たします。

アラートの設定

「バリアント」プロパティは、アラートの全体的な外観と意図するメッセージを決定します。表示したい通知の種類に最も適したバリアントを選択してください：

ベース： 一般的な情報、更新、または重大でない通知のための中立的なスタイル。一般的な文脈やフィードバックを提供するのに適しています。
警告： ユーザーの注意を引くためのより目立つスタイル。重要なシステムメッセージ、注意喚起、または直ちに行動を要しないがユーザーの注意が必要な状況に使用してください。
エラー： ユーザーの即時の注意と対応を必要とする重大な問題やエラーを示す重要なスタイル。
オフライン： インターネット接続が失われたことをユーザーに通知するための特定のスタイル

アラートにアイコンを追加すると、メッセージを視覚的に強調し、より目立たせることができます。

追加方法： コンポーネントのプロパティパネルのオプションからアイコンを選択します。
アイコンの選択： アイコンの選択肢は選んだバリアントに応じて変わります（例：警告バリアントには警告アイコンが適しています）。アラートのメッセージに関連するアイコンを選んでください。

「テクスチャ」オプションは、アラートの背景に微細なテクスチャを追加します。

目的： これはソリッドな背景と比べて、より柔らかく視覚的に特徴的な外観を作り出すことができます。
使用タイミング： アラートをページ上の他の要素と区別したり、視覚的なアクセントを加えたりするために、テクスチャ付きの背景を使用することを検討してください

「Dismissible（閉じられる）」オプションを有効にして、ユーザーがアラートを閉じられるようにします。

仕組み： アラートにクローズボタン（「X」）が表示され、ユーザーは画面からアラートを消すことができます。
使用タイミング： 通常、特に重要度の低い通知では、ユーザーが自分の操作を制御でき、メッセージを確認したらアラートを閉じられるようにするために、アラートを閉じられるようにするのが良い慣行です。

さらに細かい制御が必要ですか？「スタイル」タブに移動して、デフォルトのバリアントスタイルを上書きしながらアラートの外観を微調整できます。色、フォント、間隔などを調整できます。

以下の例は、Alertコンポーネントで利用可能な機能のいくつかを示しています。

「スタイル」タブでは、アラートの外観を細かく制御できます。スタイリングオプションの内訳は以下の通りです：

以下を制御します外側アラートコンポーネントの周囲の間隔で、アラートとページ上の他の要素との間にスペースを作ります。

最終更新 7 か月前

役に立ちましたか？