Segmented 分段控制器

用于在互斥选项之间切换的内联切换。

导入

import { Segmented } from 'asterui'

示例

基础用法

用于视图切换的简单分段控制。

Selected: List

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [view, setView] = useState('List')
  
  return (
      <div>
        <Segmented value={view} onChange={(v) => setView(v as string)}>
          <Segmented.Item value="List">List</Segmented.Item>
          <Segmented.Item value="Grid">Grid</Segmented.Item>
          <Segmented.Item value="Table">Table</Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">Selected: {view}</p>
      </div>
    )
}

export default App

禁用项目

可以禁用单个项目。

Selected: week

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [period, setPeriod] = useState('week')
  
  return (
      <div>
        <Segmented value={period} onChange={(v) => setPeriod(v as string)}>
          <Segmented.Item value="day">Daily</Segmented.Item>
          <Segmented.Item value="week">Weekly</Segmented.Item>
          <Segmented.Item value="month">Monthly</Segmented.Item>
          <Segmented.Item value="year" disabled>Yearly</Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">Selected: {period}</p>
      </div>
    )
}

export default App

尺寸

四种尺寸选项可用。

import { Segmented, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" gap="md">
        <Segmented size="xs" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="sm" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="md" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="lg" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
      </Space>
    )
}

export default App

块模式

具有相同大小选项的全宽。

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [align, setAlign] = useState('Center')
  
  return (
      <div className="w-full max-w-md">
        <Segmented value={align} onChange={(v) => setAlign(v as string)} block>
          <Segmented.Item value="Left">Left</Segmented.Item>
          <Segmented.Item value="Center">Center</Segmented.Item>
          <Segmented.Item value="Right">Right</Segmented.Item>
        </Segmented>
      </div>
    )
}

export default App

禁用

整个控件的禁用状态。

import { Segmented } from 'asterui'

function App() {
  return (
      <Segmented defaultValue="A" disabled>
        <Segmented.Item value="A">Option A</Segmented.Item>
        <Segmented.Item value="B">Option B</Segmented.Item>
        <Segmented.Item value="C">Option C</Segmented.Item>
      </Segmented>
    )
}

export default App

带图标

带有图标和标签的选项。

View: list

import { Segmented } from 'asterui'
import { Bars3Icon, Squares2X2Icon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [view, setView] = useState('list')
  
  return (
      <div>
        <Segmented value={view} onChange={(v) => setView(v as string)}>
          <Segmented.Item value="list" icon={<Bars3Icon size="sm" />}>
            List
          </Segmented.Item>
          <Segmented.Item value="grid" icon={<Squares2X2Icon size="sm" />}>
            Grid
          </Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">View: {view}</p>
      </div>
    )
}

export default App

API

`Segmented`

属性	描述	类型	默认值
`value`	当前选中的值(受控)	`string \| number`	-
`defaultValue`	默认选中的值(非受控)	`string \| number`	-
`onChange`	选择更改时的回调	`(value: string \| number) => void`	-
`size`	控件的大小	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`block`	占用容器的全宽	`boolean`	`false`
`disabled`	禁用所有选项	`boolean`	`false`
`className`	额外的 CSS 类	`string`	-
`children`	Segmented.Item 组件	`ReactNode`	-

`Segmented.Item`

属性	描述	类型	默认值
`value`	选项值(必需)	`string \| number`	-
`disabled`	禁用此选项	`boolean`	`false`
`icon`	标签前的图标	`ReactNode`	-
`children`	标签内容	`ReactNode`	-
`className`	额外的 CSS 类	`string`	-

何时使用

视图切换: 在列表/网格/表格视图之间切换
时间段: 日/周/月/年过滤器
尺寸选择器: S/M/L/XL 选项
对齐: 左/中/右控件
模式切换: 明/暗主题切换

Segmented 与 Radio.Group 对比

Segmented	Radio.Group
即时 UI 状态更改	表单字段值
紧凑的按钮式外观	传统单选按钮
始终可见的选项	可以有许多选项
通常 2-5 个选项	任意数量的选项