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>
按钮大小
预制了 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="--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 | 是否为文字按钮 | 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 |