mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity
e142e2436d
ant-design/components/badge/index.zh-CN.md
MadCcc 40e77c40d3
docs: overview dark cover (#40666) 
* docs: add dark overview

* docs: show dark cover in dark theme

* docs: update cover
2023-02-09 22:17:31 +08:00

2.6 KiB
Raw Blame History

category subtitle title cover coverDark demo group
Components 徽标数 Badge https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original
cols
2
数据展示

图标右上角的圆形徽标数字。

何时使用

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

代码演示

基本 独立使用 封顶数字 讨嫌的小红点 动态 可点击 自定义位置偏移 大小 状态点 多彩徽标 缎带 Ribbon Debug 各种混用的情况 自定义标题 多彩徽标支持 count 显示 Debug

API

Badge

参数 说明 类型 默认值 版本
color 自定义小圆点的颜色 string -
count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏 ReactNode -
dot 不展示数字，只有一个小红点 boolean false
offset 设置状态点的位置偏移 [number, number] -
overflowCount 展示封顶的数字值 number 99
showZero 当数值为 0 时，是否展示 Badge boolean false
size 在设置了 count 的前提下有效，设置小圆点的大小 default | small - 4.6.0
status 设置 Badge 为状态点 success | processing | default | error | warning -
text 在设置了 status 的前提下有效，设置状态点的文本 ReactNode -
title 设置鼠标放在状态点上时显示的文字 string -

Badge.Ribbon (4.5.0+)

参数 说明 类型 默认值 版本
color 自定义缎带的颜色 string -
placement 缎带的位置，start 和 end 随文字方向（RTL 或 LTR）变动 start | end end
text 缎带中填入的内容 ReactNode -