Alert

v-alert コンポーネントは重要な情報をユーザーに伝える際に使用します。 successinfowarning そして error の4つのバリエーションを備えています。 これらにはそれぞれ異なるアクションを表すデフォルトのアイコンが設定されており、必要に応じて変更が可能です。

Usage

Alerts can have a contextual color and are hidden by default.

API

v-alert
Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(255, 0, 0, 0.5))を設定できます。

Name
dismissible
Default
false
Type
boolean

アラートを閉じることができるかどうかを設定します。

Name
icon
Default
undefined
Type
string

アイコンを指定します。

Name
mode
Default
undefined
Type
string

Components.Alerts.

Name
origin
Default
undefined
Type
string

Components.Alerts.

Name
outline
Default
false
Type
boolean

境界線を持つアラートを表示します。

Name
transition
Default
undefined
Type
string

Components.Alerts.

Name
type
Default
undefined
Type
string

successinfowarning もしくは error のアラートであることを設定します。コンテキストカラーと予め設定されたアイコンが使用されます。

Name
value
Default
undefined
Type
any

Components.Alerts.

Examples

閉じるボタン付きアラート

v-model を使うことで、アラートの状態をコントロールすることができます。 v-model を使用せず、アラートを表示したいだけであれば、シンプルに value を使用することができます。

カスタムアイコン / アイコンの削除

カスタムアイコンの設定や削除は簡単に行うことができます。

トランジション設定

Alert の表示/非表示の際にカスタムトランジションを適用することができます。

アウトライン

アウトラインアラートは、適用されている色から引き継いだ色の境界線を表示します。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore