button
button.na-button(onclick=function(){
window.dispatchEvent(
new CustomEvent('na-message', { detail: '☘' })
)
}) 按
## .sm
& .lg
button.na-button.sm 更小
button.na-button.lg 更大
## data-primary
button.na-button[data-primary]
这个属性需要启用后才能继承主题和拥有某些局部样式
button.na-button(data-primary) 导出
button.na-button(data-primary='success') 创建
## disabled
button.na-button(data-primary disabled) 导入
button.na-button(data-primary='danger' disabled) 删除
## data-square
& data-round
方块的按钮,以及圆按钮
each k in ['square', 'round']
button.na-button(
title="关机"
data-primary="danger"
data-round=k=='round'
data-square=k=='square'
style="padding: 5px; margin: 5px"
onclick=window.close
)
svg(
data-icon='interactive-button/outline/poweroff'
width=22
height=22
)
## custom style
全局变量控制内边距
--padding-horizonal-button
纵向内边距--padding-vertical-button
横向内边距
以下局部变量可以自定义颜色RGB值
背景色设置的饱和度高时 最好同时使用 [data-primary]
让文字颜色预设白色
--color-button
按钮文字颜色--color-button-disabled
禁用状态按钮文字颜色--background-color-button
按钮背景颜色--background-color-button-focus
焦点状态按钮背景颜色--background-color-button-disabled
禁用状态按钮背景颜色
## upload
配合 input[type=file].na-input
使用即可
上传按钮并不捆绑 <label>
,绑定[for]
时label被点击时也会触发系统文件选择
input.na-input.na-button#uploader(
type="file"
data-primary
onchange=function(e){
this.nextElementSibling.innerText = e.target.files[0].name
}
)
label(title="附件" for="uploader") 还未选择附件
### prefix
.na-input-wrapper(data-primary)
svg.na-input-prefix(width=18 height=18)
input.na-input.na-button(
type="file"
data-primary
)
- 上传按钮不支持波纹点击效果
- 上传按钮不继承容器主题色