ChipsBox

Компонент наследует свойства и методы компонента Chips из раздела Компоненты

import { ChipsBox, ChipBox } from '@megafon/ui-shared';

Примеры и код

Свойства и методы

Демо данныеconst DemoContent = ({ children }: { children: React.ReactNode }): React.ReactNode => (
    <div
        style={{
            marginTop: '20px',
            padding: '80px 0',
            background: 'rgba(0, 0, 0, 0.05)',
            fontSize: '20px',
            textAlign: 'center',
        }}
    >
        {children}
    </div>
);

Базовое использование

<ChipsBox>
  <ChipBox id="all" title="Все">
      <DemoContent>Все</DemoContent>
  </ChipBox>
  <ChipBox id="smart" title="Для смартфонов">
      <DemoContent>Для смартфонов</DemoContent>
  </ChipBox>
  <ChipBox id="team" title="Для команды">
      <DemoContent>Для команды</DemoContent>
  </ChipBox>
  <ChipBox id="internet" title="Для интернета">
      <DemoContent>Для интернета</DemoContent>
  </ChipBox>
  <ChipBox id="iot" title="Для IoT и М2М">
      <DemoContent>Для IoT и М2М</DemoContent>
  </ChipBox>
</ChipsBox>

Рендер содержимого только для текущего варианта

<ChipsBox
  renderOnlyCurrentPanel
  value="smart"
  align="center"
  visibleItemsCountTablet={2}
  visibleItemsCountDesktop={3}
  visibleItemsCountWide={3}
>
  <ChipBox id="all" title="Все">
      <DemoContent>Все</DemoContent>
  </ChipBox>
  <ChipBox id="smart" title="Для смартфонов">
      <DemoContent>Для смартфонов</DemoContent>
  </ChipBox>
  <ChipBox id="team" title="Для команды">
      <DemoContent>Для команды</DemoContent>
  </ChipBox>
  <ChipBox id="internet" title="Для интернета">
      <DemoContent>Для интернета</DemoContent>
  </ChipBox>
  <ChipBox id="iot" title="Для IoT и М2М">
      <DemoContent>Для IoT и М2М</DemoContent>
  </ChipBox>
</ChipsBox>

ChipsBox

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string> \| undefined; dropdown?: Record<string, string> \| undefined; dropdownList?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; dropdown?: string \| undefined; dropdownList?: string \| undefined; } \| undefined		Дополнительные классы для внутренних элементов
onChange	((id: ChipIdType, e?: SyntheticEvent<EventTarget, Event> \| undefined) => void) \| undefined		Обработчик изменения значения
align	"center" \| "left" \| undefined		Горизонтальное выравнивание
color	ChipColorsType \| undefined		Цвет активного элемента
value	ChipIdType \| undefined		Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии
isControlled	boolean \| undefined		Переводит компонент в контролируемое состояние
isScrollable	boolean \| undefined	true	Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов)
visibleItemsCountAll	number \| undefined		Количество отображаемых элементов на всех разрешениях экрана
visibleItemsCountTablet	number \| undefined		Количество отображаемых элементов на разрешении 768 - 1023
visibleItemsCountDesktop	number \| undefined		Количество отображаемых элементов на разрешении 1024 - 1279
visibleItemsCountWide	number \| undefined		Количество отображаемых элементов на разрешении 1280+
moreTitle	string \| undefined		Название дополнительной кнопки
renderOnlyCurrentPanel	boolean \| undefined	false	Рендер содержимого только для текущего варианта
children*	ChipBoxChildrenType		Дочерние элементы
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент

ChipBox

Prop name	Type	Description
dataAttrs	{ root?: Record<string, string> \| undefined; inner?: Record<string, string> \| undefined; icon?: Record<string, string> \| undefined; counter?: Record<string, string> \| undefined; arrow?: Record<...> \| undefined; } \| undefined	Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLButtonElement> \| undefined	Ссылка на элемент
title	string \| undefined	Заголовок
className	string \| undefined	Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; checked?: string \| undefined; inner?: string \| undefined; icon?: string \| undefined; counter?: string \| undefined; } \| undefined	Дополнительные классы для внутренних элементов
children	ReactNode	Дочерние элементы
icon	Element \| undefined	Иконка
onClick	((e: SyntheticEvent<EventTarget, Event>, id?: ChipIdType \| undefined) => void) \| undefined	Обработчик нажатия
id*	ChipIdType	Идентификатор
disabled	boolean \| undefined	Отключенное состояние
counterValue	number \| undefined	Значение счетчика
arrow	ChipArrowType \| undefined	Стрелка вверх или вниз

type ChipIdType = number | string;

type ChipColorsType = 'default' | 'black';

type ChipArrowType = 'up' | 'down';