任务明细页面
This commit is contained in:
limqhz
88
components/button/README.md
Normal file
88
components/button/README.md
Normal file
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Button 按钮
|
||||
description: 用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
|
||||
spline: base
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-button-group": "tdesign-miniprogram/button-group/button-group"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础按钮
|
||||
|
||||
<img src="https://tdesign.gtimg.com/miniprogram/readme/button-1.png" width="375px" height="50%">
|
||||
基础类型分为主按钮、次按钮、文字按钮
|
||||
|
||||
#### 次按钮
|
||||
使用场景：在用户进行的操作为流程中的辅助操作，或者进行不那么重要的交互行为时，选择用次按钮；次要按钮通常和主要按钮一起出现
|
||||
|
||||
#### 主按钮
|
||||
使用场景：大部分场景都可以使用，例如反馈页、表单页、对话框，一个页面建议最多只出现一个主按钮；
|
||||
|
||||
#### 文字按钮
|
||||
使用场景：它的操作通常和其旁边内容相关，通常出现在标题旁、字段旁、列表最下方
|
||||
|
||||
{{ base }}
|
||||
|
||||
### 带图标按钮
|
||||
{{ icon-btn }}
|
||||
|
||||
### 不同尺寸
|
||||
|
||||
{{ size }}
|
||||
|
||||
## API
|
||||
### Button Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
block | Boolean | false | 是否为块级元素 | N
|
||||
content | String / Slot | - | 按钮内容 | N
|
||||
custom-dataset | Any | - | 自定义 dataset，可通过 event.detail.currentTarget.dataset.custom 获取。当open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.custom 中看到传入的值。TS 类型：`any` | N
|
||||
disabled | Boolean | false | 是否禁用按钮 | N
|
||||
external-classes | Array | - | 组件类名。`['t-class', 't-class-icon', 't-class-loading']` | N
|
||||
ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
|
||||
icon | String | - | 图标名称 | N
|
||||
icon-props | Object | {} | 图标属性，透传至 icon | N
|
||||
loading | Boolean | false | 是否显示为加载状态 | N
|
||||
loading-props | Object | - | 加载loading属性，透传至loading。TS 类型：`LoadingProps` | 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
|
||||
type | String | - | 同小程序的 formType。可选项：submit/reset | N
|
||||
variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/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
|
||||
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
|
||||
hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N
|
||||
hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N
|
||||
lang | String | en | 指定返回用户信息的语言，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
|
||||
session-from | String | - | 会话来源，open-type="contact"时有效 | N
|
||||
send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N
|
||||
send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N
|
||||
send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N
|
||||
app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N
|
||||
show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N
|
||||
bindgetuserinfo | Eventhandle | - | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与<a href="https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html">wx.getUserInfo</a>返回的一致，open-type="getUserInfo"时有效 | N
|
||||
bindcontact | Eventhandle | - | 客服消息回调，open-type="contact"时有效 | N
|
||||
bindgetphonenumber | Eventhandle | - | 获取用户手机号回调，open-type=getPhoneNumber时有效 | N
|
||||
binderror | Eventhandle | - | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 | N
|
||||
bindopensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting时有效 | N
|
||||
bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp时有效 | N
|
||||
bindchooseavatar | Eventhandle | - | 获取用户头像回调，open-type=chooseAvatar时有效 | N
|
||||
|
||||
### Button Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
tap | `event` | 点击时触发
|
||||
31
components/button/button.d.ts
vendored
Normal file
31
components/button/button.d.ts
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import type { TdButtonProps } from './type';
|
||||
export interface ButtonProps extends TdButtonProps {
|
||||
}
|
||||
export default class Button extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
properties: TdButtonProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
className: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
observers: {
|
||||
'theme, size, plain, block, shape, disabled, loading'(): void;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
};
|
||||
methods: {
|
||||
setClass(): void;
|
||||
getuserinfo(e: any): void;
|
||||
contact(e: any): void;
|
||||
getphonenumber(e: any): void;
|
||||
error(e: any): void;
|
||||
opensetting(e: any): void;
|
||||
launchapp(e: any): void;
|
||||
chooseavatar(e: any): void;
|
||||
handleTap(e: any): void;
|
||||
};
|
||||
}
|
||||
89
components/button/button.js
Normal file
89
components/button/button.js
Normal file
@@ -0,0 +1,89 @@
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
import { canIUseFormFieldButton } from '../common/version';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-button`;
|
||||
let Button = class Button extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
|
||||
this.behaviors = canIUseFormFieldButton() ? ['wx://form-field-button'] : [];
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
className: '',
|
||||
classPrefix: name,
|
||||
};
|
||||
this.observers = {
|
||||
'theme, size, plain, block, shape, disabled, loading'() {
|
||||
this.setClass();
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
attached() {
|
||||
this.setClass();
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
setClass() {
|
||||
const classList = [
|
||||
name,
|
||||
`${prefix}-class`,
|
||||
`${name}--${this.data.theme}`,
|
||||
`${name}--size-${this.data.size.slice(0, 1)}`,
|
||||
];
|
||||
classList.push(`${name}--${this.data.shape}`);
|
||||
if (this.data.block) {
|
||||
classList.push(`${prefix}-is-block`);
|
||||
}
|
||||
if (this.data.disabled) {
|
||||
classList.push(`${prefix}-is-disabled`);
|
||||
}
|
||||
classList.push(`${name}--${this.data.variant}`);
|
||||
if (this.data.ghost) {
|
||||
classList.push(`${name}--ghost`);
|
||||
}
|
||||
this.setData({
|
||||
className: classList.join(' '),
|
||||
});
|
||||
},
|
||||
getuserinfo(e) {
|
||||
this.triggerEvent('getuserinfo', e.detail);
|
||||
},
|
||||
contact(e) {
|
||||
this.triggerEvent('contact', e.detail);
|
||||
},
|
||||
getphonenumber(e) {
|
||||
this.triggerEvent('getphonenumber', e.detail);
|
||||
},
|
||||
error(e) {
|
||||
this.triggerEvent('error', e.detail);
|
||||
},
|
||||
opensetting(e) {
|
||||
this.triggerEvent('opensetting', e.detail);
|
||||
},
|
||||
launchapp(e) {
|
||||
this.triggerEvent('launchapp', e.detail);
|
||||
},
|
||||
chooseavatar(e) {
|
||||
this.triggerEvent('chooseavatar', e.detail);
|
||||
},
|
||||
handleTap(e) {
|
||||
if (this.data.disabled)
|
||||
return;
|
||||
this.triggerEvent('tap', e);
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Button = __decorate([
|
||||
wxComponent()
|
||||
], Button);
|
||||
export default Button;
|
||||
7
components/button/button.json
Normal file
7
components/button/button.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-loading": "../loading/loading"
|
||||
}
|
||||
}
|
||||
58
components/button/button.wxml
Normal file
58
components/button/button.wxml
Normal file
@@ -0,0 +1,58 @@
|
||||
<button
|
||||
data-custom="{{ customDataset }}"
|
||||
class="{{className}} {{prefix}}-class"
|
||||
form-type="{{type}}"
|
||||
open-type="{{disabled ? '' : openType}}"
|
||||
hover-stop-propagation="{{hoverStopPropagation}}"
|
||||
hover-start-time="{{hoverStartTime}}"
|
||||
hover-stay-time="{{hoverStayTime}}"
|
||||
lang="{{lang}}"
|
||||
session-from="{{sessionFrom}}"
|
||||
hover-class="{{variant == 'text' ? 'none' : 'button-hover'}}"
|
||||
send-message-title="{{sendMessageTitle}}"
|
||||
send-message-path="{{sendMessagePath}}"
|
||||
send-message-img="{{sendMessageImg}}"
|
||||
app-parameter="{{appParameter}}"
|
||||
show-message-card="{{showMessageCard}}"
|
||||
catch:tap="handleTap"
|
||||
bind:getuserinfo="getuserinfo"
|
||||
bind:contact="contact"
|
||||
bind:getphonenumber="getphonenumber"
|
||||
bind:error="error"
|
||||
bind:opensetting="opensetting"
|
||||
bind:launchapp="launchapp"
|
||||
bind:chooseavatar="chooseavatar"
|
||||
>
|
||||
<t-icon
|
||||
wx:if="{{icon || iconProps.name}}"
|
||||
name="{{icon || iconProps.name}}"
|
||||
prefix="{{iconProps.prefix}}"
|
||||
size="{{iconProps.size}}"
|
||||
color="{{iconProps.color}}"
|
||||
customStyle="{{iconProps.customStyle}}"
|
||||
class="{{classPrefix}}__icon {{prefix}}-class-icon"
|
||||
></t-icon>
|
||||
<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>
|
||||
<view class="{{classPrefix}}__content">
|
||||
<slot name="content" />
|
||||
<block>{{content}}</block>
|
||||
<slot />
|
||||
</view>
|
||||
</button>
|
||||
248
components/button/button.wxss
Normal file
248
components/button/button.wxss
Normal file
@@ -0,0 +1,248 @@
|
||||
.t-float-left {
|
||||
float: left;
|
||||
}
|
||||
.t-float-right {
|
||||
float: right;
|
||||
}
|
||||
@keyframes tdesign-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.hotspot-expanded.relative {
|
||||
position: relative;
|
||||
}
|
||||
.hotspot-expanded::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.t-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
border-color: #dcdcdc;
|
||||
background-color: #fff;
|
||||
outline: none;
|
||||
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||||
/* 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: rgba(0, 0, 0, 0.9);
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dcdcdc;
|
||||
}
|
||||
.t-button--default.t-is-disabled {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
.t-button--primary {
|
||||
color: #fff;
|
||||
background-color: #0052d9;
|
||||
border: 1px solid #0052d9;
|
||||
}
|
||||
.t-button--primary.t-is-disabled {
|
||||
background-color: #bbd3fb;
|
||||
border-color: #bbd3fb;
|
||||
}
|
||||
.t-button--danger {
|
||||
color: #fff;
|
||||
background-color: #e34d59;
|
||||
border: 1px solid #e34d59;
|
||||
}
|
||||
.t-button--danger.t-is-disabled {
|
||||
background-color: #f8b9be;
|
||||
border-color: #f8b9be;
|
||||
}
|
||||
.t-button--text {
|
||||
color: #0052d9;
|
||||
background: none;
|
||||
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: #bbd3fb;
|
||||
}
|
||||
.t-button--ghost {
|
||||
background-color: transparent;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
}
|
||||
.t-button--ghost.t-is-disabled {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.t-button--outline {
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-button--outline.t-button--primary {
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-button--outline.t-button--primary.t-is-disabled {
|
||||
background-color: transparent;
|
||||
color: #bbd3fb;
|
||||
}
|
||||
.t-button--outline.t-button--danger {
|
||||
color: #e34d59;
|
||||
}
|
||||
.t-button--outline.t-button--danger.t-is-disabled {
|
||||
background-color: transparent;
|
||||
color: #f8b9be;
|
||||
}
|
||||
.t-button--dashed {
|
||||
background-color: transparent;
|
||||
border-style: dashed;
|
||||
}
|
||||
.t-button--dashed.t-button--primary {
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-button--dashed.t-button--primary.t-is-disabled {
|
||||
background-color: transparent;
|
||||
color: #bbd3fb;
|
||||
}
|
||||
.t-button--dashed.t-button--danger {
|
||||
color: #e34d59;
|
||||
}
|
||||
.t-button--dashed.t-button--danger.t-is-disabled {
|
||||
background-color: transparent;
|
||||
color: #f8b9be;
|
||||
}
|
||||
.t-button--base {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding-left: 31rpx;
|
||||
padding-right: 31rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.t-button--size-l {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
.t-button--size-l .t-button__icon {
|
||||
font-size: 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: 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: 72rpx;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
.t-button--size-s .t-button__icon {
|
||||
font-size: 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) {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.t-button__icon {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.t-button--round.t-button--size-l {
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
.t-button--round.t-button--size-m {
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
.t-button--round.t-button--size-s {
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
.t-button--square {
|
||||
padding: 0;
|
||||
}
|
||||
.t-button--square.t-button--size-l {
|
||||
width: 88rpx;
|
||||
}
|
||||
.t-button--square.t-button--size-m {
|
||||
width: 80rpx;
|
||||
}
|
||||
.t-button--square.t-button--size-s {
|
||||
width: 72rpx;
|
||||
}
|
||||
.t-button--circle {
|
||||
padding: 0;
|
||||
}
|
||||
.t-button--circle.t-button--size-l {
|
||||
border-radius: 50%;
|
||||
width: 88rpx;
|
||||
}
|
||||
.t-button--circle.t-button--size-m {
|
||||
border-radius: 50%;
|
||||
width: 80rpx;
|
||||
}
|
||||
.t-button--circle.t-button--size-s {
|
||||
border-radius: 50%;
|
||||
width: 72rpx;
|
||||
}
|
||||
.t-button.t-is-block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.t-button.t-is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.t-button.button-hover:after {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.t-button .position-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-button .indicator-blue {
|
||||
color: white;
|
||||
}
|
||||
.t-button-group .t-button {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
3
components/button/index.d.ts
vendored
Normal file
3
components/button/index.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './button';
|
||||
3
components/button/index.js
Normal file
3
components/button/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './button';
|
||||
3
components/button/props.d.ts
vendored
Normal file
3
components/button/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdButtonProps } from './type';
|
||||
declare const props: TdButtonProps;
|
||||
export default props;
|
||||
101
components/button/props.js
Normal file
101
components/button/props.js
Normal file
@@ -0,0 +1,101 @@
|
||||
const props = {
|
||||
block: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
customDataset: {
|
||||
type: null,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
ghost: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
iconProps: {
|
||||
type: Object,
|
||||
value: {},
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
loadingProps: {
|
||||
type: Object,
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
value: 'rectangle',
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: 'medium',
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
value: 'base',
|
||||
},
|
||||
openType: {
|
||||
type: String,
|
||||
},
|
||||
hoverStopPropagation: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
hoverStartTime: {
|
||||
type: Number,
|
||||
value: 20,
|
||||
},
|
||||
hoverStayTime: {
|
||||
type: Number,
|
||||
value: 70,
|
||||
},
|
||||
lang: {
|
||||
type: String,
|
||||
value: 'en',
|
||||
},
|
||||
sessionFrom: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
sendMessageTitle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
sendMessagePath: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
sendMessageImg: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
appParameter: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
showMessageCard: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
108
components/button/type.d.ts
vendored
Normal file
108
components/button/type.d.ts
vendored
Normal file
@@ -0,0 +1,108 @@
|
||||
import { SizeEnum } from '../common/common';
|
||||
import { LoadingProps } from '../loading/index';
|
||||
export interface TdButtonProps {
|
||||
block?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customDataset?: {
|
||||
type: ObjectConstructor;
|
||||
value?: any;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-icon', 't-class-loading'];
|
||||
};
|
||||
ghost?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
iconProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: object;
|
||||
};
|
||||
loading?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
loadingProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: LoadingProps;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: 'rectangle' | 'square' | 'round' | 'circle';
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: SizeEnum;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'primary' | 'danger';
|
||||
};
|
||||
type?: {
|
||||
type: StringConstructor;
|
||||
value?: 'submit' | 'reset';
|
||||
};
|
||||
variant?: {
|
||||
type: StringConstructor;
|
||||
value?: 'base' | 'outline' | 'text';
|
||||
};
|
||||
openType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'contact' | 'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'feedback' | 'chooseAvatar';
|
||||
};
|
||||
hoverStopPropagation?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
hoverStartTime?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
hoverStayTime?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
lang?: {
|
||||
type: StringConstructor;
|
||||
value?: 'en' | 'zh_CN' | 'zh_TW';
|
||||
};
|
||||
sessionFrom?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessageTitle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessagePath?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessageImg?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
appParameter?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
showMessageCard?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
1
components/button/type.js
Normal file
1
components/button/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user