@snack-uikit/segmented-control

Segmented Control

Installation

npm i @snack-uikit/segmented-control

Changelog

Description

• Пакет @snack-uikit/segmented-control предоставляет компонент SegmentedControl для выбора одного значения из набора опций, представленных в виде сегментов.
• Компонент поддерживает работу в контролируемом и неконтролируемом режимах, позволяет задавать размеры (xs, s, m, l), управлять шириной (auto, full) и добавлять обводку (outline).
• Каждый сегмент может содержать текстовую метку (label), иконку (icon), счётчик (counter) или их комбинации, а также может быть отключён (disabled).
• Компонент поддерживает навигацию с клавиатуры (стрелки, Tab, Enter) и позволяет оборачивать сегменты в произвольные компоненты через renderWrapSegment (например, для добавления тултипов).
• Figma: SegmentedControl.

Example

import { useState } from 'react';
import { SegmentedControl } from '@snack-uikit/segmented-control';
import { PlaceholderSVG } from '@snack-uikit/icons';
import { Tooltip } from '@snack-uikit/tooltip';

function Example() {
  const [selected, setSelected] = useState('1');

  return (
    <SegmentedControl
      items={[
        { label: 'Chip', value: '1', icon: <PlaceholderSVG /> },
        { label: 'Gadget Hackwrench', value: '2', icon: <PlaceholderSVG /> },
        { label: 'Dale', value: '3', counter: { value: 9, appearance: 'neutral' } },
        {
          label: 'Zipper',
          value: '4',
          icon: <PlaceholderSVG />,
          disabled: true,
          renderWrapSegment: segment => (
            <Tooltip tip='Not a rodent' placement='bottom'>
              {segment}
            </Tooltip>
          ),
        },
        { label: 'Monterey Jack', value: '5', counter: { value: 10 } },
      ]}
      value={selected}
      onChange={setSelected}
      size="m"
      width="auto"
    />
  );
}

SegmentedControl

SegmentedControl

Props