mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
c279a4b112
* feat(badge): Support better customization with semantic classNames/styles as function * update demo and snap * update docs * feat(badge): Support better customization with semantic classNames/styles as function * update demo and snap * update docs * chore: update demo and snap * chore: update demo * chore: update demo --------- Co-authored-by: thinkasany <480968828@qq.com>
3.9 KiB
3.9 KiB
category, title, description, cover, coverDark, demo, group
| category | title | description | cover | coverDark | demo | group | ||
|---|---|---|---|---|---|---|---|---|
| Components | Badge | Small numerical value or status descriptor for UI elements. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original |
|
Data Display |
When To Use
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
Examples
Basic
Standalone
Overflow Count
Red badge
Dynamic
Clickable
Offset
Size
Status
Colorful Badge
Ribbon
Custom semantic dom styling
Ribbon Debug
Mixed usage
Title
Colorful Badge support count Debug
Component Token
API
Common props ref：Common props
Badge
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| color | Customize Badge dot color | string | - | |
| count | Number to show in badge | ReactNode | - | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| dot | Whether to display a red dot instead of count |
boolean | false | |
| offset | Set offset of the badge dot | [number, number] | - | |
| overflowCount | Max count to show | number | 99 | |
| showZero | Whether to show badge when count is zero |
boolean | false | |
| size | If count is set, size sets the size of badge |
default | small |
- | - |
| status | Set Badge as a status dot | success | processing | default | error | warning |
- | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| text | If status is set, text sets the display text of the status dot |
ReactNode | - | |
| title | Text to show when hovering over the badge | string | - |
Badge.Ribbon
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| color | Customize Ribbon color | string | - | |
| placement | The placement of the Ribbon, start and end follow text direction (RTL or LTR) |
start | end |
end |
|
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| text | Content inside the Ribbon | ReactNode | - |