Badge
Demos
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>
Numeric badge
The content can also be a number and can be can be displayed as “max+” when exceeding the maximum value.
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>
Corner badge
When no badge content is provided, the badge will be displayed in the upper right corner in a dot style.
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>
Dot badge
When 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' | The status type of the badge. The optional values for built-in styles are as follows. When using other values, you need to define the styles for
| ||||||||||||
value | string | number | - | The badge content value. When it is of type number, it is limited by the max prop. max is ignored when it is of type string. | ||||||||||||
max | number= | badge.max | The maximum value of the badge, when value exceeds this value, the badge content will be displayed as “max+”. Ignored when value is string. | ||||||||||||
boolean= | false | Whether the badge is hidden. |
Slots
| Name | Description |
|---|---|
default | The target content that the badge needs to display upon. |