Button 按钮

<button> 标签的封装

示例

基础用法

<Button class="rounded-full">👌OK</Button>
<Button class="rounded" color="primary">
  <Icon class="mr-1" name="check" />确定
</Button>
<Button color="primary-plain">取消</Button>
<Button color="success">成功</Button>
<Button color="success-plain">成功</Button>
<Button color="warning">警告</Button>
<Button color="warning-plain">警告</Button>
<Button color="danger">危险</Button>
<Button color="danger-plain">危险</Button>
<Button color="cancel">取消</Button>
<Button color="cancel-plain">取消</Button>
<Button color="text">文本</Button>
<div class="bg-orange-200 px-2">
  <Button color="text">文本 + 背景</Button>
</div>
<Button color="primary" disabled>禁用</Button>

自定义

<Button color="purple">紫色</Button>
<Button color="purple-plain">紫色</Button>
<Button color="primary-plain" --sunp-border="0px">无框</Button>
<Button class="px-8" color="primary-plain">超宽</Button>
<Button class="h-[50px]" color="primary">超高</Button>

<style>
  /* purple */
  .sunp-button-purple {
    background-color: #a855f7;
    color: white;

    &:active {
      background-color: #9333ea;
    }
  }

  /* purple-plain */
  .sunp-button-purple-plain {
    color: #9333ea;
    background-color: #f3e8ff;
    border-color: #c084fc;

    &:active {
      background-color: #e9d5ff;
      border-color: #9333ea;
    }
  }
</style>

文本混排

<div class="bg-white px-4 py-2">
  <span class="mr-2">左侧</span>
  <Button>按钮</Button>
  <span class="mx-2">中间</span>
  <Button>按钮</Button>
  <span class="ml-2">右侧</span>
</div>

加载中

<Button class="rounded-full" {loading} onclick={handleSubmit}>👌OK</Button>
<Button class="rounded" color="primary" {loading} onclick={handleSubmit}>
  确定
</Button>
<Button color="primary-plain" {loading} onclick={handleSubmit}>取消</Button>
<Button color="success" {loading} onclick={handleSubmit}>成功</Button>
<Button color="success-plain" {loading} onclick={handleSubmit}>成功</Button>
<Button color="warning" {loading} onclick={handleSubmit}>警告</Button>
<Button color="warning-plain" {loading} onclick={handleSubmit}>警告</Button>
<Button color="danger" {loading} onclick={handleSubmit}>危险</Button>
<Button color="danger-plain" {loading} onclick={handleSubmit}>危险</Button>
<Button color="cancel" {loading} onclick={handleSubmit}>取消</Button>
<Button color="cancel-plain" {loading} onclick={handleSubmit}>取消</Button>
<Button color="text" {loading} onclick={handleSubmit}>文本</Button>

块级显示

<div class="box-border bg-white px-4 py-2" style="height: 60px">
  <Button color="primary" block {loading} onclick={handleSubmit}>提交</Button>
</div>

Button

属性

属性	说明	类型	默认值
block	是否渲染为块级元素	boolean	false
color	按钮颜色	string	'normal'
loading	按钮是否处于加载状态	boolean	false
loadingIcon	加载状态图标（详见: Icon)	string | IconOption | Snippet	undefined

<button> 标签其它属性均为 Button 组件的属性

CSS 变量

属性	说明	默认值
--sunp-border	边框宽度	1px

注意：必须使用 --sunp-border 设置边框的宽度。不可用直接使用 CSS 设置。

按钮颜色

Sun Parakeet 组件库提供了一组默认的按钮颜色配置如下：

• normal
• primary
• primary-plain
• success
• success-plain
• warning
• warning-plain
• danger
• danger-plain
• cancel
• cancel-plain
• text

您可以通过覆盖默认的 CSS 变量重新定义这些基础按钮的配色。

您也可以定义自己的配色。