Switch

一个开关，拇指沿弹簧滑动。

示例可交互

Switch — Avalonia UIKit

Live demo unavailable

<StackPanel Spacing="8">
  <ToggleSwitch Content="Wi-Fi" IsChecked="True" />
  <ToggleSwitch Content="Bluetooth" />
  <ToggleSwitch Content="Airplane mode" IsEnabled="False" />
</StackPanel>

用法

主题覆盖 ToggleSwitch。轨道在 xsmall 与 small 时为 28×16（两者只在标签文字大小上不同），medium（默认）为 36×20，large 为 44×24；IsChecked 决定其颜色。拇指沿 UIKit.Spring.Move 弹簧移动，在切换途中反向切换时会保留速度，拖动时则立即跟随指针。

Content 是轨道之后的标签；Classes="label-left" 把它放在前面。与按钮不同，指针按下会给开关焦点，因此它的焦点环会在 :focus 时显示。

示例

四种尺寸。

尺寸可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="8">
  <ToggleSwitch Classes="xsmall" Content="Extra small" IsChecked="True" />
  <ToggleSwitch Classes="small" Content="Small" IsChecked="True" />
  <ToggleSwitch Content="Medium" IsChecked="True" />
  <ToggleSwitch Classes="large" Content="Large" IsChecked="True" />
</WrapPanel>

label-left 用于标签在前的设置行。

标签在左可交互

Live demo unavailable

<StackPanel Spacing="8">
  <ToggleSwitch Classes="label-left" Content="Wi-Fi" IsChecked="True" />
  <ToggleSwitch Classes="label-left" Content="Bluetooth" />
</StackPanel>

Switch

#用法

#示例

用法

示例