Button 按钮

常用的操作按钮。

基础用法

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

<script lang="ts" setup></script>
<template>
  <div class="basic block">
    <ZgButton>Default</ZgButton>
    <ZgButton type="primary">Primary</ZgButton>
    <ZgButton type="success">Success</ZgButton>
    <ZgButton type="info">Info</ZgButton>
    <ZgButton type="warning">Warning</ZgButton>
    <ZgButton type="danger">Danger</ZgButton>
  </div>

  <div class="plain block">
    <ZgButton plain>Plain</ZgButton>
    <ZgButton type="primary" plain>Primary</ZgButton>
    <ZgButton type="success" plain>Success</ZgButton>
    <ZgButton type="info" plain>Info</ZgButton>
    <ZgButton type="warning" plain>Warning</ZgButton>
    <ZgButton type="danger" plain>Danger</ZgButton>
  </div>

  <div class="round block">
    <ZgButton round>Round</ZgButton>
    <ZgButton type="primary" round>Primary</ZgButton>
    <ZgButton type="success" round>Success</ZgButton>
    <ZgButton type="info" round>Info</ZgButton>
    <ZgButton type="warning" round>Warning</ZgButton>
    <ZgButton type="danger" round>Danger</ZgButton>
  </div>

  <div class="circle block">
    <ZgButton circle> <UserOutlined /></ZgButton>
    <ZgButton type="primary" circle> <ArrowDownOutlined /> </ZgButton>
    <ZgButton type="success" circle> <ArrowUpOutlined /> </ZgButton>
    <ZgButton type="warning" circle> <LoadingOutlined /> </ZgButton>
    <ZgButton type="danger" circle> <SearchOutlined /> </ZgButton>
    <ZgButton type="info" circle> <UserOutlined /> </ZgButton>
    <ZgButton type="primary" loading> </ZgButton>
  </div>

  <div class="disable block">
    <ZgButton disabled>disabled</ZgButton>
    <ZgButton type="primary" disabled>Primary</ZgButton>
    <ZgButton type="success" disabled>Success</ZgButton>
    <ZgButton type="info" disabled>Info</ZgButton>
    <ZgButton type="warning" disabled>Warning</ZgButton>
    <ZgButton type="danger" disabled>Danger</ZgButton>
  </div>
</template>
<style>
.block {
  margin-bottom: 10px;
}
</style>

<script lang="ts" setup></script>
<template>
  <div class="basic block">
    <ZgButton>Default</ZgButton>
    <ZgButton type="primary">Primary</ZgButton>
    <ZgButton type="success">Success</ZgButton>
    <ZgButton type="info">Info</ZgButton>
    <ZgButton type="warning">Warning</ZgButton>
    <ZgButton type="danger">Danger</ZgButton>
  </div>

  <div class="plain block">
    <ZgButton plain>Plain</ZgButton>
    <ZgButton type="primary" plain>Primary</ZgButton>
    <ZgButton type="success" plain>Success</ZgButton>
    <ZgButton type="info" plain>Info</ZgButton>
    <ZgButton type="warning" plain>Warning</ZgButton>
    <ZgButton type="danger" plain>Danger</ZgButton>
  </div>

  <div class="round block">
    <ZgButton round>Round</ZgButton>
    <ZgButton type="primary" round>Primary</ZgButton>
    <ZgButton type="success" round>Success</ZgButton>
    <ZgButton type="info" round>Info</ZgButton>
    <ZgButton type="warning" round>Warning</ZgButton>
    <ZgButton type="danger" round>Danger</ZgButton>
  </div>

  <div class="circle block">
    <ZgButton circle> <UserOutlined /></ZgButton>
    <ZgButton type="primary" circle> <ArrowDownOutlined /> </ZgButton>
    <ZgButton type="success" circle> <ArrowUpOutlined /> </ZgButton>
    <ZgButton type="warning" circle> <LoadingOutlined /> </ZgButton>
    <ZgButton type="danger" circle> <SearchOutlined /> </ZgButton>
    <ZgButton type="info" circle> <UserOutlined /> </ZgButton>
    <ZgButton type="primary" loading> </ZgButton>
  </div>

  <div class="disable block">
    <ZgButton disabled>disabled</ZgButton>
    <ZgButton type="primary" disabled>Primary</ZgButton>
    <ZgButton type="success" disabled>Success</ZgButton>
    <ZgButton type="info" disabled>Info</ZgButton>
    <ZgButton type="warning" disabled>Warning</ZgButton>
    <ZgButton type="danger" disabled>Danger</ZgButton>
  </div>
</template>
<style>
.block {
  margin-bottom: 10px;
}
</style>

Button Attributes

Name	Description	Type	Default
size	尺寸	`'large'\| 'small'`	—
type	类型	`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'`	—
plain	是否为朴素按钮	`boolean`	false
round	是否为圆角按钮	`boolean`	false
circle	是否为圆形按钮	`boolean`	false
loading	是否为加载中状态	`boolean`	false
disabled	按钮是否为禁用状态	`boolean`	false
autofocus	原生 autofocus 属性	`boolean`	false
native-type	原生 type 属性	`'button'\| 'submit'\| 'reset'`	button

Button Slots

插槽名	Description
default	自定义默认内容
icon	自定义图标组件

Button 按钮 ​

基础用法 ​

Button Attributes ​

Button Slots ​

Button 按钮

基础用法

Button Attributes

Button Slots