最新
徽章Status Badge Set
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
#badge#status#dot
5 个框架初级
Loading…
A count badge that caps at "99+", hides at zero, and tells screen readers what it is counting.
<!--
The cap ("99+") is a layout decision wearing a content hat: an uncapped
counter grows one character per order of magnitude and eventually pushes
its host off-grid. The sr-only suffix is the other half of the component -
a bare "99+" announced out of context is a number, not a message.
-->
<span class="badge-counter">
99+
<span class="badge-counter__sr">unread notifications</span>
</span>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
count必填 | number | - | 徽标中显示的数字；超过 99 会折叠显示为“99+”。 |
max | number | 99 | Max |
srLabel | string | - | Sr label |
className | string | - | 合并到根元素上的额外类名。 |
Three decisions do the work. The cap: `count > max` renders `"99+"` because an uncapped counter grows a character per order of magnitude until it pushes its host off-grid - `max` is a layout guarantee wearing a content hat. The zero: `count <= 0` returns `null`, since an empty red circle is a false alarm and "0" is a fact nobody pinned a badge for. The noun: `srLabel` appends sr-only text so a screen reader hears "99+ unread notifications" instead of a naked number. The `min-w` + padding combination (never a fixed width) is what lets one digit render a circle while "99+" stretches into a pill.