Appearance

Return to top
On this page

Button 按钮

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。





显示代码
vue
<template>
  <div>
    <n-button>默认按钮</n-button>
    <n-button type="primary">主要按钮</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="text">文字按钮</n-button>
    <br />
    <br />
    <n-button plain>朴素按钮</n-button>
    <n-button type="primary" plain>主要按钮</n-button>
    <n-button type="success" plain>成功按钮</n-button>
    <n-button type="info" plain>信息按钮</n-button>
    <n-button type="warning" plain>警告按钮</n-button>
    <n-button type="danger" plain>危险按钮</n-button>
    <br />
    <br />
    <n-button round>圆角按钮</n-button>
    <n-button type="primary" round>主要按钮</n-button>
    <n-button type="success" round>成功按钮</n-button>
    <n-button type="info" round>信息按钮</n-button>
    <n-button type="warning" round>警告按钮</n-button>
    <n-button type="danger" round>危险按钮</n-button>
  </div>
</template>

<style>
.n-button {
  margin-right: 10px;
}
</style>

禁用状态



显示代码
vue
<template>
  <div>
    <n-button disabled>禁用按钮</n-button>
    <n-button type="primary" disabled>主要按钮</n-button>
    <n-button type="success" disabled>成功按钮</n-button>
    <n-button type="info" disabled>信息按钮</n-button>
    <n-button type="warning" disabled>警告按钮</n-button>
    <n-button type="danger" disabled>危险按钮</n-button>
    <br />
    <br />
    <n-button disabled>禁用按钮</n-button>
    <n-button type="primary" disabled plain>主要按钮</n-button>
    <n-button type="success" disabled plain>成功按钮</n-button>
    <n-button type="info" disabled plain>信息按钮</n-button>
    <n-button type="warning" disabled plain>警告按钮</n-button>
    <n-button type="danger" disabled plain>危险按钮</n-button>
  </div>
</template>

<style>
.n-button {
  margin-right: 10px;
}
</style>

调整按钮尺寸

显示代码
vue
<template>
  <div>
    <n-button>默认按钮</n-button>
    <n-button size="medium">中型按钮</n-button>
    <n-button size="small">小型按钮</n-button>
    <n-button size="mini">超小按钮</n-button>
  </div>
</template>

<style>
.n-button {
  margin-right: 10px;
}
</style>

图标、图标位置及图标尺寸

可以通过配置icon属性和 iconPosition来确定图标及图标位置

使用iconSize来确定图标尺寸


显示代码
vue
<template>
  <div>
    <n-button icon="cloud-download">下载</n-button>
    <n-button icon="like">赞</n-button>
    <n-button icon="heart" iconPosition="right">喜欢</n-button>
    <n-button icon="delete" iconPosition="right">删除</n-button>
    <br />
    <n-button icon="cloud-download" iconSize="10" />
    <n-button icon="like" iconSize="20" />
    <n-button icon="heart" round iconPosition="right" iconSize="30" />
    <n-button
      icon="delete"
      round
      iconPosition="right"
      type="danger"
      iconSize="40"
    />
  </div>
</template>

<style>
.n-button {
  margin-right: 10px;
}
</style>

API

参数说明类型可选值默认值
type按钮类型string['primary', 'success', 'info', 'warning', 'danger', 'text']——
size按钮大小string['medium', 'small', 'mini' ]——
plain是否朴素按钮boolean————
round是否圆角按钮boolean————
disabled是否禁用boolean————
icon图标名stringIcon——
iconPosition图标位置string['right','left' ]'left'
iconSize图标 icon 大小,传入 25 就是 25pxstring/number————