checkbox

这里实现使用了 path() 绘制,如果你的浏览器不支持会被降级,样式会有细微区别

全局变量 --indent-checkbox 改变label文字左内边距,原本是用 text-indent 属性实现。但在Safari中使用 ::before 的元素不支持 text-indent,遂改用 padding-left 来实现。默认值是1em(label紧贴input)

span.na-checkbox(style="--indent-checkbox: 2em")
    input#hello.na-input(type="checkbox" title="world")
    label.na-checkbox-label(for="hello") world

注意,checkbox捆绑<label> ,你必须携带它,绑定[for]时label被点击时也会触发选择或反选

## disabled

div(style={'--indent-checkbox': '20px'})
    span.na-checkbox
        input#HTTP.na-input(type="checkbox" title="HTTP" disabled)
        label.na-checkbox-label(for="HTTP") HTTP
    span.na-checkbox(data-primary="success")
        input#HTTPS.na-input(type="checkbox" title="HTTPS" checked disabled)
        label.na-checkbox-label(for="HTTPS") HTTPS

## data-indeterminate

这个样式设计来自于 ui5 check-box

span.na-checkbox(
    data-indeterminate
    style="--indent-checkbox: 20px"
)
    input#Superposition.na-input(
        type="checkbox"
        onchange=function(){
            this.parentElement.removeAttribute('data-indeterminate')
        }
        title="Superposition"
    )
    label.na-checkbox-label(for="Superposition") 半信半疑

注意:[data-indeterminate] 在 checked与否 的不同状态下 观感并不相同。

在这个示例里,初始没有选择,选择后清除[data-indeterminate],但你可以不

## data-marker="-"

预设了另一个checked符号,使用 data-marker="-" 启用,代替原先的✔

它一般放在列表表头,用来描述只选中了一部分

span.na-checkbox(
    data-marker="-"
    style="--indent-checkbox: 20px"
)
    input#DashAsMark.na-input(
        type="checkbox"
        title="DashAsMark"
        checked
    )
    label.na-checkbox-label(for="DashAsMark") 部分选择

## custom style

marker钩号或破折号由 label::after 实现,可以自定义添加你需要的✔图形

span.na-checkbox(
    data-marker="*"
    style={
    '--color-checkbox': 'var(--blue-6)',
    '--color-checkbox-disabled': 'var(--blue-2)',
    '--indent-checkbox': '20px',
    color: 'rgb(var(--blue-6))'
})
    input#BlueTIMBox.na-input(
        type="checkbox"
        title="BlueTIMBox"
        checked
        disabled
    )
    label.na-checkbox-label(for="BlueTIMBox") Tim

style(lang="stylus").
    .na-checkbox
        &[data-marker="*"]
            &>input:checked+^[0]-label::after
                content '*'
                font-size 18px
                color rgb(var(--white))

### hide label

label为空即可不显示

span.na-checkbox(data-indeterminate)
    input.na-input(type="checkbox" title="饿死了")
    label.na-checkbox-label

如果你只是需要label无法点击,只有单选框能被点击,可以不传入 [for]