diff --git a/docs/component/button.md b/docs/component/button.md index 74d99e93..73814d35 100644 --- a/docs/component/button.md +++ b/docs/component/button.md @@ -2,7 +2,6 @@ # Button 按钮 - ## 基本用法 基本按钮。 @@ -39,7 +38,6 @@ 主要按钮 ``` - ## 按钮大小 设置 `size` ，支持 'small'、'medium'、'large'，默认为 'medium'。 @@ -68,7 +66,7 @@ ## 图标按钮 -将 `type` 设置为 `icon`，同时设置 `icon` 属性，icon为图标的类名，可以直接使用 `Icon 图标` 章节中的图标类名。 +将 `type` 设置为 `icon`，同时设置 `icon` 属性，icon 为图标的类名，可以直接使用 `Icon 图标` 章节中的图标类名。 ```html @@ -83,6 +81,7 @@ ``` 结合`classPrefix`可以使用自定义图标，参见 [Icon 自定义图标](/component/icon#自定义图标)。 + ```html 可回收 ``` @@ -95,32 +94,56 @@ 主要按钮 ``` +## 自定义样式 + +通过 `custom-class` 和 `custom-style` 属性可以自定义按钮的样式，这里我们使用`custom-class`给按钮添加一个 `Material Design 3` 风格的`box-shadow`。 + +```html + + 主要按钮 + 成功按钮 + 信息按钮 + 警告按钮 + 危险按钮 + +``` + +```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 | - | -| hairline| 是否细边框 | boolean | - | false | - | -| loading | 加载中按钮 | boolean | - | false | - | -| block | 块状按钮 | boolean | - | false | - | -| size | 按钮尺寸 | string | small / medium / large | medium | - | -| disabled | 禁用按钮 | boolean | - | false | - | -| icon | 图标类名 | string | - | - | - | -| loading-color | 加载图标颜色 | string | - | - | - | -| open-type | 微信开放能力 | string | - | - | - | -| hover-stop-propagation | 指定是否阻止本节点的祖先节点出现点击态 | boolean | - | false | - | -| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | string | zh_CN / zh_TW | en | - | -| session-from | 会话来源，open-type="contact"时有效 | string | - | - | - | -| session-message-title | 会话内消息卡片标题，open-type="contact"时有效 | string | - | 当前标题 | - | -| session-message-path | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | string | - | 当前分享路径 | - | -| send-message-img | 会话内消息卡片图片，open-type="contact"时有效 | string | - | 截图 | - | -| app-parameter | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | string | - | - | - | -| show-message-card | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | boolean | - | false | - | -| classPrefix | 类名前缀，用于使用自定义图标，参见[icon](/component/icon#自定义图标) | string | - | 'wd-icon' | 0.1.27 | -| button-id | 按钮的唯一标识，可用于设置隐私同意授权按钮的id | string | - | - | 1.3.6 | -| scope | 支付宝小程序使用，当 open-type 为 getAuthorize 时有效。 | ButtonScope | `phoneNumber` / `userInfo` | - | 1.3.14 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------- | ------------ | -------- | +| type | 按钮类型 | string | primary / success / info / warning / error / text / icon | primary | - | +| round | 圆角按钮 | boolean | - | true | - | +| plain | 幽灵按钮 | boolean | - | false | - | +| hairline | 是否细边框 | boolean | - | false | - | +| loading | 加载中按钮 | boolean | - | false | - | +| block | 块状按钮 | boolean | - | false | - | +| size | 按钮尺寸 | string | small / medium / large | medium | - | +| disabled | 禁用按钮 | boolean | - | false | - | +| icon | 图标类名 | string | - | - | - | +| loading-color | 加载图标颜色 | string | - | - | - | +| open-type | 微信开放能力 | string | - | - | - | +| hover-stop-propagation | 指定是否阻止本节点的祖先节点出现点击态 | boolean | - | false | - | +| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | string | zh_CN / zh_TW | en | - | +| session-from | 会话来源，open-type="contact"时有效 | string | - | - | - | +| session-message-title | 会话内消息卡片标题，open-type="contact"时有效 | string | - | 当前标题 | - | +| session-message-path | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | string | - | 当前分享路径 | - | +| send-message-img | 会话内消息卡片图片，open-type="contact"时有效 | string | - | 截图 | - | +| app-parameter | 打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效 | string | - | - | - | +| show-message-card | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | boolean | - | false | - | +| classPrefix | 类名前缀，用于使用自定义图标，参见[icon](/component/icon#自定义图标) | string | - | 'wd-icon' | 0.1.27 | +| button-id | 按钮的唯一标识，可用于设置隐私同意授权按钮的 id | string | - | - | 1.3.6 | +| scope | 支付宝小程序使用，当 open-type 为 getAuthorize 时有效。 | ButtonScope | `phoneNumber` / `userInfo` | - | 1.3.14 | ### ButtonOpenType 开放能力 @@ -141,18 +164,18 @@ ## Events -| 事件名称 | 说明 | 参数 | 最低版本 | -|---------|-----|-----|---------| -| click | 点击事件 | `event` | - | -| getuserinfo | 获取用户信息 | `detail` | - | -| contact | 客服消息回调，open-type="contact"时有效 | `detail` | - | -| getphonenumber | 获取用户手机号回调，open-type=getPhoneNumber时有效 | `detail` | - | -| error | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 | `detail` | - | -| launchapp | 打开 APP 成功的回调，open-type=launchApp时有效 | `detail` | - | -| opensetting | 在打开授权设置页后回调，open-type=openSetting时有效 | `detail` | - | +| 事件名称 | 说明 | 参数 | 最低版本 | +| -------------- | ------------------------------------------------------------ | -------- | -------- | +| click | 点击事件 | `event` | - | +| getuserinfo | 获取用户信息 | `detail` | - | +| contact | 客服消息回调，open-type="contact"时有效 | `detail` | - | +| getphonenumber | 获取用户手机号回调，open-type=getPhoneNumber 时有效 | `detail` | - | +| error | 当使用开放能力时，发生错误的回调，open-type=launchApp 时有效 | `detail` | - | +| launchapp | 打开 APP 成功的回调，open-type=launchApp 时有效 | `detail` | - | +| opensetting | 在打开授权设置页后回调，open-type=openSetting 时有效 | `detail` | - | ## 外部样式类 -| 类名 | 说明 | 最低版本 | -|-----|------|--------| -| custom-class | 根节点样式 | - | +| 类名 | 说明 | 最低版本 | +| ------------ | ---------- | -------- | +| custom-class | 根节点样式 | - | diff --git a/src/pages/button/Index.vue b/src/pages/button/Index.vue index 9ceca066..7ef8e645 100644 --- a/src/pages/button/Index.vue +++ b/src/pages/button/Index.vue @@ -1,6 +1,6 @@ @@ -124,10 +132,18 @@ function handleGetuserinfo(event: any) { } diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss index 4db43c39..db0bb1aa 100644 --- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss +++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss @@ -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 */ diff --git a/src/uni_modules/wot-design-uni/components/wd-button/index.scss b/src/uni_modules/wot-design-uni/components/wd-button/index.scss index a74558f1..e4348295 100644 --- a/src/uni_modules/wot-design-uni/components/wd-button/index.scss +++ b/src/uni_modules/wot-design-uni/components/wd-button/index.scss @@ -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;