first commit
This commit is contained in:
lingxiao865
238
uni_modules/tdesign-uniapp/components/button/README.en-US.md
Normal file
238
uni_modules/tdesign-uniapp/components/button/README.en-US.md
Normal file
@@ -0,0 +1,238 @@
|
||||
---
|
||||
title: Button
|
||||
description: Buttons are used to open a closed-loop task, such as "delete" an object, "buy" an item, etc.
|
||||
spline: base
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
For global import, configure it in `app.json` in the root directory of the miniprogram. For local import, configure it in `index.json` of the page or component that needs to be imported.
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-button": "tdesign-miniprogram/button/button"
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Code Demo
|
||||
|
||||
### 01 Component Type
|
||||
|
||||
#### Basic Buttons
|
||||
|
||||
{{ base }}
|
||||
|
||||
#### Icon Button
|
||||
|
||||
{{ icon-btn }}
|
||||
|
||||
#### Ghost Button
|
||||
|
||||
{{ ghost-btn }}
|
||||
|
||||
#### Combination Button
|
||||
|
||||
{{ group-btn }}
|
||||
|
||||
#### Banner Button
|
||||
|
||||
{{ block-btn }}
|
||||
|
||||
### 02 Component State
|
||||
|
||||
#### Buttons for different states
|
||||
|
||||
{{ disabled }}
|
||||
|
||||
### 03 Component Style
|
||||
|
||||
#### Different sizes of buttons
|
||||
|
||||
{{ size }}
|
||||
|
||||
#### Different shaped buttons
|
||||
|
||||
{{ shape }}
|
||||
|
||||
#### Different color theme buttons
|
||||
|
||||
{{ theme }}
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Button Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
app-parameter | String | - | \- | N
|
||||
block | Boolean | false | make button to be a block-level element | N
|
||||
content | String | - | button's children elements | N
|
||||
custom-dataset | String / Number / Boolean / Object / Array | {} | Typescript：`string \| number \| boolean \| object \| Array<string \| number \| boolean \| object>` | N
|
||||
disabled | Boolean | undefined | disable the button, make it can not be clicked | N
|
||||
ghost | Boolean | false | make background-color to be transparent | N
|
||||
hover-class | String | - | \- | N
|
||||
hover-start-time | Number | 20 | \- | N
|
||||
hover-stay-time | Number | 70 | \- | N
|
||||
hover-stop-propagation | Boolean | false | \- | N
|
||||
icon | String / Object | - | icon name | N
|
||||
lang | String | - | message language。options: en/zh_CN/zh_TW | N
|
||||
loading | Boolean | false | set button to be loading state | N
|
||||
loading-props | Object | {} | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/button/type.ts) | N
|
||||
open-type | String | - | open type of button, [Miniprogram Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。options: contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
|
||||
phone-number-no-quota-toast | Boolean | true | \- | N
|
||||
send-message-img | String | 截图 | \- | N
|
||||
send-message-path | String | 当前分享路径 | \- | N
|
||||
send-message-title | String | 当前标题 | \- | N
|
||||
session-from | String | - | \- | N
|
||||
shape | String | rectangle | button shape。options: rectangle/square/round/circle | N
|
||||
show-message-card | Boolean | false | \- | N
|
||||
size | String | medium | a button has four size。options: extra-small/small/medium/large | N
|
||||
t-id | String | - | id | N
|
||||
theme | String | default | button theme。options: default/primary/danger/light | N
|
||||
type | String | - | type of button element, same as formType of Miniprogram。options: submit/reset | N
|
||||
variant | String | base | variant of button。options: base/outline/dashed/text | N
|
||||
|
||||
### Button Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
agreeprivacyauthorization | \- | \-
|
||||
chooseavatar | \- | \-
|
||||
click | `(e: MouseEvent)` | trigger on click
|
||||
contact | \- | \-
|
||||
createliveactivity | \- | \-
|
||||
error | \- | \-
|
||||
getphonenumber | \- | \-
|
||||
getrealtimephonenumber | \- | \-
|
||||
getuserinfo | \- | \-
|
||||
launchapp | \- | \-
|
||||
opensetting | \- | \-
|
||||
|
||||
### Button Slots
|
||||
|
||||
name | Description
|
||||
-- | --
|
||||
\- | \-
|
||||
content | button's children elements
|
||||
suffix | \-
|
||||
|
||||
### Button External Classes
|
||||
|
||||
className | Description
|
||||
-- | --
|
||||
t-class | \-
|
||||
t-class-icon | class name of icon
|
||||
t-class-loading | class name of loading
|
||||
|
||||
### CSS Variables
|
||||
|
||||
The component provides the following CSS variables, which can be used to customize styles.
|
||||
Name | Default Value | Description
|
||||
-- | -- | --
|
||||
--td-button-border-radius | @radius-default | -
|
||||
--td-button-border-width | 4rpx | -
|
||||
--td-button-danger-active-bg-color | @error-color-active | -
|
||||
--td-button-danger-active-border-color | @error-color-active | -
|
||||
--td-button-danger-bg-color | @error-color | -
|
||||
--td-button-danger-border-color | @error-color | -
|
||||
--td-button-danger-color | @text-color-anti | -
|
||||
--td-button-danger-dashed-border-color | @button-danger-dashed-color | -
|
||||
--td-button-danger-dashed-color | @error-color | -
|
||||
--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
|
||||
--td-button-danger-disabled-bg | @error-color-3 | -
|
||||
--td-button-danger-disabled-border-color | @error-color-3 | -
|
||||
--td-button-danger-disabled-color | @font-white-1 | -
|
||||
--td-button-danger-outline-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-danger-outline-active-border-color | @error-color-active | -
|
||||
--td-button-danger-outline-border-color | @button-danger-outline-color | -
|
||||
--td-button-danger-outline-color | @error-color | -
|
||||
--td-button-danger-outline-disabled-color | @error-color-3 | -
|
||||
--td-button-danger-text-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-danger-text-color | @error-color | -
|
||||
--td-button-danger-text-disabled-color | @button-danger-disabled-color | -
|
||||
--td-button-default-active-bg-color | @bg-color-component-active | -
|
||||
--td-button-default-active-border-color | @bg-color-component-active | -
|
||||
--td-button-default-bg-color | @bg-color-component | -
|
||||
--td-button-default-border-color | @bg-color-component | -
|
||||
--td-button-default-color | @text-color-primary | -
|
||||
--td-button-default-disabled-bg | @bg-color-component-disabled | -
|
||||
--td-button-default-disabled-border-color | @bg-color-component-disabled | -
|
||||
--td-button-default-disabled-color | @text-color-disabled | -
|
||||
--td-button-default-outline-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-default-outline-active-border-color | @component-border | -
|
||||
--td-button-default-outline-border-color | @component-border | -
|
||||
--td-button-default-outline-color | @text-color-primary | -
|
||||
--td-button-default-outline-disabled-color | @component-border | -
|
||||
--td-button-default-text-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-extra-small-font-size | @font-size-base | -
|
||||
--td-button-extra-small-height | 56rpx | -
|
||||
--td-button-extra-small-icon-size | 36rpx | -
|
||||
--td-button-extra-small-padding-horizontal | 16rpx | -
|
||||
--td-button-font-weight | 600 | -
|
||||
--td-button-ghost-border-color | @button-ghost-color | -
|
||||
--td-button-ghost-color | @text-color-anti | -
|
||||
--td-button-ghost-danger-border-color | @error-color | -
|
||||
--td-button-ghost-danger-color | @error-color | -
|
||||
--td-button-ghost-danger-hover-color | @error-color-active | -
|
||||
--td-button-ghost-disabled-color | @font-white-4 | -
|
||||
--td-button-ghost-hover-color | @font-white-2 | -
|
||||
--td-button-ghost-primary-border-color | @brand-color | -
|
||||
--td-button-ghost-primary-color | @brand-color | -
|
||||
--td-button-ghost-primary-hover-color | @brand-color-active | -
|
||||
--td-button-icon-border-radius | 8rpx | -
|
||||
--td-button-icon-spacer | @spacer | -
|
||||
--td-button-large-font-size | @font-size-m | -
|
||||
--td-button-large-height | 96rpx | -
|
||||
--td-button-large-icon-size | 48rpx | -
|
||||
--td-button-large-padding-horizontal | 40rpx | -
|
||||
--td-button-light-active-bg-color | @brand-color-light-active | -
|
||||
--td-button-light-active-border-color | @brand-color-light-active | -
|
||||
--td-button-light-bg-color | @brand-color-light | -
|
||||
--td-button-light-border-color | @brand-color-light | -
|
||||
--td-button-light-color | @brand-color | -
|
||||
--td-button-light-disabled-bg | @brand-color-light | -
|
||||
--td-button-light-disabled-border-color | @brand-color-light | -
|
||||
--td-button-light-disabled-color | @brand-color-disabled | -
|
||||
--td-button-light-outline-active-bg-color | @brand-color-light-active | -
|
||||
--td-button-light-outline-active-border-color | @brand-color-active | -
|
||||
--td-button-light-outline-bg-color | @brand-color-light | -
|
||||
--td-button-light-outline-border-color | @button-light-outline-color | -
|
||||
--td-button-light-outline-color | @brand-color | -
|
||||
--td-button-light-outline-disabled-color | @brand-color-disabled | -
|
||||
--td-button-light-text-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-light-text-color | @brand-color | -
|
||||
--td-button-medium-font-size | @font-size-m | -
|
||||
--td-button-medium-height | 80rpx | -
|
||||
--td-button-medium-icon-size | 40rpx | -
|
||||
--td-button-medium-padding-horizontal | 32rpx | -
|
||||
--td-button-primary-active-bg-color | @brand-color-active | -
|
||||
--td-button-primary-active-border-color | @brand-color-active | -
|
||||
--td-button-primary-bg-color | @brand-color | -
|
||||
--td-button-primary-border-color | @brand-color | -
|
||||
--td-button-primary-color | @text-color-anti | -
|
||||
--td-button-primary-dashed-border-color | @button-primary-dashed-color | -
|
||||
--td-button-primary-dashed-color | @brand-color | -
|
||||
--td-button-primary-dashed-disabled-color | @brand-color-disabled | -
|
||||
--td-button-primary-disabled-bg | @brand-color-disabled | -
|
||||
--td-button-primary-disabled-border-color | @brand-color-disabled | -
|
||||
--td-button-primary-disabled-color | @text-color-anti | -
|
||||
--td-button-primary-outline-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-primary-outline-active-border-color | @brand-color-active | -
|
||||
--td-button-primary-outline-border-color | @button-primary-outline-color | -
|
||||
--td-button-primary-outline-color | @brand-color | -
|
||||
--td-button-primary-outline-disabled-color | @brand-color-disabled | -
|
||||
--td-button-primary-text-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-primary-text-color | @brand-color | -
|
||||
--td-button-primary-text-disabled-color | @brand-color-disabled | -
|
||||
--td-button-small-font-size | @font-size-base | -
|
||||
--td-button-small-height | 64rpx | -
|
||||
--td-button-small-icon-size | 36rpx | -
|
||||
--td-button-small-padding-horizontal | 24rpx | -
|
||||
229
uni_modules/tdesign-uniapp/components/button/README.md
Normal file
229
uni_modules/tdesign-uniapp/components/button/README.md
Normal file
@@ -0,0 +1,229 @@
|
||||
---
|
||||
title: Button 按钮
|
||||
description: 用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
|
||||
spline: base
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
|
||||
## 引入
|
||||
|
||||
可在 `main.ts` 或在需要使用的页面或组件中引入。
|
||||
|
||||
```js
|
||||
import TButton from '@tdesign/uniapp/button/button.vue';
|
||||
```
|
||||
|
||||
### 01 组件类型
|
||||
|
||||
#### 基础按钮
|
||||
|
||||
{{ base }}
|
||||
|
||||
#### 图标按钮
|
||||
|
||||
{{ icon-btn }}
|
||||
|
||||
#### 幽灵按钮
|
||||
|
||||
{{ ghost-btn }}
|
||||
|
||||
#### 组合按钮
|
||||
|
||||
{{ group-btn }}
|
||||
|
||||
#### 通栏按钮
|
||||
|
||||
{{ block-btn }}
|
||||
|
||||
### 02 组件状态
|
||||
|
||||
#### 按钮禁用态
|
||||
|
||||
{{ disabled }}
|
||||
|
||||
### 03 组件样式
|
||||
|
||||
#### 按钮尺寸
|
||||
|
||||
{{ size }}
|
||||
|
||||
#### 按钮形状
|
||||
|
||||
{{ shape }}
|
||||
|
||||
#### 按钮主题
|
||||
|
||||
{{ theme }}
|
||||
|
||||
## API
|
||||
|
||||
### Button Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
custom-style | Object | - | 自定义样式 | N
|
||||
app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N
|
||||
block | Boolean | false | 是否为块级元素 | N
|
||||
content | String | - | 按钮内容 | N
|
||||
custom-dataset | String / Number / Boolean / Object / Array | {} | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`string \| number \| boolean \| object \| Array<string \| number \| boolean \| object>` | N
|
||||
disabled | Boolean | undefined | 禁用状态。优先级：Button.disabled > Form.disabled | N
|
||||
ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
|
||||
hover-class | String | - | 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 | N
|
||||
hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N
|
||||
hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N
|
||||
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
|
||||
icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
|
||||
lang | String | - | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。<br />具体释义：<br />`en` 英文；<br />`zh_CN` 简体中文；<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：en/zh_CN/zh_TW | N
|
||||
loading | Boolean | false | 是否显示为加载状态 | N
|
||||
loading-props | Object | {} | 透传 Loading 组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/button/type.ts) | N
|
||||
open-type | String | - | 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；<br />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
|
||||
phone-number-no-quota-toast | Boolean | true | 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 | N
|
||||
send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N
|
||||
send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N
|
||||
send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N
|
||||
session-from | String | - | 会话来源，open-type="contact"时有效 | N
|
||||
shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
|
||||
show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N
|
||||
size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large | N
|
||||
t-id | String | - | 按钮标签id | N
|
||||
theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
|
||||
type | String | - | 同小程序的 formType。可选项：submit/reset | N
|
||||
variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
|
||||
|
||||
### Button Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
agreeprivacyauthorization | \- | 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })）
|
||||
chooseavatar | \- | 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接
|
||||
click | `(e: MouseEvent)` | 点击时触发
|
||||
contact | \- | 原生按钮属性，客服消息回调，`open-type="contact"` 时有效
|
||||
createliveactivity | \- | 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效
|
||||
error | \- | 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效
|
||||
getphonenumber | \- | 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
|
||||
getrealtimephonenumber | \- | 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
|
||||
getuserinfo | \- | 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
|
||||
launchapp | \- | 打开 APP 成功的回调，`open-type=launchApp` 时有效
|
||||
opensetting | \- | 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效
|
||||
|
||||
### Button Slots
|
||||
|
||||
名称 | 描述
|
||||
-- | --
|
||||
\- | 默认插槽，作用同 `content` 插槽
|
||||
content | 自定义 `content` 显示内容
|
||||
suffix | 右侧内容，可用于定义右侧图标
|
||||
|
||||
### Button External Classes
|
||||
|
||||
类名 | 描述
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
t-class-icon | 图标样式类
|
||||
t-class-loading | 加载样式类
|
||||
|
||||
### CSS Variables
|
||||
|
||||
组件提供了下列 CSS 变量，可用于自定义样式。
|
||||
名称 | 默认值 | 描述
|
||||
-- | -- | --
|
||||
--td-button-border-radius | @radius-default | -
|
||||
--td-button-border-width | 4rpx | -
|
||||
--td-button-danger-active-bg-color | @error-color-active | -
|
||||
--td-button-danger-active-border-color | @error-color-active | -
|
||||
--td-button-danger-bg-color | @error-color | -
|
||||
--td-button-danger-border-color | @error-color | -
|
||||
--td-button-danger-color | @text-color-anti | -
|
||||
--td-button-danger-dashed-border-color | @button-danger-dashed-color | -
|
||||
--td-button-danger-dashed-color | @error-color | -
|
||||
--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
|
||||
--td-button-danger-disabled-bg | @error-color-3 | -
|
||||
--td-button-danger-disabled-border-color | @error-color-3 | -
|
||||
--td-button-danger-disabled-color | @font-white-1 | -
|
||||
--td-button-danger-outline-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-danger-outline-active-border-color | @error-color-active | -
|
||||
--td-button-danger-outline-border-color | @button-danger-outline-color | -
|
||||
--td-button-danger-outline-color | @error-color | -
|
||||
--td-button-danger-outline-disabled-color | @error-color-3 | -
|
||||
--td-button-danger-text-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-danger-text-color | @error-color | -
|
||||
--td-button-danger-text-disabled-color | @button-danger-disabled-color | -
|
||||
--td-button-default-active-bg-color | @bg-color-component-active | -
|
||||
--td-button-default-active-border-color | @bg-color-component-active | -
|
||||
--td-button-default-bg-color | @bg-color-component | -
|
||||
--td-button-default-border-color | @bg-color-component | -
|
||||
--td-button-default-color | @text-color-primary | -
|
||||
--td-button-default-disabled-bg | @bg-color-component-disabled | -
|
||||
--td-button-default-disabled-border-color | @bg-color-component-disabled | -
|
||||
--td-button-default-disabled-color | @text-color-disabled | -
|
||||
--td-button-default-outline-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-default-outline-active-border-color | @component-border | -
|
||||
--td-button-default-outline-border-color | @component-border | -
|
||||
--td-button-default-outline-color | @text-color-primary | -
|
||||
--td-button-default-outline-disabled-color | @component-border | -
|
||||
--td-button-default-text-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-extra-small-font-size | @font-size-base | -
|
||||
--td-button-extra-small-height | 56rpx | -
|
||||
--td-button-extra-small-icon-size | 36rpx | -
|
||||
--td-button-extra-small-padding-horizontal | 16rpx | -
|
||||
--td-button-font-weight | 600 | -
|
||||
--td-button-ghost-border-color | @button-ghost-color | -
|
||||
--td-button-ghost-color | @text-color-anti | -
|
||||
--td-button-ghost-danger-border-color | @error-color | -
|
||||
--td-button-ghost-danger-color | @error-color | -
|
||||
--td-button-ghost-danger-hover-color | @error-color-active | -
|
||||
--td-button-ghost-disabled-color | @font-white-4 | -
|
||||
--td-button-ghost-hover-color | @font-white-2 | -
|
||||
--td-button-ghost-primary-border-color | @brand-color | -
|
||||
--td-button-ghost-primary-color | @brand-color | -
|
||||
--td-button-ghost-primary-hover-color | @brand-color-active | -
|
||||
--td-button-icon-border-radius | 8rpx | -
|
||||
--td-button-icon-spacer | @spacer | -
|
||||
--td-button-large-font-size | @font-size-m | -
|
||||
--td-button-large-height | 96rpx | -
|
||||
--td-button-large-icon-size | 48rpx | -
|
||||
--td-button-large-padding-horizontal | 40rpx | -
|
||||
--td-button-light-active-bg-color | @brand-color-light-active | -
|
||||
--td-button-light-active-border-color | @brand-color-light-active | -
|
||||
--td-button-light-bg-color | @brand-color-light | -
|
||||
--td-button-light-border-color | @brand-color-light | -
|
||||
--td-button-light-color | @brand-color | -
|
||||
--td-button-light-disabled-bg | @brand-color-light | -
|
||||
--td-button-light-disabled-border-color | @brand-color-light | -
|
||||
--td-button-light-disabled-color | @brand-color-disabled | -
|
||||
--td-button-light-outline-active-bg-color | @brand-color-light-active | -
|
||||
--td-button-light-outline-active-border-color | @brand-color-active | -
|
||||
--td-button-light-outline-bg-color | @brand-color-light | -
|
||||
--td-button-light-outline-border-color | @button-light-outline-color | -
|
||||
--td-button-light-outline-color | @brand-color | -
|
||||
--td-button-light-outline-disabled-color | @brand-color-disabled | -
|
||||
--td-button-light-text-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-light-text-color | @brand-color | -
|
||||
--td-button-medium-font-size | @font-size-m | -
|
||||
--td-button-medium-height | 80rpx | -
|
||||
--td-button-medium-icon-size | 40rpx | -
|
||||
--td-button-medium-padding-horizontal | 32rpx | -
|
||||
--td-button-primary-active-bg-color | @brand-color-active | -
|
||||
--td-button-primary-active-border-color | @brand-color-active | -
|
||||
--td-button-primary-bg-color | @brand-color | -
|
||||
--td-button-primary-border-color | @brand-color | -
|
||||
--td-button-primary-color | @text-color-anti | -
|
||||
--td-button-primary-dashed-border-color | @button-primary-dashed-color | -
|
||||
--td-button-primary-dashed-color | @brand-color | -
|
||||
--td-button-primary-dashed-disabled-color | @brand-color-disabled | -
|
||||
--td-button-primary-disabled-bg | @brand-color-disabled | -
|
||||
--td-button-primary-disabled-border-color | @brand-color-disabled | -
|
||||
--td-button-primary-disabled-color | @text-color-anti | -
|
||||
--td-button-primary-outline-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-primary-outline-active-border-color | @brand-color-active | -
|
||||
--td-button-primary-outline-border-color | @button-primary-outline-color | -
|
||||
--td-button-primary-outline-color | @brand-color | -
|
||||
--td-button-primary-outline-disabled-color | @brand-color-disabled | -
|
||||
--td-button-primary-text-active-bg-color | @bg-color-container-active | -
|
||||
--td-button-primary-text-color | @brand-color | -
|
||||
--td-button-primary-text-disabled-color | @brand-color-disabled | -
|
||||
--td-button-small-font-size | @font-size-base | -
|
||||
--td-button-small-height | 64rpx | -
|
||||
--td-button-small-icon-size | 36rpx | -
|
||||
--td-button-small-padding-horizontal | 24rpx | -
|
||||
514
uni_modules/tdesign-uniapp/components/button/button.css
Normal file
514
uni_modules/tdesign-uniapp/components/button/button.css
Normal file
@@ -0,0 +1,514 @@
|
||||
.t-button--size-extra-small {
|
||||
font-size: var(--td-button-extra-small-font-size, var(--td-font-size-base, 28rpx));
|
||||
padding-left: var(--td-button-extra-small-padding-horizontal, 16rpx);
|
||||
padding-right: var(--td-button-extra-small-padding-horizontal, 16rpx);
|
||||
height: var(--td-button-extra-small-height, 56rpx);
|
||||
line-height: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--size-extra-small .t-button__icon {
|
||||
font-size: var(--td-button-extra-small-icon-size, 36rpx);
|
||||
}
|
||||
.t-button--size-small {
|
||||
font-size: var(--td-button-small-font-size, var(--td-font-size-base, 28rpx));
|
||||
padding-left: var(--td-button-small-padding-horizontal, 24rpx);
|
||||
padding-right: var(--td-button-small-padding-horizontal, 24rpx);
|
||||
height: var(--td-button-small-height, 64rpx);
|
||||
line-height: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--size-small .t-button__icon {
|
||||
font-size: var(--td-button-small-icon-size, 36rpx);
|
||||
}
|
||||
.t-button--size-medium {
|
||||
font-size: var(--td-button-medium-font-size, var(--td-font-size-m, 32rpx));
|
||||
padding-left: var(--td-button-medium-padding-horizontal, 32rpx);
|
||||
padding-right: var(--td-button-medium-padding-horizontal, 32rpx);
|
||||
height: var(--td-button-medium-height, 80rpx);
|
||||
line-height: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--size-medium .t-button__icon {
|
||||
font-size: var(--td-button-medium-icon-size, 40rpx);
|
||||
}
|
||||
.t-button--size-large {
|
||||
font-size: var(--td-button-large-font-size, var(--td-font-size-m, 32rpx));
|
||||
padding-left: var(--td-button-large-padding-horizontal, 40rpx);
|
||||
padding-right: var(--td-button-large-padding-horizontal, 40rpx);
|
||||
height: var(--td-button-large-height, 96rpx);
|
||||
line-height: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--size-large .t-button__icon {
|
||||
font-size: var(--td-button-large-icon-size, 48rpx);
|
||||
}
|
||||
.t-button--default {
|
||||
color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
background-color: var(--td-button-default-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--default::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--default.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--default.t-button--hover,
|
||||
.t-button--default.t-button--hover::after {
|
||||
background-color: var(--td-button-default-active-bg-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
|
||||
border-color: var(--td-button-default-active-border-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
|
||||
}
|
||||
.t-button--default.t-button--disabled {
|
||||
color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
background-color: var(--td-button-default-disabled-bg, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
|
||||
}
|
||||
.t-button--default.t-button--disabled,
|
||||
.t-button--default.t-button--disabled::after {
|
||||
border-color: var(--td-button-default-disabled-border-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
|
||||
}
|
||||
.t-button--primary {
|
||||
color: var(--td-button-primary-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-button-primary-bg-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--primary::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--primary.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--primary.t-button--hover,
|
||||
.t-button--primary.t-button--hover::after {
|
||||
background-color: var(--td-button-primary-active-bg-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
border-color: var(--td-button-primary-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--primary.t-button--disabled {
|
||||
color: var(--td-button-primary-disabled-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-button-primary-disabled-bg, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--primary.t-button--disabled,
|
||||
.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-disabled-border-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--light {
|
||||
color: var(--td-button-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: var(--td-button-light-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--light::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--light.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--light.t-button--hover,
|
||||
.t-button--light.t-button--hover::after {
|
||||
background-color: var(--td-button-light-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||
border-color: var(--td-button-light-active-border-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||
}
|
||||
.t-button--light.t-button--disabled {
|
||||
color: var(--td-button-light-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
background-color: var(--td-button-light-disabled-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--light.t-button--disabled,
|
||||
.t-button--light.t-button--disabled::after {
|
||||
border-color: var(--td-button-light-disabled-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--danger {
|
||||
color: var(--td-button-danger-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--danger::after {
|
||||
border-width: var(--td-button-border-width, 4rpx);
|
||||
border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--danger.t-button--hover {
|
||||
z-index: 0;
|
||||
}
|
||||
.t-button--danger.t-button--hover,
|
||||
.t-button--danger.t-button--hover::after {
|
||||
background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
border-color: var(--td-button-danger-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--danger.t-button--disabled {
|
||||
color: var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff));
|
||||
background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #ffb9b0));
|
||||
}
|
||||
.t-button--danger.t-button--disabled,
|
||||
.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #ffb9b0));
|
||||
}
|
||||
.t-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
transition: all 0.3s;
|
||||
touch-action: manipulation;
|
||||
border-radius: var(--td-button-border-radius, var(--td-radius-default, 12rpx));
|
||||
outline: none;
|
||||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||||
font-weight: var(--td-button-font-weight, 600);
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* stylelint-disable-next-line */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.t-button::after {
|
||||
border-radius: calc(var(--td-button-border-radius, var(--td-radius-default, 12rpx)) * 2);
|
||||
}
|
||||
.t-button--text {
|
||||
color: var(--td-button-default-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--text,
|
||||
.t-button--text::after {
|
||||
border: 0;
|
||||
}
|
||||
.t-button--text.t-button--hover,
|
||||
.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-button-default-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--text.t-button--primary {
|
||||
color: var(--td-button-primary-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--text.t-button--primary.t-button--hover,
|
||||
.t-button--text.t-button--primary.t-button--hover::after {
|
||||
background-color: var(--td-button-primary-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--text.t-button--primary.t-button--disabled {
|
||||
color: var(--td-button-primary-text-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
}
|
||||
.t-button--text.t-button--danger {
|
||||
color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--text.t-button--danger.t-button--hover,
|
||||
.t-button--text.t-button--danger.t-button--hover::after {
|
||||
background-color: var(--td-button-danger-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--text.t-button--danger.t-button--disabled {
|
||||
color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
}
|
||||
.t-button--text.t-button--light {
|
||||
color: var(--td-button-light-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--text.t-button--light.t-button--hover,
|
||||
.t-button--text.t-button--light.t-button--hover::after {
|
||||
background-color: var(--td-button-light-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
}
|
||||
.t-button--text.t-button--disabled {
|
||||
color: var(--td-button-default-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
|
||||
}
|
||||
.t-button--outline {
|
||||
color: var(--td-button-default-outline-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
}
|
||||
.t-button--outline,
|
||||
.t-button--outline::after {
|
||||
border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--outline.t-button--hover,
|
||||
.t-button--outline.t-button--hover::after {
|
||||
background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--outline.t-button--disabled {
|
||||
color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--outline.t-button--disabled,
|
||||
.t-button--outline.t-button--disabled::after {
|
||||
border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--outline.t-button--primary {
|
||||
color: var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--outline.t-button--primary,
|
||||
.t-button--outline.t-button--primary::after {
|
||||
border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--hover {
|
||||
color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--hover::after {
|
||||
background-color: var(--td-button-primary-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-button--disabled,
|
||||
.t-button--outline.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--outline.t-button--danger {
|
||||
color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--outline.t-button--danger,
|
||||
.t-button--outline.t-button--danger::after {
|
||||
border-color: var(--td-button-danger-outline-border-color, var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--hover {
|
||||
color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--hover::after {
|
||||
background-color: var(--td-button-danger-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--disabled {
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-button--disabled,
|
||||
.t-button--outline.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
|
||||
}
|
||||
.t-button--outline.t-button--light {
|
||||
color: var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: var(--td-button-light-outline-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-button--outline.t-button--light,
|
||||
.t-button--outline.t-button--light::after {
|
||||
border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--hover {
|
||||
color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--hover,
|
||||
.t-button--outline.t-button--light.t-button--hover::after {
|
||||
background-color: var(--td-button-light-outline-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
|
||||
border-color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--disabled {
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--outline.t-button--light.t-button--disabled,
|
||||
.t-button--outline.t-button--light.t-button--disabled::after {
|
||||
border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--dashed {
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
border-style: dashed;
|
||||
border-width: 2rpx;
|
||||
}
|
||||
.t-button--dashed::after {
|
||||
border: 0;
|
||||
}
|
||||
.t-button--dashed.t-button--hover,
|
||||
.t-button--dashed.t-button--hover::after {
|
||||
background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
|
||||
border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
|
||||
}
|
||||
.t-button--dashed.t-button--primary {
|
||||
color: var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--dashed.t-button--primary,
|
||||
.t-button--dashed.t-button--primary::after {
|
||||
border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
|
||||
}
|
||||
.t-button--dashed.t-button--primary.t-button--disabled {
|
||||
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
|
||||
color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--dashed.t-button--primary.t-button--disabled,
|
||||
.t-button--dashed.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
|
||||
}
|
||||
.t-button--dashed.t-button--danger {
|
||||
color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--dashed.t-button--danger,
|
||||
.t-button--dashed.t-button--danger::after {
|
||||
border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
|
||||
}
|
||||
.t-button--dashed.t-button--danger.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||
}
|
||||
.t-button--dashed.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
|
||||
}
|
||||
.t-button--ghost {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
}
|
||||
.t-button--ghost,
|
||||
.t-button--ghost::after {
|
||||
border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff))));
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--hover {
|
||||
color: var(--td-button-ghost-hover-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--hover,
|
||||
.t-button--ghost.t-button--default.t-button--hover::after {
|
||||
background-color: transparent;
|
||||
border-color: var(--td-button-ghost-hover-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary {
|
||||
color: var(--td-button-ghost-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary,
|
||||
.t-button--ghost.t-button--primary::after {
|
||||
border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--hover {
|
||||
color: var(--td-button-ghost-primary-hover-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--hover,
|
||||
.t-button--ghost.t-button--primary.t-button--hover::after {
|
||||
background-color: transparent;
|
||||
border-color: var(--td-button-ghost-primary-hover-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--text.t-button--hover,
|
||||
.t-button--ghost.t-button--primary.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-gray-color-10, #4b4b4b);
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--primary.t-button--disabled,
|
||||
.t-button--ghost.t-button--primary.t-button--disabled::after {
|
||||
border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger {
|
||||
color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger,
|
||||
.t-button--ghost.t-button--danger::after {
|
||||
border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--hover {
|
||||
color: var(--td-button-ghost-danger-hover-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--hover,
|
||||
.t-button--ghost.t-button--danger.t-button--hover::after {
|
||||
background-color: transparent;
|
||||
border-color: var(--td-button-ghost-danger-hover-color, var(--td-error-color-active, var(--td-error-color-7, #ad352f)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--text.t-button--hover,
|
||||
.t-button--ghost.t-button--danger.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-gray-color-10, #4b4b4b);
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--danger.t-button--disabled,
|
||||
.t-button--ghost.t-button--danger.t-button--disabled::after {
|
||||
border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--text.t-button--hover,
|
||||
.t-button--ghost.t-button--default.t-button--text.t-button--hover::after {
|
||||
background-color: var(--td-gray-color-10, #4b4b4b);
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--disabled {
|
||||
background-color: transparent;
|
||||
color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button--ghost.t-button--default.t-button--disabled,
|
||||
.t-button--ghost.t-button--default.t-button--disabled::after {
|
||||
border-color: var(--td-button-ghost-disabled-color, var(--td-font-white-4, rgba(255, 255, 255, 0.22)));
|
||||
}
|
||||
.t-button__loading + .t-button__content:not(:empty),
|
||||
.t-button__icon + .t-button__content:not(:empty) {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.t-button__icon {
|
||||
border-radius: var(--td-button-icon-border-radius, 8rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-large {
|
||||
border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-large::after {
|
||||
border-radius: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-medium {
|
||||
border-radius: calc(var(--td-button-medium-height, 80rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-medium::after {
|
||||
border-radius: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-small {
|
||||
border-radius: calc(var(--td-button-small-height, 64rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-small::after {
|
||||
border-radius: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--round.t-button--size-extra-small {
|
||||
border-radius: calc(var(--td-button-extra-small-height, 56rpx) / 2);
|
||||
}
|
||||
.t-button--round.t-button--size-extra-small::after {
|
||||
border-radius: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--square {
|
||||
padding: 0;
|
||||
}
|
||||
.t-button--square.t-button--size-large {
|
||||
width: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-medium {
|
||||
width: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-small {
|
||||
width: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--square.t-button--size-extra-small {
|
||||
width: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--circle {
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--circle.t-button--size-large {
|
||||
width: var(--td-button-large-height, 96rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-large::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--circle.t-button--size-medium {
|
||||
width: var(--td-button-medium-height, 80rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-medium::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--circle.t-button--size-small {
|
||||
width: var(--td-button-small-height, 64rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-small::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--circle.t-button--size-extra-small {
|
||||
width: var(--td-button-extra-small-height, 56rpx);
|
||||
}
|
||||
.t-button--circle.t-button--size-extra-small::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.t-button--block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.t-button--disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.t-button__loading--wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-button.t-button--hover::after {
|
||||
z-index: -1;
|
||||
}
|
||||
244
uni_modules/tdesign-uniapp/components/button/button.vue
Normal file
244
uni_modules/tdesign-uniapp/components/button/button.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<button
|
||||
:id="tId"
|
||||
:style="tools._style([customStyle])"
|
||||
:data-custom="customDataset"
|
||||
:class="className"
|
||||
:form-type="disabled || loading ? '' : type"
|
||||
:open-type="disabled || loading ? '' : openType"
|
||||
:hover-stop-propagation="hoverStopPropagation"
|
||||
:hover-start-time="hoverStartTime"
|
||||
:hover-stay-time="hoverStayTime"
|
||||
:lang="lang"
|
||||
:session-from="sessionFrom"
|
||||
:hover-class="disabled || loading ? '' : hoverClass || classPrefix + '--hover'"
|
||||
:send-message-title="sendMessageTitle"
|
||||
:send-message-path="sendMessagePath"
|
||||
:send-message-img="sendMessageImg"
|
||||
:app-parameter="appParameter"
|
||||
:show-message-card="showMessageCard"
|
||||
:aria-label="ariaLabel"
|
||||
@click.stop.prevent="handleTap"
|
||||
@getuserinfo="getuserinfo"
|
||||
@contact="contact"
|
||||
@getphonenumber="getphonenumber"
|
||||
@error="error"
|
||||
@opensetting="opensetting"
|
||||
@launchapp="launchapp"
|
||||
@chooseavatar="chooseavatar"
|
||||
@agreeprivacyauthorization="agreeprivacyauthorization"
|
||||
>
|
||||
<block
|
||||
v-if="_icon"
|
||||
name="icon"
|
||||
>
|
||||
<t-icon
|
||||
:custom-style="iconCustomStyle"
|
||||
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (_icon.activeIdx == _icon.index ? 'active ' : ' ') + tClassIcon"
|
||||
:prefix="_icon.prefix"
|
||||
:name="_icon.name || ''"
|
||||
:size="_icon.size"
|
||||
:color="_icon.color"
|
||||
@click="'handleClose' || ''"
|
||||
/>
|
||||
</block>
|
||||
<t-loading
|
||||
v-if="loading"
|
||||
:delay="loadingProps.delay || 0"
|
||||
:duration="loadingProps.duration || 800"
|
||||
:indicator="loadingProps.indicator || true"
|
||||
:inherit-color="loadingProps.inheritColor || true"
|
||||
:layout="loadingProps.layout || 'horizontal'"
|
||||
:pause="loadingProps.pause || false"
|
||||
:progress="loadingProps.progress || 0"
|
||||
:reverse="loadingProps.reverse || false"
|
||||
:size="loadingProps.size || '40rpx'"
|
||||
:text="loadingProps.text || ''"
|
||||
:theme="loadingProps.theme || 'circular'"
|
||||
loading
|
||||
:t-class="classPrefix + '__loading ' + classPrefix + '__loading--wrapper'"
|
||||
:t-class-indicator="classPrefix + '__loading--indicator ' + tClassLoading"
|
||||
:custom-style="loadingCustomStyle"
|
||||
/>
|
||||
<view
|
||||
:class="classPrefix + '__content '
|
||||
+ ((_icon && _icon.name || loading) && content ? classPrefix + '__content--has-icon' : '')"
|
||||
>
|
||||
<slot name="content" />
|
||||
<block v-if="content">
|
||||
{{ content }}
|
||||
</block>
|
||||
<slot />
|
||||
</view>
|
||||
<slot name="suffix" />
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
import TIcon from '../icon/icon';
|
||||
import TLoading from '../loading/loading';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import { prefix } from '../common/config';
|
||||
import props from './props';
|
||||
import { calcIcon } from '../common/utils';
|
||||
import tools from '../common/utils.wxs';
|
||||
|
||||
|
||||
const name = `${prefix}-button`;
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-icon`,
|
||||
`${prefix}-class-loading`,
|
||||
],
|
||||
components: {
|
||||
TIcon,
|
||||
TLoading,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
emits: [
|
||||
'click',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
tools,
|
||||
prefix,
|
||||
className: '',
|
||||
classPrefix: name,
|
||||
_icon: undefined,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
iconCustomStyle() {
|
||||
const fontSize = {
|
||||
'extra-small': 'var(--td-button-extra-small-icon-font-size, 18px)',
|
||||
small: 'var(--td-button-small-icon-font-size, 18px)',
|
||||
medium: 'var(--td-button-medium-icon-font-size, 20px)',
|
||||
large: 'var(--td-button-large-icon-font-size, 24px)',
|
||||
};
|
||||
|
||||
return tools._style([
|
||||
{
|
||||
fontSize: fontSize[this.size || 'medium'],
|
||||
borderRadius: 'var(--td-button-icon-border-radius, 4px)',
|
||||
},
|
||||
this._icon.style || '',
|
||||
]);
|
||||
},
|
||||
loadingCustomStyle() {
|
||||
return tools._style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
icon: {
|
||||
handler(value) {
|
||||
this._icon = calcIcon(value, '');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
theme: 'setClass',
|
||||
size: 'setClass',
|
||||
plain: 'setClass',
|
||||
block: 'setClass',
|
||||
shape: 'setClass',
|
||||
disabled: 'setClass',
|
||||
loading: 'setClass',
|
||||
variant: 'setClass',
|
||||
},
|
||||
mounted() {
|
||||
this.setClass();
|
||||
},
|
||||
methods: {
|
||||
setClass() {
|
||||
const t = [
|
||||
name,
|
||||
this.tClass,
|
||||
`${name}--${this.variant || 'base'}`,
|
||||
`${name}--${this.theme || 'default'}`,
|
||||
`${name}--${this.shape || 'rectangle'}`,
|
||||
`${name}--size-${this.size || 'medium'}`,
|
||||
];
|
||||
if (this.block) {
|
||||
t.push(`${name}--block`);
|
||||
}
|
||||
if (this.disabled) {
|
||||
t.push(`${name}--disabled`);
|
||||
}
|
||||
if (this.ghost) {
|
||||
t.push(`${name}--ghost`);
|
||||
}
|
||||
this.className = t.join(' ');
|
||||
},
|
||||
getuserinfo(t) {
|
||||
this.$emit('getuserinfo', t);
|
||||
},
|
||||
contact(t) {
|
||||
this.$emit('contact', t);
|
||||
},
|
||||
getphonenumber(t) {
|
||||
this.$emit('getphonenumber', t);
|
||||
},
|
||||
error(t) {
|
||||
this.$emit('error', t);
|
||||
},
|
||||
opensetting(t) {
|
||||
this.$emit('opensetting', t);
|
||||
},
|
||||
launchapp(t) {
|
||||
this.$emit('launchapp', t);
|
||||
},
|
||||
chooseavatar(t) {
|
||||
this.$emit('chooseavatar', t);
|
||||
},
|
||||
agreeprivacyauthorization(t) {
|
||||
this.$emit('agreeprivacyauthorization', t);
|
||||
},
|
||||
handleTap(t) {
|
||||
if (this.disabled || this.loading) return;
|
||||
this.$emit('click', t);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import './button.css';
|
||||
|
||||
/* #ifdef MP-QQ */
|
||||
/* 适配 qq 小程序 */
|
||||
.t-button--outline {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
.t-button--ghost {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef H5 || MP-WEIXIN */
|
||||
:deep(.t-button__loading) + .t-button__content:not(:empty) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
:deep(.t-button__icon) + .t-button__content:not(:empty) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
|
||||
.t-button {
|
||||
/* support my-alipay */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
207
uni_modules/tdesign-uniapp/components/button/props.ts
Normal file
207
uni_modules/tdesign-uniapp/components/button/props.ts
Normal file
@@ -0,0 +1,207 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdButtonProps } from './type';
|
||||
export default {
|
||||
/** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 */
|
||||
appParameter: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 是否为块级元素 */
|
||||
block: Boolean,
|
||||
/** 按钮内容 */
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
/** 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取 */
|
||||
customDataset: {
|
||||
type: [String, Number, Boolean, Object, Array],
|
||||
default: () => ({}) as TdButtonProps['customDataset'],
|
||||
},
|
||||
/** 禁用状态。优先级：Button.disabled > Form.disabled */
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
/** 是否为幽灵按钮（镂空按钮） */
|
||||
ghost: Boolean,
|
||||
/** 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 */
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 按住后多久出现点击态，单位毫秒 */
|
||||
hoverStartTime: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
/** 手指松开后点击态保留时间，单位毫秒 */
|
||||
hoverStayTime: {
|
||||
type: Number,
|
||||
default: 70,
|
||||
},
|
||||
/** 指定是否阻止本节点的祖先节点出现点击态 */
|
||||
hoverStopPropagation: Boolean,
|
||||
/** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
|
||||
icon: {
|
||||
type: [String, Object],
|
||||
},
|
||||
/** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。<br />具体释义：<br />`en` 英文；<br />`zh_CN` 简体中文；<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) */
|
||||
lang: {
|
||||
type: String,
|
||||
validator(val: TdButtonProps['lang']): boolean {
|
||||
if (!val) return true;
|
||||
return ['en', 'zh_CN', 'zh_TW'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 是否显示为加载状态 */
|
||||
loading: Boolean,
|
||||
/** 透传 Loading 组件全部属性 */
|
||||
loadingProps: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；<br />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) */
|
||||
openType: {
|
||||
type: String,
|
||||
validator(val: TdButtonProps['openType']): boolean {
|
||||
if (!val) return true;
|
||||
return ['contact', 'share', 'getPhoneNumber', 'getUserInfo', 'launchApp', 'openSetting', 'feedback', 'chooseAvatar', 'agreePrivacyAuthorization'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 */
|
||||
phoneNumberNoQuotaToast: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/** 会话内消息卡片图片，open-type="contact"时有效 */
|
||||
sendMessageImg: {
|
||||
type: String,
|
||||
default: '截图',
|
||||
},
|
||||
/** 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 */
|
||||
sendMessagePath: {
|
||||
type: String,
|
||||
default: '当前分享路径',
|
||||
},
|
||||
/** 会话内消息卡片标题，open-type="contact"时有效 */
|
||||
sendMessageTitle: {
|
||||
type: String,
|
||||
default: '当前标题',
|
||||
},
|
||||
/** 会话来源，open-type="contact"时有效 */
|
||||
sessionFrom: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'rectangle' as TdButtonProps['shape'],
|
||||
validator(val: TdButtonProps['shape']): boolean {
|
||||
if (!val) return true;
|
||||
return ['rectangle', 'square', 'round', 'circle'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 */
|
||||
showMessageCard: Boolean,
|
||||
/** 组件尺寸 */
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium' as TdButtonProps['size'],
|
||||
validator(val: TdButtonProps['size']): boolean {
|
||||
if (!val) return true;
|
||||
return ['extra-small', 'small', 'medium', 'large'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 按钮标签id */
|
||||
tId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 组件风格，依次为品牌色、危险色 */
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'default' as TdButtonProps['theme'],
|
||||
validator(val: TdButtonProps['theme']): boolean {
|
||||
if (!val) return true;
|
||||
return ['default', 'primary', 'danger', 'light'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 同小程序的 formType */
|
||||
type: {
|
||||
type: String,
|
||||
validator(val: TdButtonProps['type']): boolean {
|
||||
if (!val) return true;
|
||||
return ['submit', 'reset'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 按钮形式，基础、线框、虚线、文字 */
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'base' as TdButtonProps['variant'],
|
||||
validator(val: TdButtonProps['variant']): boolean {
|
||||
if (!val) return true;
|
||||
return ['base', 'outline', 'dashed', 'text'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })） */
|
||||
onAgreeprivacyauthorization: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接 */
|
||||
onChooseavatar: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 点击时触发 */
|
||||
onClick: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 原生按钮属性，客服消息回调，`open-type="contact"` 时有效 */
|
||||
onContact: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效 */
|
||||
onCreateliveactivity: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效 */
|
||||
onError: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用 */
|
||||
onGetphonenumber: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用 */
|
||||
onGetrealtimephonenumber: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 */
|
||||
onGetuserinfo: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 打开 APP 成功的回调，`open-type=launchApp` 时有效 */
|
||||
onLaunchapp: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
/** 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效 */
|
||||
onOpensetting: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
};
|
||||
192
uni_modules/tdesign-uniapp/components/button/type.ts
Normal file
192
uni_modules/tdesign-uniapp/components/button/type.ts
Normal file
@@ -0,0 +1,192 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdLoadingProps as LoadingProps } from '../loading/type';
|
||||
|
||||
export interface TdButtonProps {
|
||||
/**
|
||||
* 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
|
||||
* @default ''
|
||||
*/
|
||||
appParameter?: string;
|
||||
/**
|
||||
* 是否为块级元素
|
||||
* @default false
|
||||
*/
|
||||
block?: boolean;
|
||||
/**
|
||||
* 按钮内容
|
||||
*/
|
||||
content?: string;
|
||||
/**
|
||||
* 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取
|
||||
* @default {}
|
||||
*/
|
||||
customDataset?: string | number | boolean | object | Array<string | number | boolean | object>;
|
||||
/**
|
||||
* 禁用状态。优先级：Button.disabled > Form.disabled
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* 是否为幽灵按钮（镂空按钮）
|
||||
* @default false
|
||||
*/
|
||||
ghost?: boolean;
|
||||
/**
|
||||
* 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果
|
||||
* @default ''
|
||||
*/
|
||||
hoverClass?: string;
|
||||
/**
|
||||
* 按住后多久出现点击态，单位毫秒
|
||||
* @default 20
|
||||
*/
|
||||
hoverStartTime?: number;
|
||||
/**
|
||||
* 手指松开后点击态保留时间，单位毫秒
|
||||
* @default 70
|
||||
*/
|
||||
hoverStayTime?: number;
|
||||
/**
|
||||
* 指定是否阻止本节点的祖先节点出现点击态
|
||||
* @default false
|
||||
*/
|
||||
hoverStopPropagation?: boolean;
|
||||
/**
|
||||
* 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
|
||||
*/
|
||||
icon?: string | object;
|
||||
/**
|
||||
* 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。<br />具体释义：<br />`en` 英文；<br />`zh_CN` 简体中文；<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
|
||||
*/
|
||||
lang?: 'en' | 'zh_CN' | 'zh_TW';
|
||||
/**
|
||||
* 是否显示为加载状态
|
||||
* @default false
|
||||
*/
|
||||
loading?: boolean;
|
||||
/**
|
||||
* 透传 Loading 组件全部属性
|
||||
* @default {}
|
||||
*/
|
||||
loadingProps?: LoadingProps;
|
||||
/**
|
||||
* 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；<br />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
|
||||
*/
|
||||
openType?:
|
||||
| 'contact'
|
||||
| 'share'
|
||||
| 'getPhoneNumber'
|
||||
| 'getUserInfo'
|
||||
| 'launchApp'
|
||||
| 'openSetting'
|
||||
| 'feedback'
|
||||
| 'chooseAvatar'
|
||||
| 'agreePrivacyAuthorization';
|
||||
/**
|
||||
* 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效
|
||||
* @default true
|
||||
*/
|
||||
phoneNumberNoQuotaToast?: boolean;
|
||||
/**
|
||||
* 会话内消息卡片图片，open-type="contact"时有效
|
||||
* @default 截图
|
||||
*/
|
||||
sendMessageImg?: string;
|
||||
/**
|
||||
* 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
|
||||
* @default 当前分享路径
|
||||
*/
|
||||
sendMessagePath?: string;
|
||||
/**
|
||||
* 会话内消息卡片标题，open-type="contact"时有效
|
||||
* @default 当前标题
|
||||
*/
|
||||
sendMessageTitle?: string;
|
||||
/**
|
||||
* 会话来源，open-type="contact"时有效
|
||||
* @default ''
|
||||
*/
|
||||
sessionFrom?: string;
|
||||
/**
|
||||
* 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
|
||||
* @default rectangle
|
||||
*/
|
||||
shape?: 'rectangle' | 'square' | 'round' | 'circle';
|
||||
/**
|
||||
* 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
|
||||
* @default false
|
||||
*/
|
||||
showMessageCard?: boolean;
|
||||
/**
|
||||
* 组件尺寸
|
||||
* @default medium
|
||||
*/
|
||||
size?: 'extra-small' | 'small' | 'medium' | 'large';
|
||||
/**
|
||||
* 按钮标签id
|
||||
* @default ''
|
||||
*/
|
||||
tId?: string;
|
||||
/**
|
||||
* 组件风格，依次为品牌色、危险色
|
||||
* @default default
|
||||
*/
|
||||
theme?: 'default' | 'primary' | 'danger' | 'light';
|
||||
/**
|
||||
* 同小程序的 formType
|
||||
*/
|
||||
type?: 'submit' | 'reset';
|
||||
/**
|
||||
* 按钮形式，基础、线框、虚线、文字
|
||||
* @default base
|
||||
*/
|
||||
variant?: 'base' | 'outline' | 'dashed' | 'text';
|
||||
/**
|
||||
* 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })）
|
||||
*/
|
||||
onAgreeprivacyauthorization?: () => void;
|
||||
/**
|
||||
* 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接
|
||||
*/
|
||||
onChooseavatar?: () => void;
|
||||
/**
|
||||
* 点击时触发
|
||||
*/
|
||||
onClick?: (e: MouseEvent) => void;
|
||||
/**
|
||||
* 原生按钮属性，客服消息回调，`open-type="contact"` 时有效
|
||||
*/
|
||||
onContact?: () => void;
|
||||
/**
|
||||
* 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效
|
||||
*/
|
||||
onCreateliveactivity?: () => void;
|
||||
/**
|
||||
* 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效
|
||||
*/
|
||||
onError?: () => void;
|
||||
/**
|
||||
* 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
|
||||
*/
|
||||
onGetphonenumber?: () => void;
|
||||
/**
|
||||
* 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
|
||||
*/
|
||||
onGetrealtimephonenumber?: () => void;
|
||||
/**
|
||||
* 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
|
||||
*/
|
||||
onGetuserinfo?: () => void;
|
||||
/**
|
||||
* 打开 APP 成功的回调，`open-type=launchApp` 时有效
|
||||
*/
|
||||
onLaunchapp?: () => void;
|
||||
/**
|
||||
* 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效
|
||||
*/
|
||||
onOpensetting?: () => void;
|
||||
}
|
||||
Reference in New Issue
Block a user