ショップ

企業向け

v-alert コンポーネントはコンテキストタイプのアイコンと色を使い重要な情報をユーザーに伝える際に使用します。 successinfowarning そして error の4つのバリエーションを備えています。 これらにはそれぞれ異なるアクションを表すデフォルトのアイコンが設定されており、必要に応じて変更が可能です。border, icon, color 等多くのパーツが状況に合わせてカスタマイズできます。

最も単純な形式のアラートは、flatな sheets of paper で表示するメッセージです。

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

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は高さを増やし、アイコンに光背を適用することで、はっきりとしたアラートを提供します。prominentdenseの両方を一緒に適用すると、アラートは通常のアラートの外観を引き受けますが、prominentアイコンの効果が表示されます。

text propは、提供されたcolorの不透明度の背景を減らした単純なアラートバリアントです。他のスタイルのpropと同様に、textdenseprominentoutlinedなどの他のpropと組み合わせて、独自のカスタマイズされたコンポーネントを作成できます。

transition propを使用すると、コンポーネントを非表示および表示したときのトランジションをアラートに適用できます。詳細については、Vuetify's prebuilt transitions のいずれかをチェックアウトするか、独自作成 の方法を確認できます。

By combining color, dismissible, border, elevation, icon, and colored-border props you can create stylish custom alerts such as this twitter notification.

By default, v-alert components are assigned the WAI-ARIA role of alert which denotes that the alert "is a live region with important and usually time-sensitive, information." When using the dismissible prop the close icon will recieve a corresponding aria-label. This value can be modified by changing either the close-label prop or globally through customizing the Internationalization's default value for the close property.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!