Radio
全局变量 --indent-radio
改变label文字左内边距,原本是用 text-indent
属性实现。但在Safari中使用 ::before
的元素不支持 text-indent
,遂改用 padding-left
来实现。默认值是1em(label紧贴input)
div(style="--indent-radio: 20px")
span.na-radio
input#java.na-input(type="radio" name="lang" title="java")
label.na-radio-label(for="java") Java
span.na-radio
input#kotlin.na-input(type="radio" name="lang" title="kotlin")
label.na-radio-label(for="kotlin") Kotlin
注意,radio捆绑了 <label>
,你必须携带它,绑定[for]
时label被点击时也会触发选择或反选
## disabled
div(style={'--indent-radio': '20px'})
span.na-radio
input#HTTP.na-radio(type="radio" title="HTTP" checked disabled)
label.na-radio-label(for="HTTP") HTTP
span.na-radio(data-primary="success")
input#HTTPS.na-radio(type="radio" title="HTTPS" disabled)
label.na-radio-label(for="HTTPS") HTTPS
## custom style
--color-radio
全局变量覆盖颜色RGB值--color-radio-disabled
禁用状态全局变量覆盖颜色RGB值
div(style="--indent-radio: 20px")
span.na-radio
input#meituan.na-input(
type="radio"
name="lunch"
style={'--color-radio': 'var(--gold-6)'}
title="meituan"
)
label.na-radio-label(for="meituan") 美团
span.na-radio
input#eleme.na-input(
type="radio"
name="lunch"
style={'--color-radio': 'var(--blue-6)'}
checked
title="eleme"
)
label.na-radio-label(for="eleme") 饿了么
### hide label
label为空即可不显示
each color, i in colors
span.na-radio
input.na-color(
type="radio"
checked=i==0
name="radio-color"
style={'--color-radio': `var(--${color}-6)`}
title=color
)
label.na-radio-label
如果你只是需要label无法点击,只有单选框能被点击,可以不传入 [for]