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 \| undefined		Заголовок
color	ChipColorsType \| undefined	default	Набор цветов для компонента
checked	boolean \| undefined	false	Отображение в отмеченном (зажатом) состоянии
disabled	boolean \| undefined	false	Отключенное состояние
icon	Element \| undefined		Иконка
counterValue	number \| undefined		Значение счетчика
arrow	ChipArrowType \| undefined		Стрелка вверх или вниз
onClick	((e: SyntheticEvent<EventTarget, Event>, id?: ChipIdType \| undefined) => void) \| undefined		Обработчик нажатия
children	ReactNode		Дочерние элементы
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; checked?: string \| undefined; inner?: string \| undefined; icon?: string \| undefined; counter?: string \| undefined; } \| undefined	{}	Дополнительные классы для внутренних элементов
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		Ссылка на элемент

Chips

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

type ChipIdType = number | string;

type ChipColorsType = 'default' | 'black';

type ChipArrowType = 'up' | 'down';