按钮 Button

按钮是一种命令组件，可发起一个即时操作。

基本用法

按钮分为：基本按钮、线形按钮和文本按钮三种。你可以使用 type 属性配置他们。

<template>
  <div class="box">
    <sb-button>primary</sb-button>
    <sb-button type="outline">outline</sb-button>
    <sb-button type="text">text</sb-button>
  </div>
</template>


<style scoped>
.box > *:not(:first-child) {
  margin-left: 10px;
}
</style>

状态配置

按钮分为： default，secondary，success，warning，danger 五种状态，你可以使用 status 属性配置他们。你也可以通过 class 自己配置你需要的色彩样式。

💡 说明

默认的状态主题包含正常状态、hover 状态和 disabled 状态的样式

<template>
  <div>
    <div class="box">
      <sb-button> default </sb-button>
      <sb-button status="warning"> warning </sb-button>
      <sb-button status="danger"> danger </sb-button>
      <sb-button status="success"> success </sb-button>
      <sb-button status="secondary"> secondary </sb-button>
    </div>
    <div class="box">
      <sb-button type="outline"> default </sb-button>
      <sb-button status="warning" type="outline"> warning </sb-button>
      <sb-button status="danger" type="outline"> danger </sb-button>
      <sb-button status="success" type="outline"> success </sb-button>
      <sb-button status="secondary" type="outline"> secondary </sb-button>
    </div>
    <div class="box">
      <sb-button type="text"> default </sb-button>
      <sb-button status="warning" type="text"> warning </sb-button>
      <sb-button status="danger" type="text"> danger </sb-button>
      <sb-button status="success" type="text"> success </sb-button>
      <sb-button status="secondary" type="text"> secondary </sb-button>
    </div>
  </div>
</template>


<style scoped>
.box {
  margin: 10px;
}
.box > *:not(:first-child) {
  margin-left: 10px;
}
</style>

尺寸配置

按钮分为：小、正常、大四种尺寸。高度分别为：28px/32px/36px。你可以使用 size 属性配置他们。你也可以通过 class 自己配置你需要的尺寸样式。

<template>
  <div class="box">
    <sb-button size="small"> small </sb-button>
    <sb-button> default </sb-button>
    <sb-button size="large"> large </sb-button>
  </div>
</template>


<style scoped>
.box > *:not(:first-child) {
  margin-left: 10px;
}
</style>

自适应长度

设置 long 属性可以让按钮宽度随着容器宽度进行适配。

<template>
  <div class="box">
    <sb-button long> long </sb-button>
  </div>
</template>

圆角

设置 round 属性可以让按钮呈现全圆角样式，你也可以通过 class 自己配置你需要的圆角样式。

<template>
  <div class="box">
    <sb-button round>round</sb-button>
    <sb-button type="outline" round>outline</sb-button>
    <sb-button type="text" round>text</sb-button>
  </div>
</template>


<style scoped>
.box > *:not(:first-child) {
  margin-left: 10px;
}
</style>

禁用

设置 disabled 属性可以禁用按钮。

<template>
  <div>
    <div class="box">
      <sb-button disabled> default </sb-button>
      <sb-button status="warning" disabled> warning </sb-button>
      <sb-button status="danger" disabled> danger </sb-button>
      <sb-button status="success" disabled> success </sb-button>
      <sb-button status="secondary" disabled> secondary </sb-button>
    </div>
    <div class="box">
      <sb-button type="outline" disabled> default </sb-button>
      <sb-button status="warning" type="outline" disabled> warning </sb-button>
      <sb-button status="danger" type="outline" disabled> danger </sb-button>
      <sb-button status="success" type="outline" disabled> success </sb-button>
      <sb-button status="secondary" type="outline" disabled> secondary </sb-button>
    </div>
    <div class="box">
      <sb-button type="text" disabled> default </sb-button>
      <sb-button status="warning" type="text" disabled> warning </sb-button>
      <sb-button status="danger" type="text" disabled> danger </sb-button>
      <sb-button status="success" type="text" disabled> success </sb-button>
      <sb-button status="secondary" type="text" disabled> secondary </sb-button>
    </div>
  </div>
</template>


<style scoped>
.box {
  margin: 10px;
}
.box > *:not(:first-child) {
  margin-left: 10px;
}
</style>

API

`<button>` Props

参数名	描述	类型	默认值
type	按钮的类型	'primary' \| 'outline'\| 'text'	primary
status	按钮的状态	'default' \| 'warning' \| 'danger' \| 'success' \| 'secondary'	default
size	按钮的尺寸	'large' \| 'small' \| 'default'	default
round	是否圆角	boolean	false
disabled	是否禁用	boolean	false
long	是否自适应宽度	boolean	false

`<button>` Slots

插槽名	描述	参数
default	放置按钮里展示的内容	-

按钮 Button #

基本用法 #

状态配置 #

尺寸配置 #

自适应长度 #

圆角 #

禁用 #

API #

<button> Props #

<button> Slots #