Toggle Button 切换按钮

切换按钮在「未选中 / 选中 / 不确定」之间切换。与 Checkbox 的区别是它本身就是一个按钮——点击在位即切换，不额外画勾选框字形；与 Button 的区别是切换后保持选中态（铺满强调色）。样式还原 WinUI 3（Windows App SDK）的 ToggleButton。

基础用法

v-model:checked 双向绑定布尔值。这是受控组件：点击只抛 update:checked，是否改状态由消费方决定。

<FluereToggleButton v-model:checked="bold">加粗</FluereToggleButton>
<FluereToggleButton v-model:checked="italic">倾斜</FluereToggleButton>

三态（不确定）

checked 支持 null（对应 WinUI IsChecked 的 bool?）。开启 three-state 后点击循环 false → true → null → false；不确定态的可访问名是 aria-pressed="mixed"（不是 aria-checked）。

<FluereToggleButton v-model:checked="value" three-state>三态开关</FluereToggleButton>

尺寸 / 禁用 / 纯图标

三档尺寸与 Button 同档（Fluent 高度 24 / 32 / 40）。「选中且禁用」用 WinUI 的强调禁用档（带 alpha 的强调色）。纯图标形态用 icon-only + label 提供可访问名。

<FluereToggleButton v-model:checked="small" size="small">小</FluereToggleButton>
<FluereToggleButton v-model:checked="medium" size="medium">中</FluereToggleButton>
<FluereToggleButton v-model:checked="large" size="large">大</FluereToggleButton>
<FluereToggleButton disabled>禁用</FluereToggleButton>
<FluereToggleButton v-model:checked="on" disabled>禁用（已选中）</FluereToggleButton>
<FluereToggleButton icon-only :icon="FluentIconCheckmark24Regular" label="已选中" />

规格来源

实现要点

• 状态表逐条对齐主题资源：未选中走 ControlFillColor*（--colorNeutralBackground1 / …Hover / …Pressed / …Disabled）；选中走 AccentFillColor*（--colorBrandBackground / …Hover / …Pressed）；选中前景 TextOnAccentFillColorPrimaryBrush → --colorNeutralForegroundOnBrand；不确定态的资源组（*Indeterminate）与未选中同源。完整映射表写在组件文件头。
• Fluent token 表无同值档的三条落组件局部变量，值取 WinUI 原值（可一行覆写）：AccentFillColorDisabledBrush / TextOnAccentFillColorDisabledBrush → --fui-toggle-button-checked-disabled-background（亮 #37000000 / 暗 #28FFFFFF）与 -foreground（亮 #FFFFFF / 暗 #87FFFFFF）；TextOnAccentFillColorSecondaryBrush（选中态按下前景）→ --fui-toggle-button-checked-pressed-foreground（亮 #B3FFFFFF / 暗 #80000000）。
• 动效只过渡背景：模板里的 ContentPresenter.BackgroundTransition = BrushTransition Duration=0:0:0.083 ⇒ transition: background-color 83ms linear（BrushTransition 公开源码只给时长、没给缓动，按线性处理并注明）；状态切换里的 BorderBrush / Foreground 都是 DiscreteObjectKeyFrame KeyTime=0，瞬切不过渡。注：本库 FluereButton 仍是 150ms + curveEasyEase 且三项一起过渡，与 A 级有偏差（既有口径，待统一）。
• 焦点走 0.4.3 的共享原语 useFocusVisual（外 2px --colorStrokeFocus2 + 内 1px --colorStrokeFocus1，等价 FocusVisualMargin = -3）；组件内不写 :focus-visible，否则同特异性会按源码顺序把焦点环吃掉。
• 受控语义：点击只抛 update:checked，并附带 WinUI 同名的 checked / unchecked / indeterminate 事件；三态循环对齐 ToggleButton_Partial.cpp#OnToggleImpl（Indeterminate → Unchecked、Checked + IsThreeState → Indeterminate、其余 Checked ⇄ Unchecked）。
• 已知缺口：高对比度未实现（WinUI HC 下这些画刷走 SystemColor*）；AppBarToggleButton 的 subtle 外观未做；字重沿用本库 Button 的 --fontWeightMedium（WinUI 的 Button_themeresources 是 FontWeight = Normal）；按下 / 禁用态的描边未单列档（A 级 pressed 用 ControlStrokeColorDefaultBrush、库内 Input / ComboBox 对它的口径是 --colorNeutralStrokeAlpha，本组件仍用 --colorNeutralStroke1）；BackgroundSizing = OuterBorderEdge 未显式写 background-clip（CSS 默认 border-box 已等价，实测无视觉差异）。

API

FluereToggleButton