Badge

Значок генерирует маленький значок в правом верхнем углу своего дочернего(их) элемента(ов).

Простые значки

Примеры значков, содержащих текст, с использованием первичных и вторичных цветов. Знак применяется к своим детям.

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

Настраиваемые значки

Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.

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

Видимость значка

Видимость значков можно контролировать с помощью свойства invisible.

Значок автоматически скрывается, когда свойство badgeContent равно нулю. Вы можете переопределить это с помощью пропа showZero.

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

Максимальное значение

Вы можете использовать проп max, чтобы ограничить значение значка.

<Badge color="secondary" badgeContent={99}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={100}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={1000} max={999}>
  <MailIcon />
</Badge>

Значок-точка

Проп dot превращает значок в маленькую точку. Это можно использовать как уведомление о том, что что-то изменилось без количества.

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

Наложение значка

Вы можете использовать проп overlap для размещения значка относительно краев элемента.

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

Выравнивание значка

Вы можете использовать проп anchorOrigin для перемещения значка в любой угол элемента.

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

Unstyled

The badge also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.

import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';

<StyledBadge badgeContent={5} overlap="circular">
  <BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot" overlap="circular">
  <BadgeContent />
</StyledBadge>

Доступность

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:

<IconButton aria-label={notificationsLabel(100)}>
  <Badge badgeContent={100} color="secondary">
    <MailIcon />
  </Badge>
</IconButton>

API

• <Badge />
• <BadgeUnstyled />