Badge#

Badge генерирует маленький значок в углу своего дочернего элемента.

Свойства компонента badge#

Свойства компонента badge представлены в таблице ниже.

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации. `Partial<Record<"disabled" / "success" / "info" / "warning" / "error" / "top" / "bottom" / "left" / "right" / "neutral" / "badge" / "badgeRoot" / "dot" / "show", string>>`	-
2	status	Цветовая схема значка. Secondary — по-умолчанию, success — сообщение об успехе, error — сообщение об ошибке, processing — сообщение об выполняющемся действии, warning — предупреждение, а также: "disabled" "info" "error" "neutral"	error
3	disabled	Состояние активности элемента (boolean)	-
4	content	Контент, который отображается внутри значка. Если свойство имеет пустое значение — 0, undefined, null, '', false — то значок не будет отображаться. Это поведение можно изменить с помощью свойства showZero	-
5	position	Положение значка относительно дочернего элемента: "top-left", "top-right", "bottom-left", "bottom-right" (BadgePositionProperties)	`{ vertical: 'top', horizontal: 'right' }`
6	max	Верхняя граница для числового значения значка. Чтобы убрать верхнюю границу можно передать значение равное Infinity (number)	99
7	dot	Отображает значок как цветную точку без контента. В этом состоянии значок отображается только при НЕ пустом значении свойства content (boolean)	-
8	showZero	Включает отображение значка при пустом значении — 0, undefined, null, '', false — свойства content (boolean)
9	horizontalOffset	Смещение положения значка по горизонтали (string, number)	0
10	verticalOffset	Смещение положения значка по вертикали (string, number)

Автономный значок без дочерних компонентов (Standalone)#

Используется для отображения контента в одном из доступных цветовых состояний, например, для отображения информации о новых уведомлениях.

<Badge content={1} />
<Badge content={1} status="error" />
<Badge content={1} status="info" />
<Badge content={1} status="neutral" />
<Badge content={1} status="warning" />
<Badge content={1} status="success" />
<Badge disabled content={1} />

Простые значки для компонента кнопки#

На примере кнопки (целевой элемент, к которому применяется значок, может быть любым) показано отображение значков с использованием разных цветов.

<Badge content={10}>
  <Button>Уведомления</Button>
</Badge>
<Badge content={10} status="success">
  <Button variant="outlined">Уведомления</Button>
</Badge>
<Badge content={10} status="error">
  <Button variant="ghost">Уведомления</Button>
</Badge>
<Badge content={10} status="info">
  <Button>Уведомления</Button>
</Badge>
<Badge content={10} status="warning">
  <Button variant="outlined">Уведомления</Button>
</Badge>
<Badge disabled content={10}>
  <Button variant="ghost" disabled>
    Уведомления
  </Button>
</Badge>

Превышение максимального значения#

При превышении максимального значения компонента badge отрисовывается вспомогательный символ «+».

<Badge content={10} max={9}>
  <Button>Уведомления</Button>
</Badge>

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

Когда свойство content имеет пустое значение — 0, undefined, null, '', false — значок исчезает.

import * as React from 'react'
import { Badge } from '@v-uik/badge'
import { Button } from '@v-uik/button'
import { InputNumber } from '@v-uik/input-number'

export const BadgeToggle = (): JSX.Element => {
  const [value, setValue] = React.useState<number | null>(5)

  const onChangeInput = (value: number | null) => {
    setValue(value)
  }

  return (
    <>
      <Badge content={value}>
        <div
          style={{
            height: '40px',
            width: '40px',
            backgroundColor: 'bisque',
          }}
        />
      </Badge>

      <InputNumber
        fullWidth
        style={{
          width: 65,
          marginRight: '15px',
          marginLeft: '15px',
        }}
        precision={0}
        value={value}
        onChange={onChangeInput}
      />

      <Button
        kind="outlined"
        size="sm"
        style={{
          paddingLeft: 11,
          paddingRight: 11,
          minWidth: 32,
        }}
        onClick={() => setValue((value ?? 0) - 1)}
      >
        -
      </Button>
      <Button
        kind="outlined"
        size="sm"
        style={{
          marginLeft: 8,
          paddingLeft: 11,
          paddingRight: 11,
          minWidth: 32,
        }}
        onClick={() => setValue((value ?? 0) + 1)}
      >
        +
      </Button>
    </>
  )
}

Если необходимо, чтобы значок отображался всегда, можно использовать свойство showZero.

<Badge content={0} showZero>
  <div
    style={{
      height: '40px',
      width: '40px',
      backgroundColor: 'bisque',
    }}
  ></div>
</Badge>

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

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

Обратите внимание, свойство dot не отображает значок с пустым контентом. Убедитесь, что content не является пустым значением или указано свойство showZero

<Badge content={1} dot>
  <div
    style={{
      height: '40px',
      width: '40px',
      backgroundColor: 'bisque',
    }}
  ></div>
</Badge>
<Badge dot showZero>
  <div
    style={{
      height: '40px',
      width: '40px',
      backgroundColor: 'bisque',
    }}
  ></div>
</Badge>

Выравнивание компонента badge#

Когда значок отображается относительно дочернего элемента, можно управлять его позицией с помощью свойства position, а также производить смещение по вертикали и горизонтали с помощью свойств horizontalOffset и verticalOffset соответственно.

<Badge content={1} position="top-right">
  <div
    style={{
      height: '40px',
      width: '40px',
      backgroundColor: 'bisque',
    }}
  ></div>
</Badge>
<Badge content={1} position="bottom-right">
  <div
    style={{
      height: '40px',
      width: '40px',
      backgroundColor: 'bisque',
    }}
  ></div>
</Badge>
<Badge content={1} position="top-left">
  <div
    style={{
      height: '40px',
      width: '40px',
      backgroundColor: 'bisque',
    }}
  ></div>
</Badge>
<Badge content={1} position="bottom-left">
  <div
    style={{
      height: '40px',
      width: '40px',
      backgroundColor: 'bisque',
    }}
  ></div>
</Badge>

Доступность#

Рекомендуется использовать дополнительное описание при использовании компонента badge с кнопкой. Например, атрибут aria-label.

<Badge content={10}>
 <Button aria-label="10 уведомлений">Уведомления</Button>
</Badge>