AX - アラート

バリアント

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

• エラー：重大な通知や問題向け。

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

• オフライン：接続性や利用可否に関する懸念を示します。

• 警告：注意が必要だが致命的ではないアラート向け。

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

コンテンツ

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

アイコン名

「icon name」属性では、Avonni Alert コンポーネントに特定のアイコンを設定できます。アイコン名を指定することで、アラートの性質や文脈を視覚的に表現し、メッセージにユーザの注意を即座に引き付けることができます。

アイコンサイズ

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

• Xxs：控えめな強調のための特に小さいサイズ。

• Xs：最小限の目立ち具合のための小さいサイズ。

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

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

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

閉じられるかどうか

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

間隔

Avonni Alert コンポーネントの間隔スタイリング設定では、マージンの調整が可能です：

• ブロック開始：上マージンを設定します。

• ブロック終了：下マージンを調整します。

• インライン開始：左マージンを構成します。

• インライン終了：右マージンを変更します

背景

Avonni Alert コンポーネントの背景スタイリング設定は、背景のカスタマイズを提供します：

• カラー：背景に単色を選択します。

• 線形グラデーション：動的で視覚的に魅力的なグラデーション効果を選択します

テキスト

Avonni Alert コンポーネントのテキストスタイリング設定では、テキストのカスタマイズが可能です：

• カラー：視認性向上のためにテキストの色を変更します。

• フォントの太さ：強調のためにフォントのウェイトを選択します。

• 水平揃え：アラート内で最適な表示となるようにテキストの揃えを選択します

ボーダー

Avonni Alert コンポーネントのボーダースタイリング設定では、境界線の外観をカスタマイズするオプションを提供します：

• カラー：境界線の縁の色を選択します。

• サイズ：境界線の太さを選択します。

• スタイル：さまざまなスタイルで全体の外観と雰囲気を決定します

アイコン

Avonni Alert コンポーネントのアイコンスタイリング設定では、アイコンの外観に関するさまざまなカスタマイズが可能です：

• 背景色：アイコンの背後の背景色を変更します。

• 前景色：アイコンのメインカラーを変更します。

• 前景の閉じるアイコン：アラートを閉じるためのアイコンの色を指定します。

• 前景色ユーティリティ：視認性とコントラストを向上させるためにさらに色調整を行います