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

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]