SlunceUI

Appearance

On this page

Button 按钮 ​

常见的操作按钮

基础用法 ​

基础的按钮用法

使用 type、plain 和 round 属性来定义 Button 的样式。

显示代码
html
<div>
  <sl-button>默认按钮</sl-button>
  <sl-button type="primary">主要按钮</sl-button>
  <sl-button type="success">成功按钮</sl-button>
  <sl-button type="info">信息按钮</sl-button>
  <sl-button type="warning">警告按钮</sl-button>
  <sl-button type="danger">危险按钮</sl-button>
</div>
<div style='margin-top:20px'>
  <sl-button plain>默认按钮</sl-button>
  <sl-button plain type="primary">主要按钮</sl-button>
  <sl-button plain type="success">成功按钮</sl-button>
  <sl-button plain type="info">信息按钮</sl-button>
  <sl-button plain type="warning">警告按钮</sl-button>
  <sl-button plain type="danger">危险按钮</sl-button>
</div>
<div style='margin-top:20px'>
  <sl-button round>默认按钮</sl-button>
  <sl-button round type="primary">主要按钮</sl-button>
  <sl-button round type="success">成功按钮</sl-button>
  <sl-button round type="info">信息按钮</sl-button>
  <sl-button round type="warning">警告按钮</sl-button>
  <sl-button round type="danger">危险按钮</sl-button>
</div>

禁用状态 ​

按钮不可用状态

你可以使用 disabled 属性来定义按钮是否可用，它接受一个 Boolean 值。

显示代码
html
<div>
  <div>
    <sl-button disabled>默认按钮</sl-button>
    <sl-button disabled type="primary">主要按钮</sl-button>
    <sl-button disabled type="success">成功按钮</sl-button>
    <sl-button disabled type="info">信息按钮</sl-button>
    <sl-button disabled type="warning">警告按钮</sl-button>
    <sl-button disabled type="danger">危险按钮</sl-button>
  </div>
  <div style='margin-top:20px'>
    <sl-button plain disabled>默认按钮</sl-button>
    <sl-button type="primary" plain disabled>主要按钮</sl-button>
    <sl-button type="success" plain disabled>成功按钮</sl-button>
    <sl-button type="info" plain disabled>信息按钮</sl-button>
    <sl-button type="warning" plain disabled>警告按钮</sl-button>
    <sl-button type="danger" plain disabled>危险按钮</sl-button>
  </div>
</div>

文字按钮 ​

没有边框和背景色的按钮

你可以使用 bg 属性来定义按钮的背景是否常亮，它接受一个 Boolean 值。

显示代码
html
<div>
  <div>
    <sl-button disabled>默认按钮</sl-button>
    <sl-button disabled type="primary">主要按钮</sl-button>
    <sl-button disabled type="success">成功按钮</sl-button>
    <sl-button disabled type="info">信息按钮</sl-button>
    <sl-button disabled type="warning">警告按钮</sl-button>
    <sl-button disabled type="danger">危险按钮</sl-button>
  </div>
  <div style='margin-top:20px'>
    <sl-button plain disabled>默认按钮</sl-button>
    <sl-button type="primary" plain disabled>主要按钮</sl-button>
    <sl-button type="success" plain disabled>成功按钮</sl-button>
    <sl-button type="info" plain disabled>信息按钮</sl-button>
    <sl-button type="warning" plain disabled>警告按钮</sl-button>
    <sl-button type="danger" plain disabled>危险按钮</sl-button>
  </div>
</div>

不同尺寸 ​

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸

额外的尺寸：medium、small、mini，通过设置 size 属性来配置它们。

显示代码
html
<div>
  <sl-button>默认按钮</sl-button>
  <sl-button size="medium">中等按钮</sl-button>
  <sl-button size="small">小型按钮</sl-button>
  <sl-button size="mini">超小按钮</sl-button>
</div>
<div style="margin-top: 20px">
  <sl-button round>默认按钮</sl-button>
  <sl-button size="medium" round>中等按钮</sl-button>
  <sl-button size="small" round>小型按钮</sl-button>
  <sl-button size="mini" round>超小按钮</sl-button>
</div>

自定义颜色 ​

您可以自定义按钮颜色。

我们将自动计算 hover 和 active 颜色。

显示代码
html
<div>
  <sl-button type="custom" color="#626aef">Default</sl-button>
  <sl-button type="custom" color="#626aef" plain>Plain</sl-button>
  <sl-button type="custom" color="#626aef" disabled>Disabled</sl-button>
  <sl-button type="custom" color="#626aef" plain disabled>Plain Disabled</sl-button>
</div>

Button API ​

属性 ​

参数说明类型可选值默认值
size尺寸stringmedium / small / mini-
type类型stringprimary / success / warning / danger / info-
plain是否为朴素按钮booleanfalse
round是否圆形按钮boolean-false
disabled是否禁用状态boolean-false
text是否文字按钮boolean-false
bg是否显示文字按钮背景颜色boolean-false
color自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色string--