switch
span.na-switch
input.na-input(type="checkbox" title="hello" checked)
i.na-switch-mover
span.na-switch-slot.na-switch-mover动子.na-switch-slot滑槽
事实上，它们其中之一可以被换成 <label for="id"> 或者整个套上 <label>，这取决于你想点击那一部分才可以切换开关状态，默认是动子
## .sm
span.na-switch.sm
input.na-input(type="checkbox" title="small")
i.na-switch-mover
span.na-switch-slot ## disabled
span.na-switch
input.na-input(
type="checkbox"
title="hibit"
checked disabled
)
i.na-switch-mover
span.na-switch-slot
span.na-switch.sm
input.na-input(
type="checkbox"
title="small-hibit"
disabled
)
i.na-switch-mover
span.na-switch-slot ## data-wider-trigger
默认情况下点击动子才可以切换开关。如果你不想借助 label[for]，
可以添加 [data-wider-trigger] 属性，届时点击开关整体时也可以被切换，达到一样的效果。
span.na-switch(data-wider-trigger)
input.na-input(
type="checkbox"
title="wider trigger conditions"
checked
)
i.na-switch-mover
span.na-switch-slot## custom style
动子里可以放置字符/icon，也可以有多个动子
- 全局变量
--box-shadow-width-switch可以修改阴影效果范围（默认值为全局变量--padding-switch，见下 ）
与颜色有关的全局变量RGB值有：
--color-switch关闭时颜色--color-switch:checked开启时主题颜色--color-switch:disabled禁用状态颜色--color-switch:checked:disabled禁用状态开启时主题颜色--color-switch-mover动子颜色--box-shadow-color-switch阴影主题颜色--box-shadow-color-switch:checked开启时阴影颜色
描述中的占点主题色就会被 [data-primary] 影响
label.na-form-item
span 空调
.na-input-wrapper
span.na-switch(data-primary="danger" style={
"--box-shadow-width-switch": "16px",
"--box-shadow-color-switch:checked": "var(--blue-5)"
})
input.na-input(type="checkbox" title="fire")
div.na-switch-mover 🔥
div.na-switch-slot- 全局变量
--size-switch开关尺寸 - 全局变量
--padding-switch开关与开关动子的距离
span.na-switch.oxalis-switch(
style={
["--size-switch"]: "48px",
["--padding-switch"]: "4px",
["--color-switch:checked"]: "var(--lime-6)",
["--color-switch:checked:disabled"]: "var(--lime-3)",
["--color-switch"]: "var(--gold-3)",
["--color-switch-mover"]: "var(--lime-1)",
}
)
input#oxalis.na-input(type="checkbox" title="oxalis")
span.na-switch-mover.oxalis-switch-mover ☘
label.na-switch-slot(for="oxalis")
style(lang="stylus").
.oxalis-switch>input:checked+.oxalis-switch-mover
transform rotate(360deg)