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" checked />
<Chip id="2" title="Black" color="black" icon={<LikeIcon />} counterValue={6} arrow="down" checked />

Цвета неактивных элементов

Показать код

<Chip id="1" title="White" />
  <Chip id="2" title="White disabled" disabled />
  <Chip id="2" title="White checked" checked />

Показать код

<Chip id="3" title="Gray" theme="gray" />
  <Chip id="4" title="Gray disabled" theme="gray" disabled />
  <Chip id="4" title="Gray checked" theme="gray" 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}
      isDropdownShort
      dropdownPaddings="small"
      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"
      theme="gray"
      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	Цвет активного элемента компонента
theme	ChipsThemeType \| undefined	white	Цвета неактивных элементов компонента
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; arrow?: 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	Цвет активного элемента
theme	ChipsThemeType \| undefined	white	Цвет неактивных элементов
align	"left" \| "center" \| 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	Еще	Название дополнительной кнопки
isDropdownShort	boolean \| undefined	false	Попап выпадающего списка короче в высоту
dropdownPaddings	DropdownItemsPaddingType \| undefined		Отступы элементов списка выпадающего списка
onChange	((id: ChipIdType, e?: SyntheticEvent<EventTarget, Event> \| undefined) => void) \| undefined		Обработчик изменения значения
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; dropdown?: string \| undefined; dropdownPopup?: string \| undefined; dropdownList?: string \| undefined; dropdownItem?: string \| undefined; scroll?: string \| undefined; scrollInner?: string \| undefined; } \| undefined	{}	Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; dropdown?: Record<string, string> \| undefined; dropdownPopup?: Record<string, string> \| undefined; dropdownList?: Record<...> \| undefined; dropdownItem?: Record<...> \| undefined; scroll?: Record<...> \| undefined; scrollInner?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам

type ChipIdType = number | string;

type ChipColorsType = 'default' | 'black';

type ChipsThemeType = 'white' | 'gray';

type DropdownItemsPaddingType = 'small' | 'large';

type ChipArrowType = 'up' | 'down';

ChipsSuggest

import { ChipSuggest, ChipsSuggest } from '@megafon/ui-core';

ChipSuggest

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

Показать код


  <ChipSuggest id="1" title="Chip" />
  <ChipSuggest id="2" title="Chip with icon" icon={<LikeIcon />} />

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

Белый

Показать код


  <ChipSuggest id="1" title="Default" icon={<LikeIcon />} />

Серый

Показать код


  <ChipSuggest id="2" title="Gray" theme="gray" icon={<LikeIcon />} />

Размеры

Показать код


  <ChipSuggest size="small" id="1" title="Small" />
  <ChipSuggest size="small" id="2" title="Small" icon={<LikeIcon />} />
  <ChipSuggest size="medium" id="3" title="Medium" />
  <ChipSuggest size="medium" id="4" title="Medium" icon={<LikeIcon />} />

ChipsSuggest

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

Показать код


  <ChipsSuggest
      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 ₽' },
      ]}
  />

Базовое использование с горизонтальным скроллом

Показать код


  <ChipsSuggest
      isScrollable
      items={[
          { id: '1', title: 'Chip Suggest 1' },
          { id: '2', title: 'Chip Suggest 2' },
          { id: '3', title: 'Chip Suggest 3', icon: <LikeIcon/> },
          { id: '4', title: 'Chip Suggest 4' },
          { id: '5', title: 'Chip Suggest 5' },
          { id: '6', title: 'Chip Suggest 6' },
          { id: '7', title: 'Chip Suggest 7' },
          { id: '8', title: 'Chip Suggest 8' },
          { id: '9', title: 'Chip Suggest 9' },
          { id: '10', title: 'Chip Suggest 10' },
      ]}
  />

ChipSuggest

Prop name	Type	Default	Description
id*	ChipSuggestIdType		Идентификатор
title	string \| undefined		Заголовок
theme	ChipSuggestThemesType \| undefined	white	Цвет компонента
size	ChipSuggestSizeType \| undefined	medium	Размер компонента
icon	Element \| undefined		Иконка
children	ReactNode		Дочерние элементы
rootRef	Ref<HTMLButtonElement> \| undefined		Ссылка на корневой элемент
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; checked?: string \| undefined; inner?: string \| undefined; icon?: string \| undefined; } \| undefined	{}	Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; inner?: Record<string, string> \| undefined; icon?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
onClick	((e: SyntheticEvent<EventTarget, Event>, id?: ChipSuggestIdType \| undefined) => void) \| undefined		Обработчик нажатия

ChipsSuggest

Prop name	Type	Default	Description
items*	IChipSuggestProps[]		Массив элементов
theme	ChipSuggestThemesType \| undefined	white	Цвет элементов
size	ChipSuggestSizeType \| undefined	medium	Размер элементов
isScrollable	boolean \| undefined	false	Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов)
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; } \| undefined	{}	Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
onChange	((id: ChipSuggestIdType, e?: SyntheticEvent<EventTarget, Event> \| undefined) => void) \| undefined		Обработчик изменения значения

type ChipSuggestIdType = number | string;

type ChipSuggestThemesType = 'white' | 'gray';

type ChipSuggestSizeType = 'small' | 'medium';