按钮

使用方式

常用type类型取值有：

type	备注	样式	代码
confirm	确认		<n-button type="confirm"></n-button>
add	新增		<n-button type="add"></n-button>
edit	编辑		<n-button type="edit"></n-button>
search	查询		<n-button type="search"></n-button>
upload	上传		<n-button type="upload"></n-button>
copy	复制		<n-button type="copy"></n-button>
preview	查看		<n-button type="preview"></n-button>
spread	推广		<n-button type="spread"></n-button>
qrcode	二维码		<n-button type="qrcode"></n-button>
download	下载		<n-button type="download"></n-button>
export	导出		<n-button type="export"></n-button>
poster	海报		<n-button type="poster"></n-button>
reset	重置		<n-button type="reset"></n-button>
cancel	取消		<n-button type="cancel"></n-button>
delete	删除		<n-button type="delete"></n-button>
charts	报表		<n-button type="charts"></n-button>
review	审核		<n-button type="review"></n-button>

代码演示

常用操作按钮

查看代码

<n-button type="confirm"></n-button>
<n-button type="add"></n-button>
<n-button type="edit"></n-button>
<n-button type="search"></n-button>
<n-button type="upload"></n-button>
<n-button type="copy"></n-button>
<n-button type="preview"></n-button>
<n-button type="spread"></n-button>
<n-button type="qrcode"></n-button>
<n-button type="download"></n-button>
<n-button type="export"></n-button>
<n-button type="poster"></n-button>
<n-button type="reset"></n-button>
<n-button type="cancel"></n-button>
<n-button type="delete"></n-button>
<n-button type="charts"></n-button>
<n-button type="review"></n-button>

通用按钮

查看代码

<n-button type="primary"></n-button>
<n-button type="secondary"></n-button>
<n-button type="success"></n-button>
<n-button type="info"></n-button>
<n-button type="warning"></n-button>
<n-button type="danger"></n-button>
<n-button type="dark"></n-button>

outline按钮

查看代码

<n-button type="primary" kind="outline"></n-button>
<n-button type="secondary" kind="outline"></n-button>
<n-button type="success" kind="outline"></n-button>
<n-button type="info" kind="outline"></n-button>
<n-button type="warning" kind="outline"></n-button>
<n-button type="danger" kind="outline"></n-button>
<n-button type="dark" kind="outline"></n-button>

light按钮

查看代码

<n-button type="primary" kind="light"></n-button>
<n-button type="secondary" kind="light"></n-button>
<n-button type="success" kind="light"></n-button>
<n-button type="info" kind="light"></n-button>
<n-button type="warning" kind="light"></n-button>
<n-button type="danger" kind="light"></n-button>
<n-button type="dark" kind="light"></n-button>

link按钮

查看代码

<n-button type="primary" kind="link"></n-button>
<n-button type="secondary" kind="link"></n-button>
<n-button type="success" kind="link"></n-button>
<n-button type="info" kind="link"></n-button>
<n-button type="warning" kind="link"></n-button>
<n-button type="danger" kind="link"></n-button>
<n-button type="dark" kind="link"></n-button>

text按钮

查看代码

<n-button type="primary" kind="text"></n-button>
<n-button type="secondary" kind="text"></n-button>
<n-button type="success" kind="text"></n-button>
<n-button type="info" kind="text"></n-button>
<n-button type="warning" kind="text"></n-button>
<n-button type="danger" kind="text"></n-button>
<n-button type="dark" kind="text"></n-button>

自定义使用

如果不想用上述常用的按钮，则可以通过定义type、kind、icon(驼峰命名)来使用自定义风格的按钮
如：
更多图标参考

<n-button type="primary" kind="outline" icon="LockOutlined">自定义文字</n-button>

颜色风格type有以下几种：

type	备注
primary	主色
secondary	副色
success	成功色
info	信息色
warning	警告色
danger	错误色
dark	强调色

kind取值有：

kind	备注
primary	实心主色
outline	空心线框
light	实心浅色
link	链接
text	文字