javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [badge] add color prop (#16069)

Browse Source 
* feat: 🎸 [badge] add color prop

add color prop to set badge background color

* Update badge.md

* 更新文档

* docs: ✏️ [badge] add color prop

* Update docs/en-US/component/badge.md

---------

Co-authored-by: btea <2356281422@qq.com>
This commit is contained in:
bhwa23
2024-03-29 15:11:03 +08:00
committed by GitHub
parent 1ec6fe5830
commit b3c423ff11
4 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/en-US/component/badge.md
View File

@@ -51,14 +51,15 @@ badge/dot
### Attributes
| Name | Description | Type | Default |
| ------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
| value | display value. | ^[string] / ^[number] | '' |
| max | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number] | 99 |
| is-dot | if a little dot is displayed. | ^[boolean] | false |
| hidden | hidden badge. | ^[boolean] | false |
| type | badge type. | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
| show-zero ^(2.6.0) | Whether to show badge when value is zero. | ^[boolean] | true |
| Name | Description | Type | Default |
| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------- |
| value | display value. | ^[string] / ^[number] | '' |
| max | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number] | 99 |
| is-dot | if a little dot is displayed. | ^[boolean] | false |
| hidden | hidden badge. | ^[boolean] | false |
| type | badge type. | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
| show-zero ^(2.6.0) | Whether to show badge when value is zero. | ^[boolean] | true |
| color ^(2.6.3) | background color of the dot | ^[string] | |
### Slots

6
docs/examples/badge/basic.vue
View File

@@ -11,7 +11,9 @@
<el-badge :value="2" class="item" type="warning">
<el-button>replies</el-button>
</el-badge>
<el-badge :value="1" class="item" color="green">
<el-button>custom background</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Click Me
@@ -39,7 +41,7 @@ import { CaretBottom } from '@element-plus/icons-vue'
<style scoped>
.item {
margin-top: 10px;
margin-right: 40px;
margin-right: 30px;
}
.el-dropdown {

4
packages/components/badge/src/badge.ts
View File

@@ -39,5 +39,9 @@ export const badgeProps = buildProps({
type: Boolean,
default: true,
},
/**
* @description background color of the Badge
*/
color: String,
} as const)
export type BadgeProps = ExtractPropTypes<typeof badgeProps>

1
packages/components/badge/src/badge.vue
View File

@@ -10,6 +10,7 @@
ns.is('fixed', !!$slots.default),
ns.is('dot', isDot),
]"
:style="{ backgroundColor: color }"
v-text="content"
/>
</transition>