sets-ui

Appearance

Button 按钮 ​

基础用法 ​

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

vue
<template>
  <s-button>基础按钮</s-button>
  <s-button type="primary">主要按钮</s-button>
  <div style="margin-top: 10px;"></div>
  <s-button plain>朴素按钮</s-button>
  <s-button type="primary" plain>朴素按钮</s-button>
</template>

按钮形状 ​

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

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

按钮大小 ​

预制了 large 和 small 两种值配置大小，可使用 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="--button-size-text-base: 14px;--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="--button-size-text-base: 14px;--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-500)
--s-button-theme-color-50按钮辅助色var(--theme-color-50)
--s-button-color-text按钮字体色var(--color-text)
--s-button-color-text-hover按钮字体移入色var(--s-button-theme-color)
--s-button-color-bg按钮默认背景var(--color-base-250)
--s-button-color-bg-hover按钮默认背景移入色var(--s-button-theme-color-50)
--s-button-size按钮大小(仅形状按钮适用)30unit
--s-button-size-text字体大小var(--text-sm)
--s-button-padding内边距12unit 14unit
--s-button-gap按钮间边距10unit
--s-button-round椭圆形按钮圆角20unit