Badge

代码演示

如何引入

import { Badge } from '@chenzy-design/svelte';

基本用法

Badge 的基本类型为 count。如果传入 dot 则显示为小圆点，两者互斥，优先渲染小圆点。当传入是节点类型（snippet）时，将直接渲染该节点。

设置显示数字最大值

可以通过设置 overflowCount 值设置显示数字的最大值，当实际数值超过该值时将以 ${overflowCount}+ 的格式显示。

设置徽标位置

可以通过设置 position 设置位置，支持：leftTop， leftBottom， rightTop（默认）， rightBottom。

设置徽标样式

可以通过设置 theme 和 type 设置徽标的样式。其中 theme 支持三种形式：solid, light, inverted。默认形式为 solid。

type 支持如下类型：primary，secondary，tertiary，warning 和 danger。默认类型为 primary。

独立使用

当 Badge 作为独立元素时可以单独使用。

API参考

属性	说明	类型	默认值
children	徽章的 base	Snippet	无
class	外侧 class	string	-
count	展示的内容	number | string | Snippet	无
countClass	内容区域 class	string	无
countStyle	徽章内容的样式	string	无
dot	不展示数字，显示小圆点	boolean	false
overflowCount	最大的展示数字值	number	无
position	徽章位置，可选 leftTop、 leftBottom、 rightTop、 rightBottom	string	rightTop
style	徽章内容区域内联样式（优先于 countStyle）	string	无
theme	徽章主题，可选 solid、 light、 inverted	string	solid
type	徽章类型，可选 primary、 secondary、 tertiary、 danger、 warning、 success	string	primary
onClick	点击事件	(e: MouseEvent) => void	无
onMouseEnter	鼠标移入事件	(e: MouseEvent) => void	无
onMouseLeave	鼠标移出事件	(e: MouseEvent) => void	无

Accessibility

• Badge 本身为非交互纯展示元素，不需要 tabindex，不进入 Tab 序列。
• 数字/字符串徽标以文本形式渲染，可被屏幕阅读器读出；宿主元素可通过 aria-describedby 关联徽标内容。
• 纯红点（dot）无数值语义，其含义应由宿主元素的文案承载；独立使用时建议在相邻文字中给出状态说明。
• 不以颜色为唯一信息通道，需同时通过文案或图标区分语义。

文案规范

• Badge内容若为英文时，首字母应大写

设计变量

color

height

other

radius

spacing

width

变量	默认值	用法
--cd-color-badge-danger-inverted-text-default	var(--cd-color-danger)	文字颜色 - 白底
--cd-color-badge-danger-light-bg-default	var(--cd-color-danger-light-default)	背景颜色 - 浅版危险
--cd-color-badge-danger-light-text-default	var(--cd-color-danger)	文字颜色 - 浅版危险
--cd-color-badge-danger-solid-bg-default	var(--cd-color-danger)	背景颜色 - 危险
--cd-color-badge-default-bg-default	var(--cd-color-bg-1)	背景颜色 - 默认
--cd-color-badge-default-border-default	var(--cd-color-bg-1)	描边颜色 - 默认
--cd-color-badge-default-light-bg-default	var(--cd-color-bg-2)	背景颜色 - 浅版
--cd-color-badge-default-text-default	var(--cd-color-bg-2)	文字颜色 - 默认
--cd-color-badge-primary-inverted-text-default	var(--cd-color-primary)	文字颜色 - 白底
--cd-color-badge-primary-light-bg-default	var(--cd-color-primary-light-default)	背景颜色 - 浅版主色

显示第 1 条-第 10 条，共 28 条

• 1
• 2
• 3