分段选择

segmented

同族四件：分段控件（两档尺寸）、toggle-group、数字步进器、OTP 单元格（输入跳格 / 粘贴分摊）。

示例

<div class="demo-row">
  <div class="segmented control" role="radiogroup" aria-label="统计周期">
    <button class="segmented-item motion pressable" type="button">日</button>
    <button class="segmented-item motion pressable is-active" type="button">周</button>
    <button class="segmented-item motion pressable" type="button">月</button>
  </div>
  <div class="segmented segmented--sm control" role="radiogroup" aria-label="小号分段">
    <button class="segmented-item motion pressable is-active" type="button">列表</button>
    <button class="segmented-item motion pressable" type="button">网格</button>
  </div>
</div>
<div class="demo-row" style="margin-top:16px">
  <div class="toggle-group control" role="group" aria-label="对齐方式">
    <button class="toggle-item motion pressable is-active" type="button">左对齐</button>
    <button class="toggle-item motion pressable" type="button">居中</button>
    <button class="toggle-item motion pressable" type="button">右对齐</button>
  </div>
</div>
<div class="demo-row" style="margin-top:16px">
  <div class="stepper control">
    <button class="stepper-btn pressable" type="button" data-step="-1" aria-label="减少"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
    <input class="stepper-input" type="number" value="3" min="0" max="10" step="1" aria-label="数量" />
    <button class="stepper-btn pressable" type="button" data-step="1" aria-label="增加"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg></button>
  </div>
  <div class="otp" role="group" aria-label="短信验证码">
    <input class="otp-cell" maxlength="1" inputmode="numeric" aria-label="第 1 位" />
    <input class="otp-cell" maxlength="1" inputmode="numeric" aria-label="第 2 位" />
    <input class="otp-cell" maxlength="1" inputmode="numeric" aria-label="第 3 位" />
    <input class="otp-cell" maxlength="1" inputmode="numeric" aria-label="第 4 位" />
  </div>
</div>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/segmented.css';

用法

import { initInput } from '@icen.ai/ui/behaviors/input';
initInput(); // OTP 单元格的输入跳格 / 粘贴分摊由 input behavior 处理
// segmented / toggle-group / stepper 为纯 CSS 契约，选中态由使用方切换