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

ChipBox

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

type ChipIdType = number | string;

type ChipColorsType = 'default' | 'black';

type ChipArrowType = 'up' | 'down';