The v-badge component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to just draw attention to a specific element. Content within the badge usually contains numbers or icons.

使い方

Badges in their simplest form display to the upper right of the content that it wraps and requires the badge slot.

API

サンプル

Bottom

The bottom prop will place the badge as a subscript to the wrapped content. Can be used with left prop to achieve a bottom left position.

Left

The left prop will place the badge to the left of the wrapped content. Can be used with bottom prop to achieve a bottom left position.

重ね合わせ

The overlap prop will cause the badge to overlap its content.

アイコン

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

インライン

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

表示

v-badge's visibility can be controlled by binding v-model and setting it to true or false programmatically.

Show-on-hover

You can do many things with visibility control, for example, show badge on hover.

Dynamic notifications

You can incorporate badges with dynamic content to make things such as a notification system.

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise