Chips

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

Примеры и код

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

Chip

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

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

Цвета

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

Chips

Код Containerconst Container = ({ children }: IContainerProps) => {
    const [checkedOption, setSelectedOption] = React.useState<string>('');

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

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

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

<Container>
      {({ onChange, selected }) => (
          <Chips
              color="black"
              value={selected}
              items={[
                  { id: '100', children: '100 ₽' },
                  { id: '500', children: '500 ₽' },
                  { id: '600', children: '1000 ₽', icon: <LikeIcon/> },
                  { id: '2000', children: '2000 ₽' },
                  { id: '3000', children: '3000 ₽' },
              ]}
          />
      )}
  </Container>

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

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

Chip

Prop name	Type	Default	Description
id*	ChipIdType		Идентификатор
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; 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	Цвет активного элемента
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		Дополнительный класс корневого элемента