# Alerts

v-alert コンポーネントは、コンテキストの種類に応じたアイコンと色を使って重要な情報をユーザーに伝えます。 デフォルトでは successinfowarningerror の4つのバリエーションがあります。 各バリエーションには、それぞれで必要なアクションを表すデフォルトのアイコンが割り当てられています。 bordericoncolor など、アラートの多くの部分はあらゆる状況に合わせてカスタマイズできます。

# 使い方

最も単純な形式のアラートは、メッセージを表示するフラットな シート形式のアラートです。

# API

# サンプル

# Props

# ボーダー

border プロパティは、アラートの4辺のいずれかにシンプルなボーダーを追加します。 props は colordarktype などを組み合わせて個性的なアクセントを加えたアラートにすることができます。

# 色付きボーダー

color-border prop を指定すると、border プロパティを強調し、アラートの背景を取り除きます。 type が設定されている場合はデフォルトの色が使用されます。 color または type が設定されていない場合、現在のテーマの反転色がデフォルトで適用されます (Light時はblack、Dark時はwhite/gray)。

# Dense

dense プロパティを指定すると、アラートの高さが少し低くなり、シンプルでコンパクトなスタイルになります。 border プロパティと同時に利用した場合、コンパクトなスタイルと協調させるためボーダーの太さは細くなります。

# 閉じるボタン付き

dismissible prop を指定すると、アラートコンポーネントの端に「閉じる」ボタンが追加されます。 このボタンをクリックすると、valueがfalseに設定され、アラートが非表示になります。 v-model をバインディングし、true をセットすると、アラートを再度表示できます。 閉じるアイコンにはデフォルトで aria-label が適用されます。これを変更するには、close-label prop を指定するか、ロケールの close の値を変更します。 ロケール設定をグローバルに変更する方法について詳しくは、国際化ページを参照してください。

# Icon

icon propを設定すると、アラートコンポーネントの始点にアイコンを追加できます。 type を指定している場合、アイコンは規定の種類のアイコンで上書きされます。 また、 icon prop を false に設定すると、アイコンが削除されます。

# アウトライン

outlined prop を指定すると、アラートのスタイルが反転します。現在適用されている color はテキストとボーダーに継承されて適用され、背景は透明なります。

# Prominent

prominent prop を指定すると、アラートの高さを広げ、アイコンの背後にハイライトを追加してアラートを際立たせます。 prominentdense の両方を一緒に適用すると、通常のアラートの外観になりますが、prominentアイコン効果があります。

# Text

text prop は、color で指定された色の不透明度を下げたものを背景に適用する、シンプルなアラートのバリエーションを提供します。 他のスタイル用の prop と同様に、textdenseprominentoutlinedshaped などの他の prop と組み合わせて、個性的にカスタマイズされたコンポーネントを生み出すことができます。

# Shaped

shaped プロパティは、アラートの左上と右下に border-radius を追加します。 他のスタイル用の prop と同様に、shapeddenseprominentoutlinedtext などの他の prop と組み合わせて、個性的にカスタマイズされたコンポーネントを生み出すことができます。

# トランジション

transition prop では、アラートが非表示になるときと表示されるときに見えるトランジションを適用できます。 詳細については、Vuetify の内蔵トランジション、または独自のトランジションを作成する方法を確認してください。

# Twitter

colordismissibleborderelevationiconcolored-border の prop を組み合わせると、このtwitter通知のようなスタイリッシュなカスタムアラートを作成することができます。

# Type

type には v-alertsuccessinfowarningerror の4つのデフォルトのスタイルが用意されています。 これらのスタイルは、それぞれ異なるデフォルトのアイコンと色を提供します。 デフォルトの色は、Vuetifyのテーマをカスタマイズすることでグローバルに設定できます。

# アクセシビリティ

v-alert コンポーネントにはデフォルトで WAI-ARIAalert の役割が割り当てられます。これは、アラートが時間的な重要性を持つ、重要な情報が表示される領域であることを示します。dismissible prop を指定した場合、「閉じる」アイコンには対応する aria-label が適用されます。 この値は、close-label prop を変更するか、 国際化close プロパティのデフォルト値をカスタマイズすることで変更できます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:12/01/2021, 3:17:12 PM