Button 按钮
常用的按钮
基础用法
设置 type 和使用 plain、round 、dashed、 circle 属性来改变按钮的样式
vue
<template>
<div>
<re-button>Default</re-button>
<re-button type="primary">Primary</re-button>
<re-button type="success">Success</re-button>
<re-button type="warning">Warning</re-button>
<re-button type="danger">Danger</re-button>
<re-button type="info">Info</re-button>
</div>
<div class="pt-1em">
<re-button plain>Plain</re-button>
<re-button type="primary" plain>Primary</re-button>
<re-button type="success" plain>Success</re-button>
<re-button type="warning" plain>Warning</re-button>
<re-button type="danger" plain>Danger</re-button>
<re-button type="info" plain>Info</re-button>
</div>
<div class="pt-1em">
<re-button round>Round</re-button>
<re-button type="primary" round>Primary</re-button>
<re-button type="success" round>Success</re-button>
<re-button type="warning" round>Warning</re-button>
<re-button type="danger" round>Danger</re-button>
<re-button type="info" round>Info</re-button>
</div>
<div class="pt-1em">
<re-button dashed>Dashed</re-button>
<re-button type="primary" dashed>Primary</re-button>
<re-button type="success" dashed>Success</re-button>
<re-button type="warning" dashed>Warning</re-button>
<re-button type="danger" dashed>Danger</re-button>
<re-button type="info" dashed>Info</re-button>
</div>
<div class="pt-1em">
<re-button circle icon="search" />
<re-button circle icon="search-bold" type="primary" />
<re-button circle icon="arrow-right" type="success" />
<re-button circle icon="arrow-up" type="warning" />
<re-button circle icon="delete" type="danger" />
<re-button circle icon="close-short" type="info" />
<re-button circle icon="star" type="warning" dashed />
</div>
</template>禁用按钮
使用 disabled 属性来禁用按钮，接受Boolean布尔值类型
vue
<template>
<div>
<re-button disabled>Default</re-button>
<re-button type="primary" disabled>Primary</re-button>
<re-button type="success" disabled>Success</re-button>
<re-button type="warning" disabled>Warning</re-button>
<re-button type="danger" disabled>Danger</re-button>
<re-button type="info" disabled>Info</re-button>
</div>
<div class="pt-1em">
<re-button plain disabled>Plain</re-button>
<re-button type="primary" plain disabled>Primary</re-button>
<re-button type="success" plain disabled>Success</re-button>
<re-button type="warning" plain disabled>Warning</re-button>
<re-button type="danger" plain disabled>Danger</re-button>
<re-button type="info" plain disabled>Info</re-button>
</div>
<div class="pt-1em">
<re-button dashed disabled>Dashed</re-button>
<re-button type="primary" dashed disabled>Primary</re-button>
<re-button type="success" dashed disabled>Success</re-button>
<re-button type="warning" dashed disabled>Warning</re-button>
<re-button type="danger" dashed disabled>Danger</re-button>
<re-button type="info" dashed disabled>Info</re-button>
</div>
</template>链接按钮
使用 link 属性来创建链接按钮
Basic Link Button
Link Button with Icon
Disabled Link Button
vue
<template>
<p>Basic Link Button</p>
<re-button link>Default</re-button>
<re-button link type="primary">Primary</re-button>
<re-button link type="success">Success</re-button>
<re-button link type="warning">Warning</re-button>
<re-button link type="danger">Danger</re-button>
<re-button link type="info">Info</re-button>
<p>Link Button with Icon</p>
<re-button link icon="search-bold">Search</re-button>
<re-button type="danger" link icon="delete">Delete</re-button>
<p>Disabled Link Button</p>
<re-button link disabled>Default</re-button>
<re-button link type="primary" disabled>Primary</re-button>
<re-button link type="success" disabled>Success</re-button>
<re-button link type="warning" disabled>Warning</re-button>
<re-button link type="danger" disabled>Danger</re-button>
<re-button link type="info" disabled>Info</re-button>
</template>文字按钮
使用 text 和 bg 属性来创建文字按钮
Basic Text Button
Text Button with icon
Text Button with padding
Text Button with padding and background
Disabled Text Button
Disabled Text Button with padding
Disabled Text Button with padding and background
vue
<template>
<p>Basic Text Button</p>
<re-button text>Default</re-button>
<re-button text type="primary">Primary</re-button>
<re-button text type="success">Success</re-button>
<re-button text type="warning">Warning</re-button>
<re-button text type="danger">Danger</re-button>
<re-button text type="info">Info</re-button>
<p>Text Button with icon</p>
<re-button text icon="search">Default</re-button>
<re-button text icon="search-bold" type="primary">Primary</re-button>
<re-button text icon="delete" type="danger">Danger</re-button>
<re-button text icon="close" type="info">Info</re-button>
<p>Text Button with padding</p>
<re-button text padding>Default</re-button>
<re-button text padding type="primary">Primary</re-button>
<re-button text padding type="success">Success</re-button>
<re-button text padding type="warning">Warning</re-button>
<re-button text padding type="danger">Danger</re-button>
<re-button text padding type="info">Info</re-button>
<p>Text Button with padding and background</p>
<re-button text bg>Default</re-button>
<re-button text bg type="primary">Primary</re-button>
<re-button text bg type="success">Success</re-button>
<re-button text bg type="warning">Warning</re-button>
<re-button text bg type="danger">Danger</re-button>
<re-button text bg type="info">Info</re-button>
<p>Disabled Text Button</p>
<re-button text disabled>Default</re-button>
<re-button text disabled type="primary">Primary</re-button>
<re-button text disabled type="success">Success</re-button>
<re-button text disabled type="warning">Warning</re-button>
<re-button text disabled type="danger">Danger</re-button>
<re-button text disabled type="info">Info</re-button>
<p>Disabled Text Button with padding</p>
<re-button text padding disabled>Default</re-button>
<re-button text padding disabled type="primary">Primary</re-button>
<re-button text padding disabled type="success">Success</re-button>
<re-button text padding disabled type="warning">Warning</re-button>
<re-button text padding disabled type="danger">Danger</re-button>
<re-button text padding disabled type="info">Info</re-button>
<p>Disabled Text Button with padding and background</p>
<re-button text bg disabled>Default</re-button>
<re-button text bg disabled type="primary">Primary</re-button>
<re-button text bg disabled type="success">Success</re-button>
<re-button text bg disabled type="warning">Warning</re-button>
<re-button text bg disabled type="danger">Danger</re-button>
<re-button text bg disabled type="info">Info</re-button>
</template>图标按钮
使用 icon 创建图标按钮, 可以传 Rappel-UI 的 icon 图标库的图标组件名称或对象，也可以传一个第三方图标库的字符串，将会用作<i>标签的class属性值
String Icon Button
Component Icon Button
Circle Text Icon Button
Other String Icon Button
vue
<template>
<p>String Icon Button</p>
<re-button type="primary" icon="search">Primary</re-button>
<re-button type="success" icon="search-bold">Success</re-button>
<re-button type="warning" icon="arrow-forward">Warning</re-button>
<re-button type="danger" icon="delete">Danger</re-button>
<re-button type="info" icon="close">Info</re-button>
<p>Component Icon Button</p>
<re-button type="primary" title="search" :icon="Search"></re-button>
<re-button type="success" title="search" :icon="SearchBold"></re-button>
<re-button type="warning" title="previous" :icon="ArrowForward"></re-button>
<re-button type="danger" title="delete" :icon="Delete"></re-button>
<re-button type="info" title="close" :icon="Close"></re-button>
<p>Circle Text Icon Button</p>
<re-button plain circle title="collect" icon="star"></re-button>
<re-button text circle title="copy"><Copy size="1.25em" /></re-button>
<re-button
text
circle
:title="isCollected ? 'uncollect' : 'collect'"
:icon="isCollected ? StarFill : Star"
@click.stop="toggle()"
></re-button>
<p>Other String Icon Button</p>
<re-button type="primary" icon="other-icon-lib">Primary</re-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
Search,
SearchBold,
Delete,
Close,
ArrowForward,
Copy,
Star,
StarFill
} from '@rappel-ui/svg-icons'
const isCollected = ref<boolean>(false)
const toggle = () => {
isCollected.value = !isCollected.value
}
</script>加载状态按钮
使用 loading 和 loading-icon 属性来设置按钮加载状态和定义加载图标
vue
<template>
<re-button type="primary" loading disabled>Default</re-button>
<re-button type="primary" loading loading-icon="close" disabled>String</re-button>
<re-button type="primary" loading :loading-icon="Star" disabled>Component</re-button>
</template>
<script lang="ts" setup>
import { Star } from '@rappel-ui/svg-icons'
</script>尺寸
除了默认尺寸，还可使用 size 属性改变按钮的尺寸，提供 large、small、mini 三种选择
Common Button Sizes
Round Button Sizes
Circle Button Sizes
vue
<template>
<p>Common Button Sizes</p>
<re-button size="large">Large</re-button>
<re-button>Default</re-button>
<re-button size="small">Small</re-button>
<re-button size="mini">Mini</re-button>
<p>Round Button Sizes</p>
<re-button size="large" round>Large</re-button>
<re-button round>Default</re-button>
<re-button size="small" round>Small</re-button>
<re-button size="mini" round>Mini</re-button>
<p>Circle Button Sizes</p>
<re-button size="large" icon="search-bold" circle />
<re-button icon="search-bold" circle />
<re-button icon="search-bold" size="small" circle />
<re-button icon="search-bold" size="mini" circle />
</template>按钮组
使用 <re-button-group> 组件来进行按钮分组
Basic Button Group
Round Button Group
Vertical Button Group
vue
<template>
<p>Basic Button Group</p>
<re-button-group>
<re-button icon="arrow-forward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-backward"></re-button>
</re-button-group>
<re-button-group class="ml-2em" type="primary">
<re-button icon="arrow-forward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-backward"></re-button>
</re-button-group>
<p>Round Button Group</p>
<re-button-group type="primary">
<re-button icon="arrow-forward" round></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-backward" round></re-button>
</re-button-group>
<p>Vertical Button Group</p>
<re-button-group type="primary" direction="vertical">
<re-button icon="arrow-upward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-downward"></re-button>
</re-button-group>
</template>Button Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | — |
| size | 尺寸 | 'large' | 'small' | 'mini' | — |
| disabled | 是否禁用按钮 | boolean | — |
| link | 是否为链接按钮 | boolean | — |
| text | 是否为文字按钮 | boolean | — |
| padding | 文字按钮是否有内边距 | boolean | — |
| bg | 文字按钮是否同时有内边距和背景 | boolean | — |
| plain | 是否为朴素按钮 | boolean | — |
| round | 是否为圆角按钮 | boolean | — |
| circle | 是否为圆形按钮 | boolean | — |
| dashed | 是否为虚线按钮 | boolean | — |
| loading | 是否为加载中状态 | boolean | — |
| loading-icon | 自定义加载中图标 | string | Component | Loading |
| icon | 前缀图标 | string | Component | — |
| autofocus | 原生 autofocus 属性 | boolean | — |
| native-type | 原生 type 属性 | 'button'| 'submit' | 'reset' | button |
Button Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
| loading | 自定义加载中图标 |
| icon | 自定义前缀图标 |
Button Exposes
| 属性名 | 说明 | 类型 |
|---|---|---|
| ref | 按钮的html元素 | Ref<HTMLButtonElement> |
ButtonGroup Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 组内按钮类型，优先级低于按钮自身type属性 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | — |
| size | 组内按钮尺寸，优先级低于按钮自身size属性 | 'large' | 'small' | 'mini' | — |
| direction | 按钮组的布局方向 | 'horizontal' | 'vertical' | horizontal |
ButtonGroup Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义按钮组内容 |