KvalityUI

SegmentedToggle

Переключатель из нескольких сегментов — период, режим отображения.

Живой код — редактируйте
function Example() {
  const [view, setView] = useState('week');
  return (
    <SegmentedToggle
      value={view}
      onChange={setView}
      items={[
        { key: 'day', label: 'День' },
        { key: 'week', label: 'Неделя' },
        { key: 'month', label: 'Месяц', icon: CalendarLineIcon }
      ]}
    />
  );
}

render(<Example />);

Маленький

Живой код — редактируйте
function Example() {
  const [mode, setMode] = useState('devices');
  return (
    <SegmentedToggle
      size="sm"
      value={mode}
      onChange={setMode}
      items={[
        { key: 'devices', label: 'По устройствам' },
        { key: 'utm', label: 'По источникам' }
      ]}
    />
  );
}

render(<Example />);

Пропсы

Prop

Type

On this page