Segment

Segment 用于在同一上下文中切换少量互斥选项。组件基于 Tabs 的结构和样式能力封装，只渲染触发项，不渲染内容面板，适合视图模式、时间范围、筛选维度等轻量选择场景。

import { Segment } from '@skyroc/web-ui';

何时使用

• 选项数量较少，用户需要直接看到全部可选项。
• 选项之间互斥，切换后通常影响同一区域的展示方式或过滤条件。
• 需要比 Radio 更紧凑、更像工具栏的选择控件。
• 需要展示独立内容面板时使用 Tabs；需要表单语义更明确的单选项时使用 Radio。

基础用法

通过 items 定义选项，使用 value 和 onValueChange 可以实现受控模式，也可以使用 defaultValue 作为非受控默认值。

<Segment
  defaultValue="day"
  items={[
    { value: 'day', label: 'Day' },
    { value: 'week', label: 'Week' }
  ]}
/>

方向

通过 orientation 控制排列方向。默认横向排列，纵向排列适合侧栏筛选、设置面板或窄容器。

<Segment
  items={items}
  orientation="vertical"
/>

形状

通过 shape 控制外层容器和激活指示器的圆角。

尺寸

通过 size 调整字号、间距和触发项尺寸，从 xs 到 2xl 共 6 个尺寸。

样式类型

通过 type 切换分段样式。pill 是默认填充式样式，line 使用线性指示器。设置 enableIndicator={false} 时，组件会使用触发项自身的激活背景。

<Segment
  items={items}
  type="line"
/>

<Segment
  enableIndicator={false}
  items={items}
/>

禁用

可以禁用整个 Segment，也可以在单个 item 上设置 disabled 禁用部分选项。

<Segment
  items={[
    { value: 'day', label: 'Day' },
    { value: 'week', label: 'Week', disabled: true }
  ]}
/>

<Segment disabled items={items} />

API

Segment

通用属性参考：Segment 复用 Tabs Root、List 和 Trigger 的交互能力，但不会渲染内容面板。

类型