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">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>

<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
      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>

<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>