limqsh/quinn-accounts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

白色主题

Browse Source
This commit is contained in:
limqhz
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
miniprogram_npm/tdesign-miniprogram/button/README.md
View File

@@ -18,13 +18,14 @@ isComponent: true
## 代码演示
### 类型
### 01 组件类型
基础按钮
{{ base }}
图标按钮
{{ icon-btn }}
幽灵按钮
@@ -39,7 +40,13 @@ isComponent: true
{{ block-btn }}
### 组件样式
### 02 组件状态
按钮禁用态
{{ disabled }}
### 03 组件样式
按钮尺寸
@@ -69,8 +76,8 @@ icon | String / Object | - | 图标名称。值为字符串表示图标名称，
loading | Boolean | false | 是否显示为加载状态 | N
loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger | N
size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum` | N
theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
type | String | - | 同小程序的 formType。可选项：submit/reset | N
variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | 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> （*小程序插件中不能使用*）；<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 />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N

14
miniprogram_npm/tdesign-miniprogram/button/button.js
View File

@@ -14,7 +14,7 @@ const name = `${prefix}-button`;
let Button = class Button extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
this.externalClasses = ['class', `${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
this.behaviors = canIUseFormFieldButton() ? ['wx://form-field-button'] : [];
this.properties = props;
this.data = {
@@ -41,17 +41,17 @@ let Button = class Button extends SuperComponent {
const classList = [
name,
`${prefix}-class`,
`${name}--${this.data.theme}`,
`${name}--size-${this.data.size.slice(0, 1)}`,
`${name}--${this.data.variant || 'base'}`,
`${name}--${this.data.theme || 'default'}`,
`${name}--${this.data.shape || 'rectangle'}`,
`${name}--size-${this.data.size || 'medium'}`,
];
classList.push(`${name}--${this.data.shape}`);
if (this.data.block) {
classList.push(`${prefix}-is-block`);
classList.push(`${name}--block`);
}
if (this.data.disabled) {
classList.push(`${prefix}-is-disabled`);
classList.push(`${name}--disabled`);
}
classList.push(`${name}--${this.data.variant}`);
if (this.data.ghost) {
classList.push(`${name}--ghost`);
}

41
miniprogram_npm/tdesign-miniprogram/button/button.wxml
View File

@@ -2,9 +2,9 @@
<wxs src="../common/utils.wxs" module="_" />
<button
style="{{ customStyle }}"
style="{{ style }}"
data-custom="{{ customDataset }}"
class="{{className}} {{prefix}}-class"
class="class {{className}}"
form-type="{{type}}"
open-type="{{disabled ? '' : openType}}"
hover-stop-propagation="{{hoverStopPropagation}}"
@@ -12,7 +12,7 @@
hover-stay-time="{{hoverStayTime}}"
lang="{{lang}}"
session-from="{{sessionFrom}}"
hover-class="button-hover"
hover-class="{{disabled ? '' : classPrefix + '--hover'}}"
send-message-title="{{sendMessageTitle}}"
send-message-path="{{sendMessagePath}}"
send-message-img="{{sendMessageImg}}"
@@ -33,24 +33,23 @@
is="icon"
data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', ariaHidden: true, name: iconName, ...iconData}}"
/>
<view wx:if="{{loading}}" class="{{classPrefix}}__loading">
<t-loading
delay="{{loadingProps.delay || 0}}"
duration="{{loadingProps.duration || 800}}"
indicator="{{loadingProps.indicator || true}}"
inheritColor="{{loadingProps.indicator || false}}"
layout="{{loadingProps.layout || 'horizontal'}}"
pause="{{loadingProps.pause || false}}"
progress="{{loadingProps.progress}}"
reverse="{{loadingProps.reverse}}"
size="{{loadingProps.size || '40rpx'}}"
text="{{loadingProps.text }}"
theme="{{loadingProps.theme || 'circular'}}"
loading
t-class="position-center"
t-class-indicator="indicator-blue {{prefix}}-class-loading"
></t-loading>
</view>
<t-loading
wx:if="{{loading}}"
delay="{{loadingProps.delay || 0}}"
duration="{{loadingProps.duration || 800}}"
indicator="{{loadingProps.indicator || true}}"
inheritColor="{{loadingProps.indicator || false}}"
layout="{{loadingProps.layout || 'horizontal'}}"
pause="{{loadingProps.pause || false}}"
progress="{{loadingProps.progress}}"
reverse="{{loadingProps.reverse}}"
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 {{prefix}}-class-loading"
></t-loading>
<view class="{{classPrefix}}__content">
<slot name="content" />
<block>{{content}}</block>

391
miniprogram_npm/tdesign-miniprogram/button/button.wxss
View File

@@ -25,6 +25,130 @@
bottom: 0;
transform: scale(1.5);
}
.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-font-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-font-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-font-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-font-size, 48rpx);
}
.t-button--default {
color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
background-color: var(--td-button-default-bg-color, 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-gray-color-3, #e7e7e7));
}
.t-button--default.t-button--hover {
z-index: 0;
}
.t-button--default.t-button--hover::after {
background-color: var(--td-button-default-active-bg-color, var(--td-gray-color-5, #c5c5c5));
}
.t-button--default.t-button--disabled {
color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
background-color: var(--td-button-default-disabled-bg, var(--td-gray-color-2, #eeeeee));
}
.t-button--default.t-button--disabled::after {
border-color: var(--td-button-default-disabled-border-color, var(--td-gray-color-2, #eeeeee));
}
.t-button--primary {
color: var(--td-button-primary-color, var(--td-text-anti-primary-color, #fff));
background-color: var(--td-button-primary-bg-color, var(--td-primary-color, #0052d9));
}
.t-button--primary::after {
border-width: var(--td-button-border-width, 4rpx);
border-color: var(--td-button-primary-border-color, var(--td-primary-color, #0052d9));
}
.t-button--primary.t-button--hover {
z-index: 0;
}
.t-button--primary.t-button--hover::after {
background-color: var(--td-button-primary-active-bg-color, var(--td-primary-color-9, #0034b5));
}
.t-button--primary.t-button--disabled {
color: var(--td-button-primary-disabled-color, var(--td-text-anti-primary-color, #fff));
background-color: var(--td-button-primary-disabled-bg, var(--td-primary-color-3, #bbd3fb));
}
.t-button--primary.t-button--disabled::after {
border-color: var(--td-button-primary-disabled-border-color, var(--td-primary-color-3, #bbd3fb));
}
.t-button--light {
color: var(--td-button-light-color, var(--td-primary-color, #0052d9));
background-color: var(--td-button-light-bg-color, var(--td-primary-color-1, #ecf2fe));
}
.t-button--light::after {
border-width: var(--td-button-border-width, 4rpx);
border-color: var(--td-button-light-border-color, var(--td-primary-color-1, #ecf2fe));
}
.t-button--light.t-button--hover {
z-index: 0;
}
.t-button--light.t-button--hover::after {
background-color: var(--td-button-light-active-bg-color, var(--td-primary-color-2, #d4e3fc));
}
.t-button--light.t-button--disabled {
color: var(--td-button-light-disabled-color, var(--td-primary-color-3, #bbd3fb));
background-color: var(--td-button-light-disabled-bg, var(--td-primary-color-1, #ecf2fe));
}
.t-button--light.t-button--disabled::after {
border-color: var(--td-button-light-disabled-border-color, var(--td-primary-color-1, #ecf2fe));
}
.t-button--danger {
color: var(--td-button-danger-color, var(--td-text-anti-primary-color, #fff));
background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.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, #e34d59)));
}
.t-button--danger.t-button--hover {
z-index: 0;
}
.t-button--danger.t-button--hover::after {
background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-7, #c9353f));
}
.t-button--danger.t-button--disabled {
color: var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff));
background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #f8b9be));
}
.t-button--danger.t-button--disabled::after {
border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #f8b9be));
}
.t-button {
display: inline-flex;
align-items: center;
@@ -33,89 +157,38 @@
white-space: nowrap;
text-align: center;
background-image: none;
cursor: pointer;
transition: all 0.3s;
user-select: none;
touch-action: manipulation;
font-size: var(--td-button-default-font-size, var(--td-font-size-m, 32rpx));
height: var(--td-button-default-height, 80rpx);
border-radius: var(--td-button-border-radius, var(--td-radius-default, 12rpx));
outline: none;
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
padding-left: calc(var(--td-button-padding-horizontal, 48rpx) - var(--td-button-border-width, 1px));
padding-right: calc(var(--td-button-padding-horizontal, 48rpx) - var(--td-button-border-width, 1px));
font-weight: var(--td-button-font-weight, 600);
vertical-align: top;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
/* stylelint-disable-next-line */
-webkit-appearance: none;
}
.t-button::after {
background-color: #000;
content: ' ';
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.t-button:not(.t-is-disabled):active::after {
opacity: 0.1;
}
.t-button--default {
color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
background-color: var(--td-button-default-bg-color, var(--td-gray-color-3, #e7e7e7));
border: 1px solid var(--td-button-default-bg-color, var(--td-gray-color-3, #e7e7e7));
}
.t-button--default.t-is-disabled {
color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}
.t-button--primary {
color: var(--td-button-primary-color, var(--td-text-anti-primary-color, #fff));
background-color: var(--td-button-primary-bg-color, var(--td-primary-color, #0052d9));
border: 1px solid var(--td-button-primary-border-color, var(--td-primary-color, #0052d9));
}
.t-button--primary.t-is-disabled {
background-color: var(--td-button-primary-disabled-color, var(--td-primary-color-3, #bbd3fb));
border-color: var(--td-button-primary-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-button--light {
color: var(--td-button-light-color, var(--td-primary-color, #0052d9));
background-color: var(--td-button-light-bg-color, var(--td-primary-color-2, #d4e3fc));
border: 1px solid var(--td-button-light-border-color, var(--td-primary-color-2, #d4e3fc));
}
.t-button--light.t-is-disabled {
color: var(--td-button-light-disabled-color, var(--td-primary-color-3, #bbd3fb));
background-color: var(--td-button-light-disabled-bg, var(--td-primary-color-1, #ecf2fe));
border-color: var(--td-button-light-disabled-bg, var(--td-primary-color-1, #ecf2fe));
}
.t-button--danger {
color: var(--td-button-danger-color, var(--td-text-anti-primary-color, #fff));
background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
border: 1px solid var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.t-button--danger.t-is-disabled {
background-color: var(--td-button-danger-disabled-color, var(--td-error-color-3, #f8b9be));
border-color: var(--td-button-danger-disabled-color, var(--td-error-color-3, #f8b9be));
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-font-gray-1, rgba(0, 0, 0, 0.9)));
background: none;
}
.t-button--text::after {
border: 0;
}
.t-button--text.t-button--size-default {
width: auto;
height: auto;
line-height: normal;
padding: 0;
}
.t-button--text.t-is-disabled {
color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
.t-button--text.t-button--hover::after {
background-color: var(--td-button-text-active-bg-color, var(--td-primary-color-1, #ecf2fe));
}
.t-button--text.t-button--primary {
color: var(--td-button-primary-text-color, var(--td-primary-color, #0052d9));
background: none;
}
.t-button--text.t-button--primary.t-is-disabled {
.t-button--text.t-button--primary.t-button--disabled {
color: var(--td-button-primary-text-disabled-color, var(--td-primary-color-3, #bbd3fb));
background: none;
}
@@ -123,60 +196,93 @@
color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
background: none;
}
.t-button--text.t-button--danger.t-is-disabled {
color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-error-color-3, #f8b9be)));
.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-text-anti-primary-color, #fff)));
background: none;
}
.t-button--text.t-button--light {
color: var(--td-button-light-text-color, var(--td-primary-color, #0052d9));
background: none;
}
.t-button--text.t-button--disabled {
color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}
.t-button--ghost {
background-color: transparent;
border: 1px solid var(--td-button-ghost-color, var(--td-bg-color-block, #fff));
color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-bg-color-block, #fff)));
color: var(--td-button-ghost-color, var(--td-bg-color-block, #fff));
}
.t-button--ghost.t-is-disabled {
color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
border-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
.t-button--ghost::after {
border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-bg-color-block, #fff)));
}
.t-button--ghost.t-button--hover::after {
background: none;
}
.t-button--ghost.t-button--primary {
color: var(--td-button-ghost-primary-color, var(--td-primary-color, #0052d9));
}
.t-button--ghost.t-button--primary::after {
border-color: var(--td-button-ghost-primary-border-color, var(--td-primary-color, #0052d9));
}
.t-button--ghost.t-button--danger {
color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.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, #e34d59)));
}
.t-button--outline {
border-color: var(--td-button-default-border-color, var(--td-gray-color-4, #dcdcdc));
.t-button--ghost.t-button--disabled {
background-color: transparent;
color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
}
.t-button--ghost.t-button--disabled::after {
border-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
}
.t-button--outline {
background-color: transparent;
}
.t-button--outline::after {
border-color: var(--td-button-default-border-color, var(--td-gray-color-3, #e7e7e7));
}
.t-button--outline.t-button--hover::after {
background-color: var(--td-button-outline-active-bg-color, var(--td-gray-color-1, #f3f3f3));
}
.t-button--outline.t-button--primary {
color: var(--td-button-primary-outline-color, var(--td-primary-color, #0052d9));
border-color: var(--td-button-primary-outline-color, var(--td-primary-color, #0052d9));
}
.t-button--outline.t-button--primary.t-is-disabled {
.t-button--outline.t-button--primary::after {
border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-primary-color, #0052d9)));
}
.t-button--outline.t-button--primary.t-button--disabled {
background-color: transparent;
color: var(--td-button-primary-outline-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-button--outline.t-button--primary.t-button--disabled::after {
border-color: var(--td-button-primary-outline-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-button--outline.t-button--danger {
color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
border-color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.t-button--outline.t-button--danger.t-is-disabled {
.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, #e34d59))));
}
.t-button--outline.t-button--danger.t-button--disabled {
background-color: transparent;
color: var(--td-button-danger-outline-disabled-color, var(--td-button-danger-disabled-color, var(--td-error-color-3, #f8b9be)));
border-color: var(--td-button-danger-outline-disabled-color, var(--td-button-danger-disabled-color, var(--td-error-color-3, #f8b9be)));
color: var(--td-button-danger-outline-disabled-color, var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff)));
}
.t-button--outline.t-button--danger.t-button--disabled::after {
border-color: var(--td-button-danger-outline-disabled-color, var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff)));
}
.t-button--outline.t-button--light {
background-color: var(--td-button-light-bg-color, var(--td-primary-color-2, #d4e3fc));
border-color: var(--td-button-light-outline-color, var(--td-primary-color, #0052d9));
color: var(--td-button-light-outline-color, var(--td-primary-color, #0052d9));
background-color: var(--td-button-light-outline-bg-color, var(--td-primary-color-1, #ecf2fe));
}
.t-button--outline.t-button--light.t-is-disabled {
.t-button--outline.t-button--light::after {
border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-primary-color, #0052d9)));
}
.t-button--outline.t-button--light.t-button--disabled {
background-color: transparent;
color: var(--td-button-light-outline-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-button--outline.t-button--light.t-button--disabled::after {
border-color: var(--td-button-light-outline-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-button--dashed {
@@ -185,110 +291,119 @@
}
.t-button--dashed.t-button--primary {
color: var(--td-button-primary-dashed-color, var(--td-primary-color, #0052d9));
border-color: var(--td-button-primary-dashed-color, var(--td-primary-color, #0052d9));
}
.t-button--dashed.t-button--primary.t-is-disabled {
.t-button--dashed.t-button--primary::after {
border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-primary-color, #0052d9)));
}
.t-button--dashed.t-button--primary.t-button--disabled {
background-color: transparent;
color: var(--td-button-primary-dashed-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-button--dashed.t-button--primary.t-button--disabled::after {
border-color: var(--td-button-primary-dashed-disabled-color, var(--td-primary-color-3, #bbd3fb));
}
.t-button--dashed.t-button--danger {
color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
border-color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
}
.t-button--dashed.t-button--danger.t-is-disabled {
.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, #e34d59))));
}
.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-error-color-3, #f8b9be)));
border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-error-color-3, #f8b9be)));
color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-text-anti-primary-color, #fff)));
}
.t-button--base {
height: var(--td-button-default-height, 80rpx);
line-height: var(--td-button-default-height, 80rpx);
font-size: var(--td-button-default-font-size, var(--td-font-size-m, 32rpx));
.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-text-anti-primary-color, #fff)));
}
.t-button--size-l {
height: var(--td-button-large-height, 96rpx);
line-height: var(--td-button-large-height, 96rpx);
}
.t-button--size-l .t-button__icon {
font-size: var(--td-button-icon-size-l, 48rpx);
}
.t-button--size-l .t-button__loading + .t-button__content:not(:empty),
.t-button--size-l .t-button__icon + .t-button__content:not(:empty) {
margin-left: 16rpx;
}
.t-button--size-m .t-button__icon {
font-size: var(--td-button-icon-size-m, 44rpx);
}
.t-button--size-m .t-button__loading + .t-button__content:not(:empty),
.t-button--size-m .t-button__icon + .t-button__content:not(:empty) {
margin-left: 8rpx;
}
.t-button--size-s {
height: var(--td-button-small-height, 64rpx);
line-height: var(--td-button-small-height, 64rpx);
}
.t-button--size-s .t-button__icon {
font-size: var(--td-button-icon-size-s, 40rpx);
}
.t-button--size-s .t-button__loading + .t-button__content:not(:empty),
.t-button--size-s .t-button__icon + .t-button__content:not(:empty) {
.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-l {
.t-button--round.t-button--size-large {
border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
}
.t-button--round.t-button--size-m {
border-radius: calc(var(--td-button-default-height, 80rpx) / 2);
.t-button--round.t-button--size-large::after {
border-radius: var(--td-button-large-height, 96rpx);
}
.t-button--round.t-button--size-s {
.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-l {
.t-button--square.t-button--size-large {
width: var(--td-button-large-height, 96rpx);
}
.t-button--square.t-button--size-m {
width: var(--td-button-default-height, 80rpx);
.t-button--square.t-button--size-medium {
width: var(--td-button-medium-height, 80rpx);
}
.t-button--square.t-button--size-s {
.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;
}
.t-button--circle.t-button--size-l {
border-radius: 50%;
}
.t-button--circle.t-button--size-large {
width: var(--td-button-large-height, 96rpx);
}
.t-button--circle.t-button--size-m {
.t-button--circle.t-button--size-large::after {
border-radius: 50%;
width: var(--td-button-default-height, 80rpx);
}
.t-button--circle.t-button--size-s {
.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.t-is-block {
.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.t-is-disabled {
.t-button--disabled {
cursor: not-allowed;
}
.t-button.button-hover:after {
border-radius: 8rpx;
}
.t-button .position-center {
.t-button__loading--wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.t-button .indicator-blue {
color: white;
.t-button__loading--indicator {
color: var(--td-white-color-1, #fff);
}
.t-button.t-button--hover::after {
z-index: -1;
}

2
miniprogram_npm/tdesign-miniprogram/button/props.js
View File

@@ -9,7 +9,7 @@ const props = {
customDataset: {
type: null,
},
customStyle: {
style: {
type: String,
value: '',
},

2
miniprogram_npm/tdesign-miniprogram/button/type.d.ts vendored
View File

@@ -13,7 +13,7 @@ export interface TdButtonProps {
type: ObjectConstructor;
value?: any;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};