# Alerts

v-alert コンポーネントは、コンテキストタイプのアイコンと色を使用して重要な情報をユーザーに伝えるために使用されます。 デフォルトでは4つのバリエーションがあります: success, info, warning, error です。 デフォルトのアイコンは、それぞれのタイプが描かれているさまざまなアクションを表すヘルプが割り当てられます。 ボーダーアイコンなどのアラートの多くの部分も、ほぼすべての状況に合わせてカスタマイズすることができます。

# 使い方

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

# API

# サンプル

# Props

# ボーダー

border プロパティは、アラートの4辺の1つにシンプルなボーダーを追加します。 colordarktypeのようにpropsを組み合わせて、アラートにユニークなアクセントを与えることができます。

# 色付きボーダー

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

# Dense

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

# 閉じるボタン付き

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

# Icon

icon プロパティを設定すると、アラートコンポーネントの先頭にアイコンを追加できます。 type が指定された場合、規定のタイプアイコンが上書きされます。 さらに、 iconfalse に設定すると、アイコンが完全に削除されます。

# アウトライン

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

# Prominent

prominent プロパティは、高さを増やし、アイコンに光背を適用することで、はっきりとしたアラートを提供します。 prominentdense の両方を一緒に適用すると、通常のアラートの外観になりますが、prominentアイコン効果があります。

# Text

text prop は、指定された color の不透明度を下げた背景を適用するシンプルなバリエーションです。 他のスタイリングされたpropと同様に、textdense, prominent, outlinedなどの他のpropsと組み合わせて、ユニークでカスタマイズされたコンポーネントを作成することができます。

# トランジション

transition propは、コンポーネントが非表示になったときと表示されたとき、表示可能なアラートにトランジションを適用することができます。 詳細については、Vuetifyの内蔵トランジションをチェックするか、独自のトランジションを作成する方法を確認してください。

# Twitter

color, dismissible, border, elevation, icon, colored-border のpropsを組み合わせて使えば、このtwitter通知のようなスタイリッシュなカスタムアラートを作成することができます。

# Type

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

# アクセシビリティ

デフォルトでは、v-alertコンポーネントには、WAI-ARIAalertの役割が割り当てられ、重要でtime-sensitiveな情報を持つライブリージョンであることを示します。dismissibleプロップpropを使う場合、クローズアイコンは対応するaria-labelを受け取ります。 この値は、 close-label プロパティを変更するか、 国際化close プロパティのデフォルト値をカスタマイズすることで変更できます。

準備はできましたか?

チーム によって選択された関連コンテンツで学習を続けるか、下のナビゲーションリンクを使用してページ間を移動します。
GitHub でこのページを編集する
最終更新日:05/07/2021, 12:56:43 AM