Segmented 分段控制器

用于在多个选项之间切换，适合较少选项的场景。

基础用法

import { Segmented } from '@airo-ui/react'

function Demo() {
  const options = [
    { label: '日', value: 'day' },
    { label: '周', value: 'week' },
    { label: '月', value: 'month' },
  ]

  return <Segmented options={options} defaultValue="week" />
}

受控与非受控

import { useState } from 'react'
import { Segmented } from '@airo-ui/react'

const options = [
  { label: '日', value: 'day' },
  { label: '周', value: 'week' },
  { label: '月', value: 'month' },
]

function ControlledDemo() {
  const [value, setValue] = useState<string | number>('week')
  return <Segmented value={value} onChange={setValue} options={options} />
}

function UncontrolledDemo() {
  return <Segmented defaultValue="month" options={options} />
}

尺寸

import { Segmented } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Segmented options={options} size="sm" defaultValue="day" />
      <Segmented options={options} size="md" defaultValue="day" />
    </>
  )
}

禁用

import { Segmented } from '@airo-ui/react'

const options = [
  { label: '日', value: 'day' },
  { label: '周', value: 'week', disabled: true },
  { label: '月', value: 'month' },
]

function Demo() {
  return (
    <>
      <Segmented options={options} defaultValue="day" />
      <Segmented options={options} defaultValue="day" disabled />
    </>
  )
}

API

Props

名称	类型	默认值	说明
value	string | number	—	受控模式选中值
defaultValue	string | number	—	非受控模式默认选中值
options	SegmentedOption[]	—	选项列表
disabled	boolean	false	是否禁用整个组件
size	'sm' | 'md'	'md'	尺寸
onChange	(value: string | number) => void	—	选中项变化时触发

SegmentedOption

属性	类型	说明
label	string	显示文本
value	string | number	选项值
disabled	boolean	是否禁用该选项