切换按钮

切换按钮不是开就是关，并用 aria-pressed 把这件事说出来。文本编辑器里的加粗、已生效的筛选、正在显示的面板，都是这类。

它背后既没有隐藏的 input，也没有脚本：在静态页面上，切换按钮是在展示一个状态，而不是改变它——改变它的是 setPressed()。如果它属于表单，请改用 checkbox()；如果它是列表里的一项设置，请用 toggle()，也就是开关。

基础切换按钮

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, '加粗'),
  toggleButton('斜体'),
  toggleButton('下划线'),
)

变体

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'outline', pressed: true }, 'Outline 开'),
    toggleButton({ variant: 'outline' }, 'Outline 关'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'ghost', pressed: true }, 'Ghost 开'),
    toggleButton({ variant: 'ghost' }, 'Ghost 关'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'soft', pressed: true }, 'Soft 开'),
    toggleButton({ variant: 'soft' }, 'Soft 关'),
  ),
)

尺寸

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, '小'),
  toggleButton({ size: 'md', pressed: true }, '中'),
  toggleButton({ size: 'lg', pressed: true }, '大'),
)

带图标

纯图标的切换按钮需要无障碍名称——传一个 aria-label，它会落到按钮上。

stack({ direction: 'row', gap: 'sm' },
  toggleButton({
    pressed: true,
    'aria-label': '加粗',
    title: '加粗',
    startIcon: icon('bold'),
  }),
  toggleButton({
    'aria-label': '斜体',
    title: '斜体',
    startIcon: icon('italic'),
  }),
)

禁用

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, '开着且锁定'),
  toggleButton({ disabled: true }, '关着且锁定'),
)

让它真的做点事

一次调用把属性翻过来，样式自然跟上。在单选的 toggleGroup() 里，它还会顺手松开兄弟按钮。

toggleButton({ onclick: "import('/su/pressed.js').then(m=>m.set(this))" }, 'Bold')

或者从你自己的模块里调用——如果本来就有一个在跑的话：

import { setPressed } from 'sitelo/ui/client'

setPressed('bold')

属性

属性	类型	默认值	说明
`pressed`	`boolean`	`false`	设置 aria-pressed。之后由 setPressed() 来改。
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	未按下时按钮的样子。
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	和 button() 同一套尺度。
`disabled`	`boolean`	`false`	禁用该按钮。

其余属性都会落到 button() 上——startIcon、endIcon、onclick 等等。要一整组的话，见 toggleGroup()。