Skip to content

Button 按钮

基础用法

通过 type 属性定义不同的按钮样式

vue
<template>
  <s-button>基础按钮</s-button>
  <s-button type="primary">主要按钮</s-button>
</template>

按钮形状

通过 round circle 属性定义不同的按钮形状

vue
<template>
  <s-button round>椭圆按钮</s-button>
  <s-button circle>😋</s-button>
</template>

按钮大小

预制了 largesmall 两种值配置大小,可使用 CSS 变量自定义尺寸

vue
<template>
  <p style="margin-bottom: 10px;">
    <s-button size="small">small</s-button>
    <s-button>normal</s-button>
    <s-button size="large">large</s-button>
    <s-button style="--s-button-font-size: 14px;--s-button-padding: 14px 24px;">custom</s-button>
  </p>
  <p style="margin-bottom: 10px;">
    <s-button round size="small">small</s-button>
    <s-button round>normal</s-button>
    <s-button round size="large">large</s-button>
    <s-button round style="--s-button-font-size: 14px;--s-button-padding: 14px 24px;">custom</s-button>
  </p>
  <p>
    <s-button circle size="small">😋</s-button>
    <s-button circle>😋</s-button>
    <s-button circle size="large">😋</s-button>
  </p>
</template>

按钮颜色

通过 color 属性设置按钮颜色

vue
<template>
  <s-button color="orange">Color Orange</s-button>
  <s-button color="orange" type="primary">Color Orange</s-button>
</template>

文本按钮

通过 Text 属性使按钮呈现文本样式

基础用法:
隐藏背景:
文本按钮: 通过CSS变量去除间距让看起来更接近文本
vue
<template>
  <div>
    <span>基础用法:</span>
    <s-button text>基础按钮</s-button>
    <s-button type="primary" text>主要按钮</s-button>
  </div>
  <div>
    <span>隐藏背景:</span>
    <s-button :bg="false">基础按钮</s-button>
    <s-button type="primary" :bg="false">主要按钮</s-button>
  </div>
  <div>
    <span>文本按钮:</span>
    <span style="font-size:14px;">
      通过CSS变量去除间距让<s-button text :bg="false" style="--s-button-padding: 0;text-decoration-line: underline;">按钮</s-button>看起来更接近文本
    </span>
  </div>
</template>

API

Button Attributes

名称说明类型默认值
type样式类型enum'default'|'primary'
size按钮大小enum'small'|'large'
color自定义按钮颜色, 自动计算按钮辅助色string-
text是否为文字按钮booleanfalse
bg是否显示背景色booleantrue

Button CSS

名称说明默认值
--s-button-theme-color按钮主题色var(--theme-color)
--s-button-theme-color-light按钮辅助色var(--theme-color-light)
--s-button-color-text按钮字体色var(--color-text)
--s-button-color-text-hover按钮字体移入色var(--s-button-theme-color)
--s-button-color-bg按钮默认背景var(--base-color-light)
--s-button-color-bg-hover按钮默认背景移入色var(--s-button-theme-color-light)
--s-button-size按钮大小(仅形状按钮适用)calc(var(--base-font-size) * 2)
--s-button-font-size字体大小var(--base-font-size)
--s-button-padding内边距8px 14px
--s-button-series-gap按钮间边距10px