Badge 徽章

徽章会在其子项的右上角生成一个小徽章。

Basic badges

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

444

<Badge badgeContent={4} color="primary">
  <MailIcon />
</Badge>
<Badge badgeContent={4} color="secondary">
  <MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
  <MailIcon />
</Badge>

自定义徽章

以下是自定义组件的一个示例。您可以在重写文档页面中了解更多有关此内容的信息。

<IconButton aria-label="cart">
  <StyledBadge badgeContent={4} color="secondary">
    <ShoppingCartIcon />
  </StyledBadge>
</IconButton>

徽章组件的可见性

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

Show Badge

当 badgeContent 为零时，徽章组件将会自动隐藏。您可以使用 showZero 属性覆盖它。

<Badge color="secondary" badgeContent={0}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
  <MailIcon />
</Badge>

Maximum value

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

9999+999+

<Badge badgeContent={99} {...defaultProps} />
<Badge badgeContent={100} {...defaultProps} />
<Badge badgeContent={1000} max={999} {...defaultProps} />

Dot badge

dot 属性会使得徽章渲染为一个小点。这样的组件可以作为一个提示的工具，来说明有些值已经改变，但是不需要计数。

Typography

<Badge color="secondary" variant="dot">
  <MailIcon />
</Badge>
<Badge color="secondary" variant="dot">
  <Typography>Typography</Typography>
</Badge>

徽章组件的覆盖

您可以使用 overlap 这个属性，在封装的元素相对的一角来显示徽章组件。

<Badge color="secondary" badgeContent=" ">
  {rectangle}
</Badge>
<Badge color="secondary" badgeContent=" " variant="dot">
  {rectangle}
</Badge>
<Badge color="secondary" overlap="circle" badgeContent=" ">
  {circle}
</Badge>
<Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
  {circle}
</Badge>

徽章组件的校准

You can use the anchorOrigin prop to move the badge to any corner of the wrapped element.

Vertical

Top

Bottom

Horizontal

Right

Left

11299+999+


<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>

API

<Badge />