# 分段控件（Segmented Control (iOS)）

- 类型 / 材质：`segmented` / `glass-apple`（玻璃）
- 状态：done ｜ 最后提交：2026-10-31
- 灵感来源：iOS UISegmentedControl / 控制中心切换器
- 依据标准：`/design#interaction` ｜ 组件页：`/showcase/component/segmented/glass-apple` ｜ 条目：`/r/segmented--glass-apple.json`
- 必缺状态：焦点 / 禁用
- 整页场景：
  - 使用概览（`/r/scene--dashboard.json`）
  - 组件目录（`/r/scene--list.json`）

## 规格

- APG radiogroup：方向键遍历 + roving tabindex
- 滑块用独立 translate 平移，不动其他属性
- 选中切换时滑块做一次 squash & stretch
- 选项可单独禁用，禁用项不响应方向键

## 参数（CSS 变量）

`--color-surface` `--color-text` `--color-text-muted` `--color-text-subtle` `--dur-base` `--dur-fast` `--ease-standard` `--fw-medium` `--fw-normal` `--glass-border` `--glass-recess` `--shadow-sm` `--text-sm` `--text-xs`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `options` | `SegmentOption[]` | 必填 | — |
| `value` | `string` | 必填 | — |
| `onChange` | `(value: string) => void` | 可选 | — |
| `size` | `'sm' | 'md'` | 可选 | — |
| `className` | `string` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「分段控件」— Segmented Control (iOS)（分段 / Glass）
灵感来源：iOS UISegmentedControl / 控制中心切换器
规格：
- APG radiogroup：方向键遍历 + roving tabindex
- 滑块用独立 translate 平移，不动其他属性
- 选中切换时滑块做一次 squash & stretch
- 选项可单独禁用，禁用项不响应方向键
参数（CSS 变量）：--color-surface --color-text --color-text-muted --color-text-subtle --dur-base --dur-fast --ease-standard --fw-medium --fw-normal --glass-border --glass-recess --shadow-sm --text-sm --text-xs
必缺状态：焦点 / 禁用
整页场景：使用概览 / 组件目录
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/segmented/glass-apple · 标准 interaction /design#interaction · 调研笔记 /showcase/component/segmented/glass-apple#notes
```

## 调研笔记

import { useRef, useState, type KeyboardEvent, type ReactNode } from 'react';

export interface SegmentOption {
  value: string;
  label: ReactNode;
  /** 禁用项：不可选也不响应方向键 */
  disabled?: boolean;
}

interface Props {
  options: SegmentOption[];
  value: string;
  onChange?: (value: string) => void;
  size?: 'sm' | 'md';
  className?: string;
}

const sizeClasses = {
  sm: 'h-8 text-[length:var(--text-xs)] px-2.5',
  md: 'h-9 text-[length:var(--text-sm)] px-3.5',
};

export function GlassAppleSegmented({
  options,
  value,
  onChange,
  size = 'md',
  className = '',
}: Props) {
  const index = Math.max(0, options.findIndex((o) => o.value === value));
  const [stretching, setStretching] = useState(false);
  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);

  const select = (next: number, focus = false) => {
    const clamped = Math.max(0, Math.min(options.length - 1, next));
    if (options[clamped]?.disabled) return;
    if (clamped !== index) {
      setStretching(true);
      window.setTimeout(() => setStretching(false), 280);
    }
    onChange?.(options[clamped].value);
    if (focus) btnRefs.current[clamped]?.focus();
  };

  const onKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
      e.preventDefault();
      select(index + 1, true);
    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
      e.preventDefault();
      select(index - 1, true);
    } else if (e.key === 'Home') {
      e.preventDefault();
      select(0, true);
    } else if (e.key === 'End') {
      e.preventDefault();
      select(options.length - 1, true);
    }
  };

  return (
    <div
      role="radiogroup"
      onKeyDown={onKeyDown}
      className={`
        relative grid items-stretch
        rounded-full p-1
        bg-[var(--glass-recess)] border border-[var(--glass-border)]
        ${className}
      `}
      style={{ gridTemplateColumns: `repeat(${options.length}, 1fr)` }}
    >
      {/* 滑块：绝对定位 + translate 平移，宽度按分格计算 */}
      <span
        aria-hidden="true"
        className={`
          absolute top-1 bottom-1 left-1 rounded-full
          bg-[var(--color-surface)] border border-[var(--glass-border)]
          shadow-[var(--shadow-sm)]
          ${stretching ? 'segmented-stretch' : ''}
        `}
        style={{
          width: `calc((100% - 8px) / ${options.length})`,
          translate: `${index * 100}% 0`,
          transition: 'translate var(--dur-base) var(--ease-standard)',
        }}
      />

      {options.map((opt, i) => {
        const selected = i === index;
        return (
          <button
            key={opt.value}
            ref={(el) => { btnRefs.current[i] = el; }}
            type="button"
            role="radio"
            aria-checked={selected}
            tabIndex={selected ? 0 : -1}
            onClick={() => select(i)}
            disabled={opt.disabled}
            aria-disabled={opt.disabled}
            className={`
              relative z-[1] rounded-full whitespace-nowrap
              ${sizeClasses[size]}
              transition-colors duration-[var(--dur-fast)]
              select-none
              ${opt.disabled
                ? 'text-[var(--color-text-subtle)] cursor-not-allowed opacity-50'
                : `cursor-pointer ${selected
                    ? 'text-[var(--color-text)]'
                    : 'text-[var(--color-text-muted)] hover:text-[var(--color-text)]'}`}
            `}
            style={{ fontWeight: selected ? 'var(--fw-medium)' : 'var(--fw-normal)' }}
          >
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}