Chips

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

Chip

Варианты отображения


  <Chip id="1" type="filter" />
  <Chip id="2" title="Title" />
  <Chip id="3" title="Title" icon={<LikeIcon />} />
  <Chip id="4" title="Title" counterValue={6} />
  <Chip id="5" title="Title" showArrow />
  <Chip id="6" title="Title" icon={<LikeIcon />} counterValue="6" showArrow />

Активное состояние

Показать код


  <Chip checked id="1" type="filter" counterValue={5} />
  <Chip checked id="2" type="filter" />
  <Chip checked id="3" title="Checked" icon={<LikeIcon />} counterValue="6" showArrow />

Открытое состояние

Показать код


  <Chip opened id="1" type="filter" />
  <Chip opened checked id="2" type="filter" counterValue={5} />
  <Chip opened showArrow id="3" title="Unchecked" />
  <Chip opened showArrow checked id="4" title="Checked" />

Отключенное состояние

Показать код


  <Chip disabled id="1" type="filter" />
  <Chip disabled id="2" title="Title" icon={<LikeIcon />} counterValue="6" showArrow />

Тип элемента

Показать код


  <Chip type="default" id="1" title="Title" />
  <Chip type="filter" id="2" />

Цвета для активного состояния

Показать код


  <Chip color="default" id="1" type="filter" counterValue={5} checked />
  <Chip color="default" id="2" type="filter" checked />
  <Chip color="default" id="3" title="Checked" icon={<LikeIcon />} counterValue="6" showArrow checked />
  <Chip color="black" id="4" type="filter" counterValue={5} checked />
  <Chip color="black" id="5" type="filter" checked />
  <Chip color="black" id="6" title="Checked" icon={<LikeIcon />} counterValue="6" showArrow checked />

Цветовые темы

На белом фоне

Показать код


  <Chip theme="white" id="1" type="filter" />
  <Chip theme="white" id="2" title="Title" icon={<LikeIcon />} counterValue="6" showArrow />
  <Chip theme="white" opened id="3" title="Opened" showArrow />
  <Chip theme="white" opened id="4" type="filter" />
  <Chip theme="white" color="default" id="5" title="Checked" icon={<LikeIcon />} counterValue="6" showArrow checked />
  <Chip theme="white" color="black" id="6" title="Checked" icon={<LikeIcon />} counterValue="6" showArrow checked />
  <Chip theme="white" disabled id="7" title="Title" icon={<LikeIcon />} counterValue="6" showArrow />

На сером фоне

Показать код


  <Chip theme="gray" id="1" type="filter" />
  <Chip theme="gray" id="2" title="Title" icon={<LikeIcon />} counterValue="6" showArrow />
  <Chip theme="gray" opened id="3" title="Opened" showArrow />
  <Chip theme="gray" opened id="4" type="filter" />
  <Chip theme="gray" color="default" id="5" title="Checked" icon={<LikeIcon />} counterValue="6" showArrow checked />
  <Chip theme="gray" color="black" id="6" title="Checked" icon={<LikeIcon />} counterValue="6" showArrow checked />
  <Chip theme="gray" disabled id="7" title="Title" icon={<LikeIcon />} counterValue="6" showArrow />

ChipBadge

Варианты отображения

Обертка над компонентом Chip, которая имеет те же пропсы и добавляет бейдж

Показать код


  <ChipBadge id="1" title="Title" badge={<PromoBadge size="small">Новое</PromoBadge>} />
  <ChipBadge id="2" title="Title" icon={<LikeIcon />} counterValue="6" showArrow badge={<PromoBadge size="small" color="berry">Популярное</PromoBadge>} />
  <ChipBadge id="3" title="Title" icon={<LikeIcon />} counterValue="6" showArrow badge={<PromoBadge size="small" color="berry">Невероятно популярное</PromoBadge>} />

Chips

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

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

Показать код

<Chips
      isScrollable
      value="1000"
      items={[
          { id: '100', title: '100 ₽' },
          { id: '500', title: '500 ₽', badge: <PromoBadge size="small">Новое</PromoBadge> },
          { 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 />, badge: <PromoBadge size="small">Новое</PromoBadge> },
          { id: '4', title: 'Роуминг', icon: <GagIcon /> },
          { id: '5', title: 'Сервисы', icon: <GagIcon /> },
          { id: '6', title: 'Поездки по России', icon: <GagIcon />, badge: <PromoBadge size="small">Новое</PromoBadge> },
          { 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		Заголовок
type	ChipTypeType \| undefined	default	Тип
color	ChipColorsType \| undefined	default	Цвет активного элемента компонента
theme	ChipsThemeType \| undefined	white	Цветовая тема
checked	boolean \| undefined	false	Активное состояние
opened	boolean \| undefined	false	Открытое состояние
disabled	boolean \| undefined	false	Отключенное состояние
icon	Element \| undefined		Иконка
counterValue	number \| undefined		Значение счетчика
arrow	ChipArrowType \| undefined		DEPRECATED Стрелка вверх или вниз (Используйте opened и showArrow)
showArrow	boolean \| 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		Ссылка на элемент

ChipBadge

Prop name	Type	Description
badge	ReactNode
id*	ChipIdType	Идентификатор
title	string \| undefined	Заголовок
type	ChipTypeType \| undefined	Тип
color	ChipColorsType \| undefined	Цвет активного элемента компонента
theme	ChipsThemeType \| undefined	Цветовая тема
checked	boolean \| undefined	Активное состояние
opened	boolean \| undefined	Открытое состояние
disabled	boolean \| undefined	Отключенное состояние
icon	Element \| undefined	Иконка
counterValue	number \| undefined	Значение счетчика
arrow	ChipArrowType \| undefined	DEPRECATED Стрелка вверх или вниз (Используйте opened и showArrow)
showArrow	boolean \| 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*	IChipBadgeProps[]		Массив элементов
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 ChipTypeType = 'default' | 'filter';

// DEPRECATED
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';