mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [badge] enhancement (#10789)

Browse Source 
* docs(components): [badge] enhancement

* Update badge docs per new syntax.
* Reorganize code per readability wise purpose.

* chore: remove component name prefix

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
This commit is contained in:
Jeremy 2022-11-27 22:35:13 +08:00 committed by GitHub
parent 4cb900bfc8
commit f17c8f3a2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@ A number or status mark on buttons and icons.
Displays the amount of new messages.
:::demo The amount is defined with `value` which accepts `Number` or `String`.
:::demo The amount is defined with value which accepts Number or String.
badge/basic
@ -21,7 +21,7 @@ badge/basic
You can customize the max value.
:::demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
:::demo The max value is defined by property max which is a Number. Note that it only works when value is also a Number.
badge/max
@ -31,7 +31,7 @@ badge/max
Displays text content other than numbers.
:::demo When `value` is a `String`, it can display customized text.
:::demo When value is a String, it can display customized text.
badge/customize
@ -41,26 +41,26 @@ badge/customize
Use a red dot to mark content that needs to be noticed.
:::demo Use the attribute `is-dot`. It is a `Boolean`.
:::demo Use the attribute `is-dot`. It is a Boolean.
badge/dot
:::
## Badge API
## API
### Badge Attributes
### 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. | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'danger'` |
| 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 |
### Badge Slots
### Slots
| Name | Description |
| --------- | ------------------------- |
| `default` | customize default content |
| Name | Description |
| ------- | ------------------------- |
| default | customize default content |

1
packages/components/badge/index.ts
View File

@ -6,3 +6,4 @@ export const ElBadge = withInstall(Badge)
export default ElBadge
export * from './src/badge'
export type { BadgeInstance } from './src/instance'

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

@ -1,18 +1,32 @@
import { buildProps } from '@element-plus/utils'
import type { ExtractPropTypes } from 'vue'
import type Badge from './badge.vue'
export const badgeProps = buildProps({
/**
* @description display value.
*/
value: {
type: [String, Number],
default: '',
},
/**
* @description maximum value, shows `{max}+` when exceeded. Only works if value is a number.
*/
max: {
type: Number,
default: 99,
},
/**
* @description if a little dot is displayed.
*/
isDot: Boolean,
/**
* @description hidden badge.
*/
hidden: Boolean,
/**
* @description badge type.
*/
type: {
type: String,
values: ['primary', 'success', 'warning', 'info', 'danger'],
@ -20,5 +34,3 @@ export const badgeProps = buildProps({
},
} as const)
export type BadgeProps = ExtractPropTypes<typeof badgeProps>
export type BadgeInstance = InstanceType<typeof Badge>

3
packages/components/badge/src/instance.ts Normal file
View File

@ -0,0 +1,3 @@
import type Badge from './badge.vue'
export type BadgeInstance = InstanceType<typeof Badge>