Alert
v-alert コンポーネントは重要な情報をユーザーに伝える際に使用します。 success、info、warning そして error の4つのバリエーションを備えています。 これらにはそれぞれ異なるアクションを表すデフォルトのアイコンが設定されており、必要に応じて変更が可能です。
API
Name
color
Default
undefined
Type
string
コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(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
success、info、warning もしくは error のアラートであることを設定します。コンテキストカラーと予め設定されたアイコンが使用されます。
Name
value
Default
undefined
Type
any
Components.Alerts.
Examples
閉じるボタン付きアラート
v-model を使うことで、アラートの状態をコントロールすることができます。 v-model を使用せず、アラートを表示したいだけであれば、シンプルに value を使用することができます。
カスタムアイコン / アイコンの削除
カスタムアイコンの設定や削除は簡単に行うことができます。
トランジション設定
Alert の表示/非表示の際にカスタムトランジションを適用することができます。
アウトライン
アウトラインアラートは、適用されている色から引き継いだ色の境界線を表示します。