Badge
Demo
Text badge
Badge content can be text.
New
New
New
New
New
Use the type prop to apply different contextual styles.
<template>
<article>
<veui-badge
value="New"
type="success"
>
<veui-button>View</veui-button>
</veui-badge>
<veui-badge
value="New"
type="info"
>
<veui-button>View</veui-button>
</veui-badge>
<veui-badge value="New">
<veui-button>View</veui-button>
</veui-badge>
<veui-badge
value="New"
type="warning"
>
<veui-button>View</veui-button>
</veui-badge>
<veui-badge
value="New"
type="aux"
>
<veui-button>View</veui-button>
</veui-badge>
</article>
</template>
<script>
import { Badge, Button } from 'veui'
export default {
components: {
'veui-badge': Badge,
'veui-button': Button
}
}
</script>
<style lang="less" scoped>
.veui-badge {
& + & {
margin-left: 2em;
}
}
</style>
Digital badge
Badge content can be number, When the maximum value is exceeded, it can be displayed as Maximum+.
96
Use the max prop to specify the max value can be displayed. Displays “max+” when value is larger than max.
<template>
<article>
<veui-badge
:value="count"
:max="100"
>
<veui-button
ui="primary"
@click="inc"
>
Add
</veui-button>
</veui-badge>
<veui-button
ui="s"
@click="reset"
>
Reset
</veui-button>
</article>
</template>
<script>
import { Badge, Button } from 'veui'
const initial = 96
export default {
components: {
'veui-badge': Badge,
'veui-button': Button
},
data () {
return {
count: initial
}
},
methods: {
inc () {
this.count++
},
reset () {
this.count = initial
}
}
}
</script>
<style lang="less" scoped>
.veui-badge {
margin-right: 2em;
}
</style>
Round Dots badge
No badge content is provided, The badge will be displayed in a dot style in the upper right corner.
Running
New
Rejected
Auditing
Expired
<template>
<article>
<section>
<veui-badge type="success">
Running
</veui-badge>
<veui-badge type="info">
New
</veui-badge>
<veui-badge>
Rejected
</veui-badge>
<veui-badge type="warning">
Auditing
</veui-badge>
<veui-badge type="aux">
Expired
</veui-badge>
</section>
</article>
</template>
<script>
import { Badge } from 'veui'
export default {
components: {
'veui-badge': Badge
}
}
</script>
<style lang="less" scoped>
section {
margin-bottom: 1em;
}
.veui-badge {
& + & {
margin-left: 30px;
}
}
</style>
No slot content is provided, the badge will be displayed in a dot style.
Running
New
Rejected
Auditing
Expired
<template>
<article>
<section>
<veui-badge
value="Running"
type="success"
/>
<veui-badge
value="New"
type="info"
/>
<veui-badge value="Rejected"/>
<veui-badge
value="Auditing"
type="warning"
/>
<veui-badge
value="Expired"
type="aux"
/>
</section>
</article>
</template>
<script>
import { Badge } from 'veui'
export default {
components: {
'veui-badge': Badge
}
}
</script>
<style lang="less" scoped>
section {
margin-bottom: 1em;
}
.veui-badge {
& + & {
margin-left: 30px;
}
}
</style>
API
Props
| Name | Type | Default | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | string= | 'error' | Badge state type. The optional values for the built-in style are as follows. When using other values, you need to define the style of
| ||||||||||||
value | string | number | - | Badge content value. When it is a value of type number, it is limited by the max attribute. max is ignored when it is of type string. | ||||||||||||
max | number= | badge.max | The maximum value of the badge value, when value exceeds this value, the badge content will be displayed as {max}+. Ignored when value is string. | ||||||||||||
boolean= | false | Whether hidden state. |
Slots
| Name | Description |
|---|---|
default | The target content that the badge needs to display. |