badge
primarysuccessdangerwarning
each primary in ['primary', 'success', 'danger', 'warning']
span.na-badge(data-primary=primary)= primary ## data-processing
processing
span.na-badge(data-processing style="font-size: 16px") processing ## custom style
- 全局变量
--color-badge可以自定义圆点和波纹颜色RGB值 - 全局变量
--weight-badge-processing调整 波浪大小 - 全局变量
--indent-badge调整文字左内边距
这原本是用text-indent属性实现,但是在Safari中使用::before的元素不支持text-indent
debug
span.na-badge(data-processing data-primary="danger" style={
"--indent-badge": "30px",
"font-size": "20px",
"--weight-badge-processing": "6px",
"--color-badge": "var(--primary-7)"
})
span.na-code.na-font-mono debug - 全局变量
--margin-badge圆点的边距,可以用来反向调整圆点大小
span.na-tag(data-primary="danger" style={
"--indent-badge": "30px",
"--margin-badge": "6px",
"border-style": "dashed"
})
span.na-badge(data-processing)
svg(
role="img"
aria-label="bug"
width=30
height=30
style="vertical-align: middle"
)