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>