Badge-DEMO
vue
<fv-Badge :modelValue="3">
<fv-button>Badge</fv-button>
</fv-Badge>Badge Different Type
Success
vue
<fv-Badge :modelValue="12" type="success">
<fv-button>Badge</fv-button>
</fv-Badge>Warning
vue
<fv-Badge :modelValue="2" type="warning">
<fv-button>Badge</fv-button>
</fv-Badge>Primary
vue
<fv-Badge :modelValue="9" type="primary">
<fv-button>Badge</fv-button>
</fv-Badge>Badge Customize Content
vue
<fv-Badge value="You">
<fv-button>Badge</fv-button>
</fv-Badge>Badge Max Value
vue
<fv-Badge modelValue="100" max="99">
<fv-button>Badge</fv-button>
</fv-Badge>Badge Dot
vue
<fv-Badge :isDot="true">
<fv-button>Badge</fv-button>
</fv-Badge>Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| modelValue | string | No | '' | |
| max | any | No | Infinity | |
| isDot | boolean | No | false | |
| hidden | boolean | No | false | |
| type | string | No | 'default' | See the Badge type option. |
| theme | string | No | 'global' | See the Badge theme option. |
| disabled | boolean | No | false | See the Badge disabled option. |
| lang | string | No | "global" | See the Badge lang option. |
Slots
- Default
javascript
<fv-badge>
<div></div>
</fv-badge>