按钮 Button ​

通过点击发起一个命令或操作。

基础用法 ​

按钮支持 5 中基础类型，分别是 normal - 常规（默认），primary - 主要，plain - 线框，dashed - 虚线，text - 文本。

<template>
  <bp-space size="mini">
    <bp-button type="normal" status="primary">Normal</bp-button>
    <bp-button type="primary" status="primary">Primary</bp-button>
    <bp-button type="plain" status="primary">Plain</bp-button>
    <bp-button type="dashed" status="primary">Dashed</bp-button>
    <bp-button type="text" status="primary">Text</bp-button>
  </bp-space>
</template>

按钮尺寸 ​

你可以根据不同使用场景选择合适尺寸的按钮，分别有 large - 大型，normal - 常规（默认），small - 小型，mini - 迷你。

<template>
  <bp-space size="mini">
    <bp-button size="large" type="primary" status="primary">Large</bp-button>
    <bp-button size="normal" type="primary" status="primary">Normal</bp-button>
    <bp-button size="small" type="primary" status="primary">Small</bp-button>
    <bp-button size="mini" type="primary" status="primary">Mini</bp-button>
  </bp-space>
</template>

按钮形状 ​

通过 shape 属性控制 square - 矩形，round - 圆角，circle - 圆形等 3 个按钮形状。

<template>
  <bp-space size="mini">
    <bp-button shape="square" type="plain" status="primary">Square</bp-button>
    <bp-button shape="round" type="plain" status="primary">Round</bp-button>
    <bp-button :icon="IconAddLine" type="plain" shape="round" status="primary"></bp-button>
    <bp-button shape="circle" type="plain" :icon="IconSearch2Line" status="primary"></bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { IconAddLine, IconSearch2Line } from "birdpaper-icon";
</script>

按钮状态 ​

一共有 5 种按钮状态，它们通过status 属性控制，分别是normal - 普通，primary - 主要，success - 成功，warning - 警告，danger - 危险。

<template>
  <div class="btn-box" v-for="v in list">
    <bp-space size="mini">
      <bp-button type="normal" :status="v.status">{{ v.status }}</bp-button>
      <bp-button type="primary" :status="v.status">{{ v.status }}</bp-button>
      <bp-button type="plain" :status="v.status">{{ v.status }}</bp-button>
      <bp-button type="dashed" :status="v.status">{{ v.status }}</bp-button>
      <bp-button type="text" :status="v.status">{{ v.status }}</bp-button>
    </bp-space>
  </div>
</template>

<script setup lang="ts">
const list = [
  { status: "normal" },
  { status: "primary" },
  { status: "success" },
  { status: "warning" },
  { status: "danger" },
];
</script>

<style lang="less" scoped>
.btn-box {
  &:not(:first-child) {
    margin-top: 10px;
  }

  .bp-btn {
    text-transform: capitalize;
  }
}
</style>

图标按钮 ​

通过 icon 属性可以设置按钮图标，结合恰当的按钮状态，更明确表达按钮的用意。

<template>
  <bp-space size="mini">
    <bp-button :icon="IconSearch2Line" type="primary" status="primary">Search</bp-button>
    <bp-button :icon="IconShareFill" type="plain" status="primary">Share</bp-button>
    <bp-button :icon="IconDeleteBin6Line" type="dashed" status="danger">Confirm Delete</bp-button>
    <bp-button :icon="IconUploadCloud2Line" type="text" status="primary">Upload</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { IconShareFill, IconSearch2Line, IconDeleteBin6Line, IconUploadCloud2Line } from "birdpaper-icon";
</script>

禁用状态 ​

通过 disabled 属性控制按钮的禁用状态。

<template>
  <bp-space size="mini">
    <bp-button disabled type="primary" status="primary">Disabled</bp-button>
    <bp-button disabled status="primary">Disabled</bp-button>
  </bp-space>
</template>

按钮加载 ​

通过 loading 属性控制按钮的加载状态。

<template>
  <bp-space size="mini">
    <bp-button loading type="primary" status="primary">loading...</bp-button>
  </bp-space>
</template>

按钮组 ​

通过 bp-button-group 将多个同类型或同级按钮组合到一起

<template>
  <bp-space>
    <bp-button-group>
      <bp-button> <i class="ri-arrow-left-s-line"></i> Prev</bp-button>
      <bp-button>Next <i class="ri-arrow-right-s-line"></i></bp-button>
    </bp-button-group>

    <bp-button-group type="primary" status="primary">
      <bp-button>More</bp-button>
      <bp-button :icon="IconArrowDownSLine"></bp-button>
    </bp-button-group>

    <bp-button-group type="primary" block status="danger">
      <bp-button :icon="IconHeart3Fill"></bp-button>
      <bp-button :icon="IconStarFill"></bp-button>
      <bp-button :icon="IconThumbUpFill"></bp-button>
    </bp-button-group>
  </bp-space>
</template>

<script setup lang="ts">
import { IconArrowDownSLine, IconHeart3Fill, IconStarFill, IconThumbUpFill } from "birdpaper-icon";
</script>

Button 属性 ​

type
按钮类型
Enum
normal
size
按钮尺寸
Enum
normal
shape
按钮形状
Enum
square
status
按钮状态
Enum
normal
loading
是否加载
Boolean
false
disabled
是否禁用
Boolean
false
icon
按钮图标
BirdpaperIcon
-
block
是否撑满父级
Boolean
false

ButtonGroup 属性 ​

type
按钮类型
Enum
normal
size
按钮尺寸
Enum
normal
shape
按钮形状
Enum
square
status
按钮状态
Enum
normal
block
是否撑满父级
Boolean
false

Button 事件 ​

click
点击触发
none