v-alert コンポーネントはコンテキストタイプのアイコンと色を使い重要な情報をユーザーに伝える際に使用します。 success、info、warning そして error の4つのバリエーションを備えています。 これらにはそれぞれ異なるアクションを表すデフォルトのアイコンが設定されており、必要に応じて変更が可能です。border, icon, color 等多くのパーツが状況に合わせてカスタマイズできます。
以下に、簡単な例から複雑な例まで示します。
type propは、4つのデフォルトのv-alert スタイルを提供します: success, info, warning, error。これらの各スタイルは、既定のアイコンと色を提供します。デフォルトの色はVuetifyのテーマ をカスタマイズすることでグローバルに設定することができます。
border propを設定すると、アラートの4つの側面の1つにシンプルなボーダーを追加することができます。 color、dark、type などのpropsと組み合わせて、アラートに独特なアクセントを与えることができます。
colored-border propは、border propを強調するためにアラートの背景を取り除きます。もし type が設定されていた場合、typeのデフォルト色が適用されます。 color または type が設定されていない場合、色はデフォルトで適用されたテーマの反転色になります。(lightの場合はblack、darkの場合はwhite/grayです)
dense propは、アラートの高さを減らしシンプルでコンパクトなスタイルのアラートを作成します。 border propと同時に利用した場合、コンパクトなスタイルと協調させるためボーダーの太さは細くなります。
dismissible propは、アラートコンポーネントの端に閉じるボタンを追加します。 このボタンをクリックすると、valueがfalseに設定され、アラートが非表示になります。 v-model をバインドしtrueに設定することにより、アラートを再度表示させることができます。 閉じるアイコンには自動的に aria-labelが適用されます。これは、close-label propで変更するか、ロケールの close の値を変更することで、値を変更することができます。 ロケール設定をグローバルに変更する方法の詳細については、 Internationalization page を参照してください。
icon propを使用すると、アラートコンポーネントの先頭にアイコンを追加できます。type が指定されている場合、既定のタイプアイコンが上書きされます。さらに、icon propを false に設定すると、アイコンが完全に削除されます。
outlined propはアラートのスタイルを反転し、現在適用されているcolorを継承してテキストと境界に適用し、背景を透明にします。
prominent propは高さを増やし、アイコンに光背を適用することで、はっきりとしたアラートを提供します。prominentとdenseの両方を一緒に適用すると、アラートは通常のアラートの外観を引き受けますが、prominentアイコンの効果が表示されます。
text propは、提供されたcolorの不透明度の背景を減らした単純なアラートバリアントです。他のスタイルのpropと同様に、textはdense、prominent、outlinedなどの他のpropと組み合わせて、独自のカスタマイズされたコンポーネントを作成できます。
transition propを使用すると、コンポーネントを非表示および表示したときのトランジションをアラートに適用できます。詳細については、Vuetify's prebuilt transitions のいずれかをチェックアウトするか、独自作成 の方法を確認できます。
color、dismissible、 border、 elevation、icon、colored-border propを組み合わせることで、このtwitter通知のようなスタイリッシュなカスタムアラートを作成することができます。
デフォルトでは、v-alertコンポーネントには WAI-ARIA の alert の役割が割り当てられます。dismissible prop を使用している場合、クローズアイコンには対応する aria-label が表示されます。この値は close-label prop を変更するか、Internationalization の close プロパティのデフォルト値をカスタマイズすることでグローバルに変更することができます。