开关`ToggleSwitch`

直接开启或关闭一项设置。滑块的位置与主题色共同传达当前状态。

亲手试一试。

01 / LIVE PREVIEW

接收更新

自动备份

STATES / 示例状态

关闭开启

在左侧预览中体验这枚组件。

INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

let mut enabled = use_signal(|| true);
rsx! {
    ToggleSwitch {
        checked: enabled(),
        aria_label: Some("接收更新".to_string()),
        ontoggle: move |_| enabled.toggle(),
    }
}

主要属性

03 / PROPERTIES

属性 / 类型	默认值	说明
`checked`bool	必填	当前开关状态。
`ontoggle`Callback<()>	必填	点击后通知父组件切换状态。
`aria_label`Option<String>	None	开关的无障碍名称。

操作方式

04 / INTERACTION

Tab移动焦点Space / Enter切换开关

YGGDRASIL · 每一个细节，都有回应。src/components/forms.rs