Chips

import { Chip, Chips } from '@megafon/ui-core';

Примеры и код

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

Chip

Варианты состояния

<Chip id="1" title="Not selected" />
<Chip id="2" title="Checked" checked />
<Chip id="3" title="Disabled" icon={<LikeIcon />} counterValue={6} arrow="down" disabled />
<Chip id="4" title="Counter" counterValue={6} />
<Chip id="5" title="Icon" icon={<LikeIcon />} />
<Chip id="6" title="Icon + counter" icon={<LikeIcon />} counterValue={6} />
<Chip id="7" title="Dropdown" arrow="down" />

Цвета

<Chip id="1" title="Default" icon={<LikeIcon />} counterValue={6} arrow="down" />
<Chip id="2" title="Default checked" icon={<LikeIcon />} counterValue={6} arrow="down" checked />
<Chip id="3" title="Black" color="black" icon={<LikeIcon />} counterValue={6} arrow="down" />
<Chip id="4" title="Black checked" color="black" icon={<LikeIcon />} counterValue={6} arrow="down" checked />

Chips

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

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

<Chips
      isScrollable
      value="1000"
      items={[
          { id: '100', title: '100 ₽' },
          { id: '500', title: '500 ₽' },
          { id: '1000', title: '1000 ₽', icon: <LikeIcon/> },
          { id: '2000', title: '2000 ₽' },
          { id: '3000', title: '3000 ₽' },
          { id: '4000', title: '4000 ₽' },
          { id: '5000', title: '5000 ₽' },
      ]}
  />

Ограничение количества отображаемых элементов на разных разрешениях экрана

<Chips
      visibleItemsCountAll={1}
      visibleItemsCountTablet={2}
      visibleItemsCountDesktop={3}
      visibleItemsCountWide={4}
      items={[
          { id: '1', title: 'Звонки', icon: <GagIcon /> },
          { id: '2', title: 'Интернет', icon: <GagIcon /> },
          { id: '3', title: 'Сообщения', icon: <GagIcon /> },
          { id: '4', title: 'Роуминг', icon: <GagIcon /> },
          { id: '5', title: 'Сервисы', icon: <GagIcon /> },
          { id: '6', title: 'Поездки по России', icon: <GagIcon /> },
          { id: '7', title: 'Дополнительные сервисы и опции, чтобы сделать тариф выгоднее', icon: <GagIcon /> },
      ]}
  />

Комбинированный вариант

Скролл отключается на разрешениях, для которых задан лимит отображаемых элементов.

<Chips
      isScrollable
      visibleItemsCountDesktop={3}
      visibleItemsCountWide={4}
      value="3"
      color="black"
      items={[
          { id: '1', title: 'Интернет' },
          { id: '2', title: 'Звонки' },
          { id: '3', title: 'Сообщения' },
          { id: '4', title: 'Роуминг' },
          { id: '5', title: 'Сервисы' },
          { id: '6', title: 'Поездки по России' },
          { id: '7', title: 'Дополнительные сервисы' },
      ]}
  />

Выравнивание по центру

<Chips
      align="center"
      isScrollable
      items={[
          { id: '100', title: '100 ₽' },
          { id: '200', title: '200 ₽' },
          { id: '300', title: '300 ₽' },
          { id: '400', title: '400 ₽' },
      ]}
  />

Контролируемое состояние

Компонент контролируется родителем.

Код DemoChipsWrapperconst DemoChipsWrapper = ({ selectedId, children }) => {
    const [checkedOption, setCheckedOption] = React.useState<string>(selectedId);

    const handleChange = (id: string): void => {
        setCheckedOption(id);
    };

    return (
        <div style={blockStyle}>
            {children({ onChange: handleChange, selected: checkedOption })}
        </div>
    );
};

<DemoChipsWrapper selectedId='100'>
      {({ onChange, selected }) => (
          <Chips
              isControlled
              isScrollable
              value={selected}
              items={[
                  { id: '100', title: '100 ₽' },
                  { id: '200', title: '200 ₽' },
                  { id: '300', title: '300 ₽' },
                  { id: '400', title: '400 ₽' },
              ]}
              onChange={onChange}
          />
      )}
  </Container>

Chip

Prop name	Type	Default	Description
id*	ChipIdType		Идентификатор
title	string		Заголовок
color	ChipColorsType	default	Набор цветов для компонента
checked	boolean	false	Отображение в отмеченном (зажатом) состоянии
disabled	boolean	false	Отключенное состояние
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>		Ссылка на элемент

Chips

Prop name	Type	Default	Description
items*	IChipProps[]		Массив элементов
value	ChipIdType		Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии
color	ChipColorsType	default	Цвет активного элемента
align	"left" \| "center"		Горизонтальное выравнивание
isControlled	boolean	false	Переводит компонент в контролируемое состояние
isScrollable	boolean	false	Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов)
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 атрибуты к внутренним элементам

type ChipIdType = number | string;

type ChipColorsType = 'default' | 'black';

type ChipArrowType = 'up' | 'down';