Page cover

アラート

概要

Avonni Alert コンポーネントは、ウェブサイトの訪問者に重要なメッセージや通知を表示するためのものです。一般的には、エラー、警告、または成功した操作などの特定の状況を訪問者に知らせるために使用されます。利用者に重要な詳細や指示を伝えるための効果的な方法です。

設定

属性
説明

バリアント

「variant」属性は、伝えたいアラートの種類に合わせて Avonni Alert コンポーネントの外観をカスタマイズできるようにします。利用可能なバリアントには次のものがあります:

  • エラー:重大な通知や問題の場合。

  • base:標準的な汎用アラート。

  • オフライン:接続性や利用可能性に関する問題を示す場合。

  • 警告:注意が必要だが重大ではないアラートの場合。

伝えたいメッセージに合わせたバリアントを選択すると、ユーザーの理解がより明確になります。

コンテンツ

「content」属性は、Avonni Alert コンポーネントで伝えたい主要なメッセージや情報を指定します。アラート内に表示されるテキストコンテンツを保持し、ユーザーが特定の通知や状況に気づくようにします。

アイコン名

「icon name」属性は、Avonni Alert コンポーネントに特定のアイコンを設定できるようにします。アイコン名を指定することで、アラートの性質や文脈を視覚的に表現し、メッセージへの注目を高めます。

アイコンサイズ

Avonni Alert コンポーネントの「icon size」属性はアイコンのサイズを制御します:

  • Xxs:控えめな強調のための超超小サイズ。

  • Xs:最小限の目立ち度のための超小サイズ。

  • :適度な視認性のための控えめなサイズ。

  • :バランスの取れた視認性のための標準サイズ。

  • :最大の視覚的インパクトのためのサイズ

閉じられるかどうか

「Is Dismissible」属性は、ユーザーがインターフェース上で Avonni Alert を閉じたり破棄したりできるようにします。有効にすると、アラートに閉じるボタンが表示され、ユーザーが手動で削除できるようになります。

最終更新

役に立ちましたか?