Sard Uniapp

Appearance

在新窗口打开⤴

Button按钮

介绍 ​

按钮用于开始一个即时操作。

引入 ​

js
import Button from 'sard-uniapp/components/button/button.vue'

代码演示 ​

按钮类型 ​

type属性用于配置按钮的类型。

vue
<template>
  <sar-button type="default">默认</sar-button>
  <sar-button type="pale">淡颜色</sar-button>
  <sar-button type="mild">温和</sar-button>
  <sar-button type="outline">轮廓线</sar-button>
  <sar-button type="text">文本</sar-button>
  <sar-button type="pale-text">淡文本</sar-button>
</template>

按钮主题色 ​

Button组件内置了几个主题色，可以使用theme属性来配置。

vue
<template>
  <sar-button theme="primary">primary</sar-button>
  <sar-button theme="secondary">secondary</sar-button>
  <sar-button theme="success">success</sar-button>
  <sar-button theme="info">info</sar-button>
  <sar-button theme="warning">warning</sar-button>
  <sar-button theme="danger">danger</sar-button>
</template>

自定义颜色 ​

如果内置主题色不合适，可以自定义主题色。使用color和background属性定义字体颜色和背景色。

vue
<template>
  <sar-button background="fuchsia" type="default">default</sar-button>
  <sar-button background="rgba(255,0,255,0.2)" color="fuchsia" type="pale">
    pale
  </sar-button>
  <sar-button color="fuchsia" type="mild">mild</sar-button>
  <sar-button color="fuchsia" type="outline">outline</sar-button>
  <sar-button color="fuchsia" type="text">text</sar-button>
  <sar-button color="fuchsia" type="pale-text">pale-text</sar-button>
  <sar-button background="linear-gradient(to right, orange, fuchsia)">
    渐变色
  </sar-button>
</template>

圆形按钮 ​

使用round属性设置为圆形按钮。

vue
<template>
  <sar-button round>default</sar-button>
  <sar-button round type="pale">pale</sar-button>
  <sar-button round type="mild">mild</sar-button>
  <sar-button round type="outline">outline</sar-button>
  <sar-button round type="text">text</sar-button>
  <sar-button round type="pale-text">pale-text</sar-button>
</template>

方形按钮 ​

使用square属性设置为方形按钮。

vue
<template>
  <sar-button square>default</sar-button>
  <sar-button square type="pale">pale</sar-button>
  <sar-button square type="mild">mild</sar-button>
  <sar-button square type="outline">outline</sar-button>
  <sar-button square type="text">text</sar-button>
  <sar-button square type="pale-text">pale-text</sar-button>
</template>

禁用按钮 ​

禁用状态的按钮不可点击。

vue
<template>
  <sar-button disabled>default</sar-button>
  <sar-button disabled type="pale">pale</sar-button>
  <sar-button disabled type="mild">mild</sar-button>
  <sar-button disabled type="outline">outline</sar-button>
  <sar-button disabled type="text">text</sar-button>
  <sar-button disabled type="pale-text">pale-text</sar-button>
</template>

按钮尺寸 ​

内置三种尺寸以供选择。

vue
<template>
  <sar-button size="mini">迷你尺寸</sar-button>
  <sar-button size="small">小尺寸</sar-button>
  <sar-button size="medium">默认尺寸</sar-button>
  <sar-button size="large">大尺寸</sar-button>
</template>

加载中 ​

加载中的按钮不可点击。

vue
<template>
  <sar-button size="mini" loading>加载中</sar-button>
  <sar-button size="small" loading>加载中</sar-button>
  <sar-button loading>加载中</sar-button>
  <sar-button size="large" loading loading-type="clock">加载中</sar-button>
</template>

行内块按钮 ​

按钮默认是块级元素，可通过 inline 设为行内块元素。

vue
<template>
  <sar-button inline root-style="margin-left: 10rpx" size="mini">
    迷你尺寸
  </sar-button>
  <sar-button inline root-style="margin-left: 10rpx" size="small">
    小尺寸
  </sar-button>
  <sar-button inline root-style="margin-left: 10rpx" size="medium">
    默认尺寸
  </sar-button>
  <sar-button inline root-style="margin-left: 10rpx" size="large">
    大尺寸
  </sar-button>
</template>

图标按钮 ​

可通过 icon 属性设置图标，相对于通过默认插槽添加图标，前者会有默认的样式，并可与 loading 相切换。在设置 icon 属性后，按钮会自动变为行内块。

vue
<template>
  <sar-space align="center">
    <sar-button :loading="loading" type="mild" size="mini" icon="plus" />
    <sar-button :loading="loading" type="mild" size="small" icon="plus" />
    <sar-button :loading="loading" type="mild" size="medium" icon="plus" />
    <sar-button :loading="loading" type="mild" size="large" icon="plus" />
  </sar-space>

  <sar-space align="center">
    <sar-button :loading="loading" round size="mini" icon="plus" />
    <sar-button :loading="loading" round size="small" icon="plus" />
    <sar-button :loading="loading" round size="medium" icon="plus" />
    <sar-button :loading="loading" round size="large" icon="plus" />
  </sar-space>

  <sar-space align="center">
    <sar-button :loading="loading" type="outline" size="mini" icon="plus">
      按钮
    </sar-button>
    <sar-button :loading="loading" type="outline" size="small" icon="plus">
      按钮
    </sar-button>
    <sar-button :loading="loading" type="outline" size="medium" icon="plus">
      按钮
    </sar-button>
    <sar-button :loading="loading" type="outline" size="large" icon="plus">
      按钮
    </sar-button>
  </sar-space>

  <sar-button @click="loading = !loading">toggle loading</sar-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(false)
</script>
vue
<template>
  <sar-space align="center">
    <sar-button :loading="loading" type="mild" size="mini" icon="plus" />
    <sar-button :loading="loading" type="mild" size="small" icon="plus" />
    <sar-button :loading="loading" type="mild" size="medium" icon="plus" />
    <sar-button :loading="loading" type="mild" size="large" icon="plus" />
  </sar-space>

  <sar-space align="center">
    <sar-button :loading="loading" round size="mini" icon="plus" />
    <sar-button :loading="loading" round size="small" icon="plus" />
    <sar-button :loading="loading" round size="medium" icon="plus" />
    <sar-button :loading="loading" round size="large" icon="plus" />
  </sar-space>

  <sar-space align="center">
    <sar-button :loading="loading" type="outline" size="mini" icon="plus">
      按钮
    </sar-button>
    <sar-button :loading="loading" type="outline" size="small" icon="plus">
      按钮
    </sar-button>
    <sar-button :loading="loading" type="outline" size="medium" icon="plus">
      按钮
    </sar-button>
    <sar-button :loading="loading" type="outline" size="large" icon="plus">
      按钮
    </sar-button>
  </sar-space>

  <sar-button @click="loading = !loading">toggle loading</sar-button>
</template>

<script setup lang="js">
import { ref } from "vue";
const loading = ref(false);
</script>

API ​

ButtonProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
type按钮类型'default' | 'pale' | 'mild' | 'outline' | 'text' | 'pale-text''default'
theme按钮主题色'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger''primary'
size按钮尺寸'mini' | 'small' | 'medium' | 'large''medium'
round圆角按钮booleanfalse
square 1.19+方形按钮booleanfalse
disabled禁用按钮booleanfalse
loading加载状态booleanfalse
loading-type加载类型'clock' | 'circular''circular'
color自定义文字颜色string-
background自定义背景颜色string-
block 1.12+将按钮设为块级元素booleantrue
inline 1.12.1+设置为 true，则为行内块元素，否则取决于 blockbooleanfalse
icon 1.13+图标名称string-
icon-family 1.13+图标字体string-
icon-size 1.13+图标尺寸string-

ButtonProps（小程序能力） ​

uniapp 文档。

属性描述类型默认值
form-type用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件string-
open-type开放能力string-
app-parameter打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效string-
hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态booleanfalse
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。string'en'
session-from会话来源，open-type="contact"时有效string-
send-message-title会话内消息卡片标题，open-type="contact"时有效string当前标题
send-message-path会话内消息卡片点击跳转小程序路径，open-type="contact"时有效string当前分享路径
send-message-img会话内消息卡片图片，open-type="contact"时有效string截图
show-message-card是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效booleanfalse
group-id打开群资料卡时，传递的群号string-
guild-id打开频道页面时，传递的频道号string-
public-id打开公众号资料卡时，传递的号码string-

ButtonSlots ​

插槽描述属性
default自定义默认内容-

ButtonEmits ​

事件描述类型
click点击按钮时触发，加载和禁用状态不会触发(event: any) => void

ButtonEmits（小程序能力） ​

uniapp 文档。

事件描述类型
getphonenumber获取用户手机号回调(event: any) => void
getuserinfo用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 uni.getUserInfo(event: any) => void
error当使用开放能力时，发生错误的回调(event: any) => void
opensetting在打开授权设置页并关闭后回调(event: any) => void
launchapp从小程序打开 App 成功的回调(event: any) => void
contact客服消息回调(event: any) => void
chooseavatar获取用户头像回调(event: any) => void
agreeprivacyauthorization用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效(event: any) => void
addgroupapp添加群应用的回调(event: any) => void
chooseaddress调起用户编辑并选择收货地址的回调(event: any) => void
chooseinvoicetitle用户选择发票抬头的回调(event: any) => void
subscribe订阅消息授权回调(event: any) => void
login登录回调(event: any) => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-button-height-mini: 56rpx;
  --sar-button-padding-y-mini: 0;
  --sar-button-padding-x-mini: 12rpx;
  --sar-button-border-radius-mini: var(--sar-rounded-sm);
  --sar-button-font-size-mini: var(--sar-text-sm);
  --sar-button-icon-size-mini: var(--sar-text-sm);

  --sar-button-height-sm: 64rpx;
  --sar-button-padding-y-sm: 0;
  --sar-button-padding-x-sm: 18rpx;
  --sar-button-border-radius-sm: var(--sar-rounded-sm);
  --sar-button-font-size-sm: var(--sar-text-sm);
  --sar-button-icon-size-sm: var(--sar-text-base);

  --sar-button-height: 80rpx;
  --sar-button-padding-y: 0;
  --sar-button-padding-x: 22rpx;
  --sar-button-border-radius: var(--sar-rounded);
  --sar-button-font-size: var(--sar-text-base);
  --sar-button-icon-size: 36rpx;

  --sar-button-height-lg: 96rpx;
  --sar-button-padding-y-lg: 0;
  --sar-button-padding-x-lg: 28rpx;
  --sar-button-border-radius-lg: var(--sar-rounded);
  --sar-button-font-size-lg: var(--sar-text-lg);
  --sar-button-icon-size-lg: 40rpx;

  --sar-button-line-height: var(--sar-leading-normal);

  --sar-button-active-opacity: var(--sar-active-opacity);
  --sar-button-active-bg: rgba(0, 0, 0, 0.125);
  --sar-button-mild-bg: var(--sar-gray-200);
  --sar-button-pale-bg-opacity: 0.2;

  --sar-button-loading-opacity: var(--sar-loading-opacity);
  --sar-button-loading-cursor: var(--sar-loading-cursor);
  --sar-button-icon-margin-right: 0.5em;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao