admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 添加关于 Button 自定义样式设置阴影的文档

Browse Source 
✅ Closes: #731
This commit is contained in:
Moonofweisheng 2024-11-23 16:55:09 +08:00
parent 443ac92982
commit c38321f69c
4 changed files with 84 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/component/button.md
View File

@ -2,7 +2,6 @@
# Button 按钮
## 基本用法
基本按钮。
@ -39,7 +38,6 @@
<wd-button plain hairline>主要按钮</wd-button>
```
## 按钮大小
设置 `size` ，支持 'small'、'medium'、'large'，默认为 'medium'。
@ -83,6 +81,7 @@
```
结合`classPrefix`可以使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。
```html
<wd-button classPrefix="fish" icon="kehuishouwu">可回收</wd-button>
```
@ -95,10 +94,34 @@
<wd-button block>主要按钮</wd-button>
```
## 自定义样式
通过 `custom-class` 和 `custom-style` 属性可以自定义按钮的样式，这里我们使用`custom-class`给按钮添加一个 `Material Design 3` 风格的`box-shadow`。
```html
<view class="page-class">
<wd-button custom-class="custom-shadow">主要按钮</wd-button>
<wd-button type="success" custom-class="custom-shadow">成功按钮</wd-button>
<wd-button type="info" custom-class="custom-shadow">信息按钮</wd-button>
<wd-button type="warning" custom-class="custom-shadow">警告按钮</wd-button>
<wd-button type="error" custom-class="custom-shadow">危险按钮</wd-button>
</view>
```
```scss
.page-class {
:deep() {
.custom-shadow {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
}
}
```
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------- | ------------ | -------- |
| type | 按钮类型 | string | primary / success / info / warning / error / text / icon | primary | - |
| round | 圆角按钮 | boolean | - | true | - |
| plain | 幽灵按钮 | boolean | - | false | - |
@ -142,7 +165,7 @@
## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| -------------- | ------------------------------------------------------------ | -------- | -------- |
| click | 点击事件 | `event` | - |
| getuserinfo | 获取用户信息 | `detail` | - |
| contact | 客服消息回调，open-type="contact"时有效 | `detail` | - |
@ -154,5 +177,5 @@
## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| ------------ | ---------- | -------- |
| custom-class | 根节点样式 | - |

18
src/pages/button/Index.vue
View File

@ -1,6 +1,6 @@
<template>
<page-wraper>
<view>
<view class="page-button">
<demo-block title="基本用法">
<wd-button>主要按钮</wd-button>
<wd-button type="success">成功按钮</wd-button>
@ -114,6 +114,14 @@
<wd-button type="info" size="small" plain>次操作</wd-button>
</view>
</demo-block>
<demo-block title="自定义样式-Material Design 3 风格 box-shadow">
<wd-button custom-class="custom-shadow">主要按钮</wd-button>
<wd-button type="success" custom-class="custom-shadow">成功按钮</wd-button>
<wd-button type="info" custom-class="custom-shadow">信息按钮</wd-button>
<wd-button type="warning" custom-class="custom-shadow">警告按钮</wd-button>
<wd-button type="error" custom-class="custom-shadow">危险按钮</wd-button>
</demo-block>
</view>
</page-wraper>
</template>
@ -124,10 +132,18 @@ function handleGetuserinfo(event: any) {
}
</script>
<style lang="scss" scoped>
.page-button {
:deep(button) {
margin: 0 10px 10px 0;
}
:deep() {
.custom-shadow {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
}
.button-block {
margin-right: 0;
}
}
</style>

16
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
View File

@ -131,58 +131,42 @@ $-badge-border: var(--wot-badge-border, 2px solid $-badge-color) !default; //
/* button */
$-button-disabled-opacity: var(--wot-button-disabled-opacity, 0.6) !default; // button禁用透明度
$-button-small-height: var(--wot-button-small-height, 28px) !default; // 小型按钮高度
$-button-small-padding: var(--wot-button-small-padding, 0 12px) !default; // 小型按钮padding
$-button-small-fs: var(--wot-button-small-fs, $-fs-secondary) !default; // 小型按钮字号
$-button-small-radius: var(--wot-button-small-radius, 2px) !default; // 小型按钮圆角大小
$-button-small-loading: var(--wot-button-small-loading, 14px) !default; // 小型按钮loading图标大小
$-button-medium-height: var(--wot-button-medium-height, 36px) !default; // 中型按钮高度
$-button-medium-padding: var(--wot-button-medium-padding, 0 16px) !default; // 中型按钮padding
$-button-medium-fs: var(--wot-button-medium-fs, $-fs-content) !default; // 中型按钮字号
$-button-medium-radius: var(--wot-button-medium-radius, 4px) !default; // 中型按钮圆角大小
$-button-medium-loading: var(--wot-button-medium-loading, 18px) !default; // 中型按钮loading图标大小
$-button-medium-box-shadow-size: var(--wot-button-medium-box-shadow-size, 0px 2px 4px 0px) !default; // 中尺寸阴影尺寸
$-button-large-height: var(--wot-button-large-height, 44px) !default; // 大型按钮高度
$-button-large-padding: var(--wot-button-large-padding, 0 36px) !default; // 大型按钮padding
$-button-large-fs: var(--wot-button-large-fs, $-fs-title) !default; // 大型按钮字号
$-button-large-radius: var(--wot-button-large-radius, 8px) !default; // 大型按钮圆角大小
$-button-large-loading: var(--wot-button-large-loading, 24px) !default; // 大小按钮loading图标大小
$-button-large-box-shadow-size: var(--wot-button-large-box-shadow-size, 0px 4px 8px 0px) !default; // 大尺寸阴影尺寸
$-button-icon-fs: var(--wot-button-icon-fs, 1.18em) !default; // 带图标的按钮的图标大小
$-button-icon-size: var(--wot-button-icon-size, 40px) !default; // icon 类型按钮尺寸
$-button-icon-color: var(--wot-button-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon 类型按钮颜色
$-button-icon-disabled-color: var(--wot-button-icon-disabled-color, $-color-icon-disabled) !default; // icon 类型按钮禁用颜色
$-button-normal-color: var(--wot-button-normal-color, $-color-title) !default; // 文字颜色
$-button-normal-disabled-color: var(--wot-button-normal-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 默认按钮禁用文字色
$-button-plain-bg-color: var(--wot-button-plain-bg-color, $-color-white) !default; // 幽灵按钮背景色
$-button-primary-color: var(--wot-button-primary-color, $-color-white) !default; // 主要按钮颜色
$-button-primary-bg-color: var(--wot-button-primary-bg-color, $-color-theme) !default; // 主要按钮背景颜色
$-button-primary-box-shadow-color: var(--wot-button-primary-box-shadow-color, rgba($-color-theme, 0.25)) !default; // 主要按钮阴影颜色
$-button-success-color: var(--wot-button-success-color, $-color-white) !default; // 成功按钮文字颜色
$-button-success-bg-color: var(--wot-button-success-bg-color, $-color-success) !default; // 成功按钮颜色
$-button-success-box-shadow-color: var(--wot-button-success-box-shadow-color, rgba($-color-success, 0.25)) !default; // 主要按钮阴影颜色
$-button-info-color: var(--wot-button-info-color, $-color-title) !default; // 信息按钮颜色
$-button-info-bg-color: var(--wot-button-info-bg-color, #f0f0f0) !default; // 信息按钮背景颜色
$-button-info-plain-border-color: var(--wot-button-info-plain-border-color, rgba(0, 0, 0, 0.45)) !default; // 信息按钮禁用颜色
$-button-info-plain-normal-color: var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, 0.85)) !default; // 信息幽灵按钮默认颜色
$-button-warning-color: var(--wot-button-warning-color, $-color-white) !default; // 警告按钮字体颜色
$-button-warning-bg-color: var(--wot-button-warning-bg-color, $-color-warning) !default; // 警告按钮背景颜色
$-button-warning-box-shadow-color: var(--wot-button-warning-box-shadow-color, rgba($-color-warning, 0.25)) !default; // 主要按钮阴影颜色
$-button-error-color: var(--wot-button-error-color, $-color-white) !default; // 错误按钮颜色
$-button-error-bg-color: var(--wot-button-error-bg-color, $-color-danger) !default; // 错误按钮背景颜色
$-button-error-box-shadow-color: var(--wot-button-error-box-shadow-color, rgba($-color-danger, 0.25)) !default; // 主要按钮阴影颜色
$-button-text-hover-opacity: var(--wot-button-text-hover-opacity, 0.7) !default; // 文字button激活时透明度
/* cell */

39
src/uni_modules/wot-design-uni/components/wd-button/index.scss
View File

@ -148,26 +148,6 @@
border-radius: $-button-medium-radius;
font-size: $-button-medium-fs;
@include when(primary) {
box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color;
}
@include when(success) {
box-shadow: $-button-medium-box-shadow-size $-button-success-box-shadow-color;
}
@include when(warning) {
box-shadow: $-button-medium-box-shadow-size $-button-warning-box-shadow-color;
}
@include when(error) {
box-shadow: $-button-medium-box-shadow-size $-button-error-box-shadow-color;
}
@include when(plain) {
box-shadow: none;
}
@include when(round) {
min-width: 120px;
@ -198,25 +178,6 @@
border-radius: $-button-large-radius;
}
&:not(.is-plain) {
@include when(primary) {
box-shadow: $-button-large-box-shadow-size $-button-primary-box-shadow-color;
}
@include when(success) {
box-shadow: $-button-large-box-shadow-size $-button-success-box-shadow-color;
}
@include when(warning) {
box-shadow: $-button-large-box-shadow-size $-button-warning-box-shadow-color;
}
@include when(error) {
box-shadow: $-button-large-box-shadow-size $-button-error-box-shadow-color;
}
}
.wd-button__loading {
width: $-button-large-loading;
height: $-button-large-loading;