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
--color-checkbox
全局变量覆盖颜色RGB值--color-checkbox-disabled
禁用状态全局变量覆盖颜色RGB值
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]