Skip to content

Commit c38321f

Browse files
MoonofweishengMoonofweisheng
committed
docs: ✏️ 添加关于 Button 自定义样式设置阴影的文档
✅ Closes: #731
1 parent 443ac92 commit c38321f

4 files changed

Lines changed: 84 additions & 100 deletions

File tree

‎docs/component/button.md‎

Lines changed: 62 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
# Button 按钮
44

5-
65
## 基本用法
76

87
基本按钮。
@@ -39,7 +38,6 @@
3938
<wd-button plain hairline>主要按钮</wd-button>
4039
```
4140

42-
4341
## 按钮大小
4442

4543
设置 `size` ，支持 'small'、'medium'、'large'，默认为 'medium'。
@@ -68,7 +66,7 @@
6866

6967
## 图标按钮
7068

71-
将 `type` 设置为 `icon`，同时设置 `icon` 属性，icon为图标的类名，可以直接使用 `Icon 图标` 章节中的图标类名。
69+
将 `type` 设置为 `icon`，同时设置 `icon` 属性，icon 为图标的类名，可以直接使用 `Icon 图标` 章节中的图标类名。
7270

7371
```html
7472
<wd-button type="icon" icon="picture"></wd-button>
@@ -83,6 +81,7 @@
8381
```
8482

8583
结合`classPrefix`可以使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。
84+
8685
```html
8786
<wd-button classPrefix="fish" icon="kehuishouwu">可回收</wd-button>
8887
```
@@ -95,32 +94,56 @@
9594
<wd-button block>主要按钮</wd-button>
9695
```
9796

97+
## 自定义样式
98+
99+
通过 `custom-class` 和 `custom-style` 属性可以自定义按钮的样式，这里我们使用`custom-class`给按钮添加一个 `Material Design 3` 风格的`box-shadow`。
100+
101+
```html
102+
<view class="page-class">
103+
<wd-button custom-class="custom-shadow">主要按钮</wd-button>
104+
<wd-button type="success" custom-class="custom-shadow">成功按钮</wd-button>
105+
<wd-button type="info" custom-class="custom-shadow">信息按钮</wd-button>
106+
<wd-button type="warning" custom-class="custom-shadow">警告按钮</wd-button>
107+
<wd-button type="error" custom-class="custom-shadow">危险按钮</wd-button>
108+
</view>
109+
```
110+
111+
```scss
112+
.page-class {
113+
:deep() {
114+
.custom-shadow {
115+
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%);
116+
}
117+
}
118+
}
119+
```
120+
98121
## Attributes
99122

100-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
101-
|-----|------|-----|-------|-------|--------|
102-
| type | 按钮类型 | string | primary / success / info / warning / error / text / icon | primary | - |
103-
| round | 圆角按钮 | boolean | - | true | - |
104-
| plain | 幽灵按钮 | boolean | - | false | - |
105-
| hairline| 是否细边框 | boolean | - | false | - |
106-
| loading | 加载中按钮 | boolean | - | false | - |
107-
| block | 块状按钮 | boolean | - | false | - |
108-
| size | 按钮尺寸 | string | small / medium / large | medium | - |
109-
| disabled | 禁用按钮 | boolean | - | false | - |
110-
| icon | 图标类名 | string | - | - | - |
111-
| loading-color | 加载图标颜色 | string | - | - | - |
112-
| open-type | 微信开放能力 | string | - | - | - |
113-
| hover-stop-propagation | 指定是否阻止本节点的祖先节点出现点击态 | boolean | - | false | - |
114-
| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | string | zh_CN / zh_TW | en | - |
115-
| session-from | 会话来源，open-type="contact"时有效 | string | - | - | - |
116-
| session-message-title | 会话内消息卡片标题，open-type="contact"时有效 | string | - | 当前标题 | - |
117-
| session-message-path | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | string | - | 当前分享路径 | - |
118-
| send-message-img | 会话内消息卡片图片，open-type="contact"时有效 | string | - | 截图 | - |
119-
| app-parameter | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | string | - | - | - |
120-
| show-message-card | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | boolean | - | false | - |
121-
| classPrefix | 类名前缀，用于使用自定义图标，参见[icon](/component/icon#自定义图标) | string | - | 'wd-icon' | 0.1.27 |
122-
| button-id | 按钮的唯一标识，可用于设置隐私同意授权按钮的id | string | - | - | 1.3.6 |
123-
| scope | 支付宝小程序使用，当 open-type 为 getAuthorize 时有效。 | ButtonScope | `phoneNumber` / `userInfo` | - | 1.3.14 |
123+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
124+
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------- | ------------ | -------- |
125+
| type | 按钮类型 | string | primary / success / info / warning / error / text / icon | primary | - |
126+
| round | 圆角按钮 | boolean | - | true | - |
127+
| plain | 幽灵按钮 | boolean | - | false | - |
128+
| hairline | 是否细边框 | boolean | - | false | - |
129+
| loading | 加载中按钮 | boolean | - | false | - |
130+
| block | 块状按钮 | boolean | - | false | - |
131+
| size | 按钮尺寸 | string | small / medium / large | medium | - |
132+
| disabled | 禁用按钮 | boolean | - | false | - |
133+
| icon | 图标类名 | string | - | - | - |
134+
| loading-color | 加载图标颜色 | string | - | - | - |
135+
| open-type | 微信开放能力 | string | - | - | - |
136+
| hover-stop-propagation | 指定是否阻止本节点的祖先节点出现点击态 | boolean | - | false | - |
137+
| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | string | zh_CN / zh_TW | en | - |
138+
| session-from | 会话来源，open-type="contact"时有效 | string | - | - | - |
139+
| session-message-title | 会话内消息卡片标题，open-type="contact"时有效 | string | - | 当前标题 | - |
140+
| session-message-path | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | string | - | 当前分享路径 | - |
141+
| send-message-img | 会话内消息卡片图片，open-type="contact"时有效 | string | - | 截图 | - |
142+
| app-parameter | 打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效 | string | - | - | - |
143+
| show-message-card | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | boolean | - | false | - |
144+
| classPrefix | 类名前缀，用于使用自定义图标，参见[icon](/component/icon#自定义图标) | string | - | 'wd-icon' | 0.1.27 |
145+
| button-id | 按钮的唯一标识，可用于设置隐私同意授权按钮的 id | string | - | - | 1.3.6 |
146+
| scope | 支付宝小程序使用，当 open-type 为 getAuthorize 时有效。 | ButtonScope | `phoneNumber` / `userInfo` | - | 1.3.14 |
124147

125148
### ButtonOpenType 开放能力
126149

@@ -141,18 +164,18 @@
141164

142165
## Events
143166

144-
| 事件名称 | 说明 | 参数 | 最低版本 |
145-
|---------|-----|-----|---------|
146-
| click | 点击事件 | `event` | - |
147-
| getuserinfo | 获取用户信息 | `detail` | - |
148-
| contact | 客服消息回调，open-type="contact"时有效 | `detail` | - |
149-
| getphonenumber | 获取用户手机号回调，open-type=getPhoneNumber时有效 | `detail` | - |
150-
| error | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 | `detail` | - |
151-
| launchapp | 打开 APP 成功的回调，open-type=launchApp时有效 | `detail` | - |
152-
| opensetting | 在打开授权设置页后回调，open-type=openSetting时有效 | `detail` | - |
167+
| 事件名称 | 说明 | 参数 | 最低版本 |
168+
| -------------- | ------------------------------------------------------------ | -------- | -------- |
169+
| click | 点击事件 | `event` | - |
170+
| getuserinfo | 获取用户信息 | `detail` | - |
171+
| contact | 客服消息回调，open-type="contact"时有效 | `detail` | - |
172+
| getphonenumber | 获取用户手机号回调，open-type=getPhoneNumber 时有效 | `detail` | - |
173+
| error | 当使用开放能力时，发生错误的回调，open-type=launchApp 时有效 | `detail` | - |
174+
| launchapp | 打开 APP 成功的回调，open-type=launchApp 时有效 | `detail` | - |
175+
| opensetting | 在打开授权设置页后回调，open-type=openSetting 时有效 | `detail` | - |
153176

154177
## 外部样式类
155178

156-
| 类名 | 说明 | 最低版本 |
157-
|-----|------|--------|
158-
| custom-class | 根节点样式 | - |
179+
| 类名 | 说明 | 最低版本 |
180+
| ------------ | ---------- | -------- |
181+
| custom-class | 根节点样式 | - |

‎src/pages/button/Index.vue‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<page-wraper>
3-
<view>
3+
<view class="page-button">
44
<demo-block title="基本用法">
55
<wd-button>主要按钮</wd-button>
66
<wd-button type="success">成功按钮</wd-button>
@@ -114,6 +114,14 @@
114114
<wd-button type="info" size="small" plain>次操作</wd-button>
115115
</view>
116116
</demo-block>
117+
118+
<demo-block title="自定义样式-Material Design 3 风格 box-shadow">
119+
<wd-button custom-class="custom-shadow">主要按钮</wd-button>
120+
<wd-button type="success" custom-class="custom-shadow">成功按钮</wd-button>
121+
<wd-button type="info" custom-class="custom-shadow">信息按钮</wd-button>
122+
<wd-button type="warning" custom-class="custom-shadow">警告按钮</wd-button>
123+
<wd-button type="error" custom-class="custom-shadow">危险按钮</wd-button>
124+
</demo-block>
117125
</view>
118126
</page-wraper>
119127
</template>
@@ -124,10 +132,18 @@ function handleGetuserinfo(event: any) {
124132
}
125133
</script>
126134
<style lang="scss" scoped>
127-
:deep(button) {
128-
margin: 0 10px 10px 0;
129-
}
130-
.button-block {
131-
margin-right: 0;
135+
.page-button {
136+
:deep(button) {
137+
margin: 0 10px 10px 0;
138+
}
139+
140+
:deep() {
141+
.custom-shadow {
142+
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%);
143+
}
144+
}
145+
.button-block {
146+
margin-right: 0;
147+
}
132148
}
133149
</style>

‎src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -131,58 +131,42 @@ $-badge-border: var(--wot-badge-border, 2px solid $-badge-color) !default; //
131131

132132
/* button */
133133
$-button-disabled-opacity: var(--wot-button-disabled-opacity, 0.6) !default; // button禁用透明度
134-
135134
$-button-small-height: var(--wot-button-small-height, 28px) !default; // 小型按钮高度
136135
$-button-small-padding: var(--wot-button-small-padding, 0 12px) !default; // 小型按钮padding
137136
$-button-small-fs: var(--wot-button-small-fs, $-fs-secondary) !default; // 小型按钮字号
138137
$-button-small-radius: var(--wot-button-small-radius, 2px) !default; // 小型按钮圆角大小
139138
$-button-small-loading: var(--wot-button-small-loading, 14px) !default; // 小型按钮loading图标大小
140-
141139
$-button-medium-height: var(--wot-button-medium-height, 36px) !default; // 中型按钮高度
142140
$-button-medium-padding: var(--wot-button-medium-padding, 0 16px) !default; // 中型按钮padding
143141
$-button-medium-fs: var(--wot-button-medium-fs, $-fs-content) !default; // 中型按钮字号
144142
$-button-medium-radius: var(--wot-button-medium-radius, 4px) !default; // 中型按钮圆角大小
145143
$-button-medium-loading: var(--wot-button-medium-loading, 18px) !default; // 中型按钮loading图标大小
146144
$-button-medium-box-shadow-size: var(--wot-button-medium-box-shadow-size, 0px 2px 4px 0px) !default; // 中尺寸阴影尺寸
147-
148145
$-button-large-height: var(--wot-button-large-height, 44px) !default; // 大型按钮高度
149146
$-button-large-padding: var(--wot-button-large-padding, 0 36px) !default; // 大型按钮padding
150147
$-button-large-fs: var(--wot-button-large-fs, $-fs-title) !default; // 大型按钮字号
151148
$-button-large-radius: var(--wot-button-large-radius, 8px) !default; // 大型按钮圆角大小
152149
$-button-large-loading: var(--wot-button-large-loading, 24px) !default; // 大小按钮loading图标大小
153150
$-button-large-box-shadow-size: var(--wot-button-large-box-shadow-size, 0px 4px 8px 0px) !default; // 大尺寸阴影尺寸
154-
155151
$-button-icon-fs: var(--wot-button-icon-fs, 1.18em) !default; // 带图标的按钮的图标大小
156152
$-button-icon-size: var(--wot-button-icon-size, 40px) !default; // icon 类型按钮尺寸
157153
$-button-icon-color: var(--wot-button-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon 类型按钮颜色
158154
$-button-icon-disabled-color: var(--wot-button-icon-disabled-color, $-color-icon-disabled) !default; // icon 类型按钮禁用颜色
159-
160155
$-button-normal-color: var(--wot-button-normal-color, $-color-title) !default; // 文字颜色
161156
$-button-normal-disabled-color: var(--wot-button-normal-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 默认按钮禁用文字色
162-
163157
$-button-plain-bg-color: var(--wot-button-plain-bg-color, $-color-white) !default; // 幽灵按钮背景色
164-
165158
$-button-primary-color: var(--wot-button-primary-color, $-color-white) !default; // 主要按钮颜色
166159
$-button-primary-bg-color: var(--wot-button-primary-bg-color, $-color-theme) !default; // 主要按钮背景颜色
167-
$-button-primary-box-shadow-color: var(--wot-button-primary-box-shadow-color, rgba($-color-theme, 0.25)) !default; // 主要按钮阴影颜色
168-
169160
$-button-success-color: var(--wot-button-success-color, $-color-white) !default; // 成功按钮文字颜色
170161
$-button-success-bg-color: var(--wot-button-success-bg-color, $-color-success) !default; // 成功按钮颜色
171-
$-button-success-box-shadow-color: var(--wot-button-success-box-shadow-color, rgba($-color-success, 0.25)) !default; // 主要按钮阴影颜色
172-
173162
$-button-info-color: var(--wot-button-info-color, $-color-title) !default; // 信息按钮颜色
174163
$-button-info-bg-color: var(--wot-button-info-bg-color, #f0f0f0) !default; // 信息按钮背景颜色
175164
$-button-info-plain-border-color: var(--wot-button-info-plain-border-color, rgba(0, 0, 0, 0.45)) !default; // 信息按钮禁用颜色
176165
$-button-info-plain-normal-color: var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, 0.85)) !default; // 信息幽灵按钮默认颜色
177-
178166
$-button-warning-color: var(--wot-button-warning-color, $-color-white) !default; // 警告按钮字体颜色
179167
$-button-warning-bg-color: var(--wot-button-warning-bg-color, $-color-warning) !default; // 警告按钮背景颜色
180-
$-button-warning-box-shadow-color: var(--wot-button-warning-box-shadow-color, rgba($-color-warning, 0.25)) !default; // 主要按钮阴影颜色
181-
182168
$-button-error-color: var(--wot-button-error-color, $-color-white) !default; // 错误按钮颜色
183169
$-button-error-bg-color: var(--wot-button-error-bg-color, $-color-danger) !default; // 错误按钮背景颜色
184-
$-button-error-box-shadow-color: var(--wot-button-error-box-shadow-color, rgba($-color-danger, 0.25)) !default; // 主要按钮阴影颜色
185-
186170
$-button-text-hover-opacity: var(--wot-button-text-hover-opacity, 0.7) !default; // 文字button激活时透明度
187171

188172
/* cell */

0 commit comments

Comments
 (0)