Button 按钮

基础用法

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

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

按钮形状

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

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

按钮大小

预制了 large 和 small 两种值配置大小，可使用 CSS 变量自定义尺寸

<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 属性设置按钮颜色

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

文本按钮

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

基础用法：

隐藏背景：

文本按钮： 通过CSS变量去除间距让看起来更接近文本

<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	是否为文字按钮	boolean	false
bg	是否显示背景色	boolean	true

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