跳转到内容

Badge 徽章

徽章组件会在其子项(们)的右上角生成一个小徽章。

简单的徽章

这个示例是个包含了文本的徽章,同时使用了主色和副色。 徽章会对其子元素生效。

4
Press Enter to start editing

自定义徽章

Use color prop to apply theme palette to component.

44
Press Enter to start editing

徽章组件的可见性

以下是自定义组件的一个示例。 You can learn more about this in the overrides documentation page.

Press Enter to start editing

徽章组件的可见性

徽章组件的隐显可以通过 invisible 属性来设置。

1

The badge hides automatically when badgeContent is zero. 您可以使用 showZero 属性覆盖它。

0
Press Enter to start editing

最大值

您可以使用 max 属性来限制徽章组件内容的最大值。

9999+999+
Press Enter to start editing

圆点徽章

dot 属性会使得徽章渲染为一个小点。 这样的话,可以在不给出具体计数的情况下,组件能够提示一下变化。

Press Enter to start editing

徽章组件的 overlap 属性

你可以使用 anchorOrigin 属性移把徽章组件移动到封装的元素的任何角落。

Press Enter to start editing

徽章组件的校准

你可以使用 anchorOrigin 属性移把徽章组件移动到封装的元素的任何角落。

Vertical
Horizontal
11299+999+
<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>

Accessibility

You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with aria-label:

Press Enter to start editing

Unstyled

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.