Badge

v-badge コンポーネントは、あらゆる種類のコンテンツをラップして、ユーザに情報をハイライトしたり、指定の要素に対して注意を引いたりすることができます。

Usage

Any element can be used with a badge.

API

v-badge
Name
bottom
Default
false
Type
boolean

Align the component towards the bottom

Name
color
Default
'primary'
Type
string

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

Name
left
Default
false
Type
boolean

Align the component towards the left

Name
mode
Default
undefined
Type
string

Components.Badges.

Name
origin
Default
undefined
Type
string

Components.Badges.

Name
overlap
Default
false
Type
boolean

Components.Badges.

Name
transition
Default
'fab-transition'
Type
string

Sets the component transition. Can be one of the built in transitions or your own.

Name
value
Default
true
Type
any

Components.Badges.

Examples

重ね合わせ

overlap を使用すると、自身の内容に重なるように配置されます。

インライン

Badge はテキスト内部に配置することができます。

アイコン

現在サポートされているアイコンセットのすべてを使用することができます。

表示

Badge の表示は v-model を介して制御することができます。

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