switch

span.na-switch
    input.na-input(type="checkbox" title="hello" checked)
    i.na-switch-mover
    span.na-switch-slot

注意，switch不捆绑<label> 标签，但是需要跟随：

• .na-switch-mover 动子
• .na-switch-slot 滑槽

事实上，它们其中之一可以被换成 <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.na-switch-slot[for=#id]，

可以添加 [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] 影响

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)",
    }
)
    input#oxalis.na-input(type="checkbox" title="oxalis")
    span.na-switch-mover.oxalis-switch-mover ☘
    lable.na-switch-slot(for="oxalis")

style(lang="stylus").
    .oxalis-switch>input:checked+.oxalis-switch-mover
        transform rotate(360deg)