New Huajishe Check ChaoXing

This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions

View File

@@ -0,0 +1,21 @@
FROM node:lts-alpine
ENV TZ=Asia/Shanghai
RUN apk add --no-cache tzdata \
&& cp /usr/share/zoneinfo/$TZ /etc/localtime \
&& echo $TZ > /etc/timezone \
&& apk del tzdata
WORKDIR /app
COPY package*.json ./
RUN npm config set strict-ssl false \
&& npm install --omit=dev
COPY . ./
EXPOSE 8080
CMD [ "node", "ci.js" ]

View File

@@ -0,0 +1,22 @@
FROM node:lts-alpine
ENV TZ=Asia/Shanghai
RUN apk add --no-cache tzdata \
&& cp /usr/share/zoneinfo/$TZ /etc/localtime \
&& echo $TZ > /etc/timezone \
&& apk del tzdata
WORKDIR /app
COPY package*.json ./
RUN npm config set registry https://mirrors.huaweicloud.com/repository/npm/ \
&& npm config set strict-ssl false \
&& npm install --omit=dev
COPY . ./
EXPOSE 8080
CMD [ "node", "ci.js" ]

View File

@@ -0,0 +1,3 @@
# 小程序端部署教程
已迁移到 [官方文档](https://doc.micono.eu.org/advance/miniprogram.html)

View File

@@ -0,0 +1,81 @@
import config from '@utils/config';
import util from '@utils/util';
import log from '@utils/log';
import baidu_sdk from '@utils/sdk/mtj-wx-sdk';
App({
onLaunch(options) {
log.info("App 启动参数", options)
this.autoUpdate();
this.setCaptureListener();
},
autoUpdate() { // 更新小程序
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager();
updateManager.onCheckForUpdate(res => {
if (res.hasUpdate) {
wx.showModal({
title: '更新提示',
content: '检测到新版本,是否下载新版本并重启小程序?',
showCancel: false, // 隐藏取消按钮
confirmText: "确定更新", // 只保留确定更新按钮
complete: () => {
wx.showLoading();
updateManager.onUpdateReady(function () {
wx.hideLoading()
updateManager.applyUpdate()
})
updateManager.onUpdateFailed(function () {
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您重新打开当前小程序哟~',
})
})
}
})
}
})
}
else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
},
setCaptureListener() { // 监听截屏事件
wx.onUserCaptureScreen(() => {
return {
'query': "from=capture",
'promise': new Promise(resolve => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; // 当前页面
const query = Object.entries({
...currentPage.options,
'from': 'capture',
})
.map(([key, value]) => `${key}=${value}`)
.join('&');
log.info("用户截屏", {
"route": currentPage.route,
'query': query,
})
util.showInfo("您已截屏\n请注意隐私安全")
resolve({
'query': query,
})
})
}
})
wx.onScreenRecordingStateChanged(res => {
if (res.state == 'start')
util.showInfo("您正在录屏\n请注意隐私安全")
if (res.state == 'stop')
util.showInfo("您已录屏\n请注意隐私安全")
})
},
})

View File

@@ -0,0 +1,24 @@
{
"pages": [
"pages/home/home"
],
"resolveAlias": {
"~/*": "/*",
"@utils/*": "utils/*"
},
"requiredPrivateInfos": [
"chooseLocation",
"getLocation"
],
"permission": {
"scope.userLocation": {
"desc": "获取您的位置用于签到"
}
},
"window": {
"backgroundTextStyle": "light",
"navigationStyle": "custom"
},
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}

View File

@@ -0,0 +1,5 @@
{
"adapteByMiniprogram": {
"userName": "gh_e0e47fd2af64"
}
}

View File

@@ -0,0 +1,12 @@
/**app.wxss**/
page {
background: #f6f6f6;
}
.shadow-radius {
box-shadow: 0rpx 8rpx 10rpx -5rpx rgba(0, 0, 0, 0.08), 0rpx 16rpx 24rpx 2rpx rgba(0, 0, 0, 0.04), 0rpx 6rpx 30rpx 5rpx rgba(0, 0, 0, 0.05);
border-radius: 20rpx;
--td-button-border-radius: 20rpx;
overflow: hidden;
}

147
HuajisheCheckChaoXing/ci.js Normal file
View File

@@ -0,0 +1,147 @@
const ci = require('miniprogram-ci');
const express = require('express');
const axios = require('axios');
const fs = require('fs');
const app = express();
const port = 8080;
app.use(express.urlencoded({
extended: true
}));
const task = {
"appid": null,
"result": null,
};
/**
* 上传小程序
*/
app.post('/ci/upload', (req, res) => {
const {
appid,
key,
mobile,
callback
} = req.body;
if (task.appid) {
res.json(task)
if (task.result != 'doing')
process.exit(0);
} else {
task.appid = appid;
task.result = "doing";
res.json(task)
console.info(` ------ ✨ 开始执行编译上传 ${appid} ${new Date().toLocaleString()} ------ `);
upload(appid, key, mobile)
.then(res => {
task.appid = res.appid;
task.result = res.result;
task.mobile = mobile || null;
task.key = res.key || null;
console.info(` ------ 🎉 小程序上传完成 ${res.appid} ${res} ------ `);
if (res.result == "done" && callback)
axios.post(callback, task, {
params: {
"appid": appid,
}
})
.then(resp => { })
.catch(e => { });
})
}
});
/**
* 获取任务状态
*/
app.get("/ci/status", (req, res) => {
res.json({
"status": 0,
"msg": `服务正常,当前任务 ${task.appid || "无"} ${task.result || ""}`,
})
})
/**
* 停止服务
*/
app.post('/ci/stop', (req, res) => {
task.result = "fail";
res.json(task);
process.exit(0);
})
const server = app.listen(port, () => {
console.info(` ------ ✨ CI服务已启动端口 ${port},正在等待任务 ------ `);
});
server.setTimeout(3 * 60 * 1000);
process.on('SIGTERM', () => {
server.close(() => { })
})
/**
* 上传小程序
* @param {*} appid
* @param {*} privateKey
* @param {*} username
* @returns
*/
const upload = (appid, privateKey, username) => {
const formate = (key) => {
key = key.replace(/\n/g, '').replace(/\r/g, '');
const header = "-----BEGIN RSA PRIVATE KEY-----";
const footer = "-----END RSA PRIVATE KEY-----";
key = key.replace(header, '').replace(footer, '').trim();
let formattedKey = '';
for (let i = 0; i < key.length; i += 64)
formattedKey += key.substr(i, 64) + '\n';
return header + '\n' + formattedKey + footer;
}
return new Promise(async resolve => {
const privateKeyPath = `/tmp/miniprogram-${appid}.private.key`;
privateKey = formate(privateKey);
fs.writeFileSync(privateKeyPath, privateKey);
fs.writeFileSync("./utils/ci.config.js", `module.exports = {username: '${username}'}`)
try {
const now = new Date();
await ci.upload({
project: new ci.Project({
appid: appid,
type: 'miniProgram',
projectPath: './',
privateKeyPath: privateKeyPath,
ignores: [],
}),
version: `开源版 v0.${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`,
robot: Number(process.env.ROBOT || "5"),
desc: "御坂网络 Misaka",
setting: {
es6: true,
es7: true,
minify: true,
codeProtect: true,
ignoreUploadUnusedFiles: true,
},
onProgressUpdate: res => {
if (res._status != "doing") {
fs.unlink(privateKeyPath, () => { });
console.info(` ------ ✨ 编译上传结果 ${res} ------ `);
resolve(Object.assign(res, {
"appid": appid,
"result": res._status,
"key": privateKey,
}))
}
}
})
} catch (err) {
resolve({
'appid': appid,
"result": String(err),
})
}
})
}

View File

@@ -0,0 +1,147 @@
const ci = require('miniprogram-ci');
const express = require('express');
const axios = require('axios');
const fs = require('fs');
const app = express();
const port = 8080;
app.use(express.urlencoded({
extended: true
}));
const task = {
"appid": null,
"result": null,
};
/**
* 上传小程序
*/
app.post('/ci/upload', (req, res) => {
const {
appid,
key,
mobile,
callback
} = req.body;
if (task.appid) {
res.json(task)
if (task.result != 'doing')
process.exit(0);
} else {
task.appid = appid;
task.result = "doing";
res.json(task)
console.info(` ------ ✨ 开始执行编译上传 ${appid} ${new Date().toLocaleString()} ------ `);
upload(appid, key, mobile)
.then(res => {
task.appid = res.appid;
task.result = res.result;
task.mobile = mobile || null;
task.key = res.key || null;
console.info(` ------ 🎉 小程序上传完成 ${res.appid} ${res} ------ `);
if (res.result == "done" && callback)
axios.post(callback, task, {
params: {
"appid": appid,
}
})
.then(resp => { })
.catch(e => { });
})
}
});
/**
* 获取任务状态
*/
app.get("/ci/status", (req, res) => {
res.json({
"status": 0,
"msg": `服务正常,当前任务 ${task.appid || "无"} ${task.result || ""}`,
})
})
/**
* 停止服务
*/
app.post('/ci/stop', (req, res) => {
task.result = "fail";
res.json(task);
process.exit(0);
})
const server = app.listen(port, () => {
console.info(` ------ ✨ CI服务已启动端口 ${port},正在等待任务 ------ `);
});
server.setTimeout(3 * 60 * 1000);
process.on('SIGTERM', () => {
server.close(() => { })
})
/**
* 上传小程序
* @param {*} appid
* @param {*} privateKey
* @param {*} username
* @returns
*/
const upload = (appid, privateKey, username) => {
const formate = (key) => {
key = key.replace(/\n/g, '').replace(/\r/g, '');
const header = "-----BEGIN RSA PRIVATE KEY-----";
const footer = "-----END RSA PRIVATE KEY-----";
key = key.replace(header, '').replace(footer, '').trim();
let formattedKey = '';
for (let i = 0; i < key.length; i += 64)
formattedKey += key.substr(i, 64) + '\n';
return header + '\n' + formattedKey + footer;
}
return new Promise(async resolve => {
const privateKeyPath = `/tmp/miniprogram-${appid}.private.key`;
privateKey = formate(privateKey);
fs.writeFileSync(privateKeyPath, privateKey);
fs.writeFileSync("./utils/ci.config.js", `module.exports = {username: '${username}'}`)
try {
const now = new Date();
await ci.upload({
project: new ci.Project({
appid: appid,
type: 'miniProgram',
projectPath: './',
privateKeyPath: privateKeyPath,
ignores: [],
}),
version: `开源版 v0.${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`,
robot: 1,
desc: "御坂网络 Misaka",
setting: {
es6: true,
es7: true,
minify: true,
codeProtect: true,
ignoreUploadUnusedFiles: true,
},
onProgressUpdate: res => {
if (res._status != "doing") {
fs.unlink(privateKeyPath, () => { });
console.info(` ------ ✨ 编译上传结果 ${res} ------ `);
resolve(Object.assign(res, {
"appid": appid,
"result": res._status,
"key": privateKey,
}))
}
}
})
} catch (err) {
resolve({
'appid': appid,
"result": String(err),
})
}
})
}

View File

@@ -0,0 +1,16 @@
Component({
properties: {
text: {
type: String,
value: '暂无数据',
},
desc: {
type: String,
value: '',
},
},
lifetimes: {
attached() { },
},
methods: {}
})

View File

@@ -0,0 +1,3 @@
{
"component": true
}

View File

@@ -0,0 +1,5 @@
<view class="no-data">
<image class="no-data" src="/static/svg/illustration/no-data.svg" mode="aspectFit"></image>
<text class="no-data">{{text}}</text>
<text class="no-data" wx:if="{{desc}}">{{desc}}</text>
</view>

View File

@@ -0,0 +1,18 @@
view.no-data {
width: 100%;
text-align: center;
margin-top: calc(50vh - 300rpx);
color: gray;
}
image.no-data {
display: block;
width: 160rpx;
height: 160rpx;
margin: 20rpx auto;
}
text.no-data {
font-size: 26rpx;
display: block;
}

View File

@@ -0,0 +1,12 @@
Component({
properties: {
waterText: {
type: String,
value: '小程序水印',
}
},
lifetimes: {
attached() { },
},
methods: {}
})

View File

@@ -0,0 +1,3 @@
{
"component": true
}

View File

@@ -0,0 +1,21 @@
<!--components/watermark/watermark.wxml-->
<view class="water_top" style="pointer-events: none;">
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
<view class="water-text">{{waterText}}</view>
</view>

View File

@@ -0,0 +1,20 @@
/* components/watermark/watermark.wxss */
/* 想要改水印大小或者稀疏通过样式调整即可 */
.water_top {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: rotate(-10deg);
z-index: 9;
}
.water-text {
float: left;
width: 375rpx;
color: rgba(0, 0, 0, 0.15);
text-align: center;
font-size: 15px;
margin: 120rpx 0;
}

View File

@@ -0,0 +1,11 @@
{
"ios": {
"name": "工具箱"
},
"android": {
"name": "工具箱"
},
"common": {
"name": "工具箱"
}
}

View File

@@ -0,0 +1,10 @@
{
"base": {
"ios": {
"name": "工具箱"
},
"android": {
"name": "工具箱"
}
}
}

View File

@@ -0,0 +1,10 @@
{
"base": {
"ios": {
"name": "工具箱"
},
"android": {
"name": "工具箱"
}
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,52 @@
:: BASE_DOC ::
## API
### ActionSheet Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
align | String | center | `0.29.0`。options: center/left | N
cancel-text | String | - | \- | N
count | Number | 8 | \- | N
description | String | - | `0.29.0` | N
items | Array | - | required。Typescript`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
popup-props | Object | {} | Typescript`PopupProps`[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | N
show-cancel | Boolean | true | \- | N
show-overlay | Boolean | true | \- | N
theme | String | list | options: list/grid | N
using-custom-navbar | Boolean | false | \- | N
visible | Boolean | false | required | Y
default-visible | Boolean | undefined | required。uncontrolled property | Y
### ActionSheet Events
name | params | description
-- | -- | --
cancel | \- | \-
close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
selected | `(selected: ActionSheetItem \| string, index: number)` | \-
### ActionSheet External Classes
className | Description
-- | --
t-class | \-
t-class-cancel | \-
t-class-content | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-action-sheet-border-color | @gray-color-1 | -
--td-action-sheet-border-radius | @radius-extra-large | -
--td-action-sheet-cancel-color | @font-gray-1 | -
--td-action-sheet-cancel-height | 96rpx | -
--td-action-sheet-color | @font-gray-1 | -
--td-action-sheet-description-color | @font-gray-3 | -
--td-action-sheet-list-item-disabled-color | @font-gray-4 | -
--td-action-sheet-list-item-height | 112rpx | -
--td-action-sheet-text-align | center | -

View File

@@ -0,0 +1,140 @@
---
title: ActionSheet 动作面板
description: 由用户操作后触发的一种特定的模态弹出框 ,呈现一组与当前情境相关的两个或多个选项。
spline: data
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-89%25-blue" /></span>
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
</svg>
该组件于 0.9.0 版本上线,请留意版本。
</div>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/EM7cxim37USn" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
列表型动作面板
{{ list }}
宫格型动作面板
{{ grid }}
### 组件状态
宫格型动作面板
{{ status }}
### 组件样式
列表型对齐方式
{{ align }}
### 支持指令调用
```javascript
import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
// 指令调用不同于组件引用不需要传入visible
const basicListOption: ActionSheetShowOption = {
theme: ActionSheetTheme.List,
selector: '#t-action-sheet',
items: [
{
label: '默认选项',
},
{
label: '失效选项',
disabled: true,
},
{
label: '警告选项',
color: '#e34d59',
},
],
};
const handler = ActionSheet.show(basicListOption);
```
指令调用的关闭如下
```javascript
handler.close();
```
## API
### ActionSheet Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
align | String | center | `0.29.0`。水平对齐方式。可选项center/left | N
cancel-text | String | - | 设置取消按钮的文本 | N
count | Number | 8 | 设置每页展示菜单的数量,仅当 type=grid 时有效 | N
description | String | - | `0.29.0`。动作面板描述文字 | N
items | Array | - | 必需。菜单项。TS 类型:`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
popup-props | Object | {} | popupProps透传。TS 类型:`PopupProps`[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | N
show-cancel | Boolean | true | 是否显示取消按钮 | N
show-overlay | Boolean | true | 是否显示遮罩层 | N
theme | String | list | 展示类型列表和表格形式展示。可选项list/grid | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
visible | Boolean | false | 必需。显示与隐藏 | Y
default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y
### ActionSheet Events
名称 | 参数 | 描述
-- | -- | --
cancel | \- | 点击取消按钮时触发
close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
### ActionSheet External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-cancel | 取消样式类
t-class-content | 内容样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-action-sheet-border-color | @gray-color-1 | -
--td-action-sheet-border-radius | @radius-extra-large | -
--td-action-sheet-cancel-color | @font-gray-1 | -
--td-action-sheet-cancel-height | 96rpx | -
--td-action-sheet-color | @font-gray-1 | -
--td-action-sheet-description-color | @font-gray-3 | -
--td-action-sheet-list-item-disabled-color | @font-gray-4 | -
--td-action-sheet-list-item-height | 112rpx | -
--td-action-sheet-text-align | center | -

View File

@@ -0,0 +1,87 @@
import { SuperComponent } from '../common/src/index';
export default class ActionSheet extends SuperComponent {
static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
behaviors: string[];
externalClasses: string[];
properties: {
align?: {
type: StringConstructor;
value?: "center" | "left";
};
cancelText?: {
type: StringConstructor;
value?: string;
};
count?: {
type: NumberConstructor;
value?: number;
};
description?: {
type: StringConstructor;
value?: string;
};
items: {
type: ArrayConstructor;
value?: (string | import("./type").ActionSheetItem)[];
required?: boolean;
};
popupProps?: {
type: ObjectConstructor;
value?: import("../popup").TdPopupProps;
};
showCancel?: {
type: BooleanConstructor;
value?: boolean;
};
showOverlay?: {
type: BooleanConstructor;
value?: boolean;
};
theme?: {
type: StringConstructor;
value?: "list" | "grid";
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
visible: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
defaultVisible: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
};
data: {
prefix: string;
classPrefix: string;
gridThemeItems: any[];
currentSwiperIndex: number;
defaultPopUpProps: {};
defaultPopUpzIndex: number;
};
controlledProps: {
key: string;
event: string;
}[];
observers: {
'visible, items'(visible: boolean): void;
};
methods: {
init(): void;
memoInitialData(): void;
splitGridThemeActions(): void;
show(options: any): void;
close(): void;
onPopupVisibleChange({ detail }: {
detail: any;
}): void;
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
onSelect(event: WechatMiniprogram.TouchEvent): void;
onCancel(): void;
};
}

View File

@@ -0,0 +1,111 @@
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 { chunk } from '../common/utils';
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import { ActionSheetTheme, show } from './show';
import props from './props';
import useCustomNavbar from '../mixins/using-custom-navbar';
const { prefix } = config;
const name = `${prefix}-action-sheet`;
let ActionSheet = class ActionSheet extends SuperComponent {
constructor() {
super(...arguments);
this.behaviors = [useCustomNavbar];
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
this.properties = Object.assign({}, props);
this.data = {
prefix,
classPrefix: name,
gridThemeItems: [],
currentSwiperIndex: 0,
defaultPopUpProps: {},
defaultPopUpzIndex: 11500,
};
this.controlledProps = [
{
key: 'visible',
event: 'visible-change',
},
];
this.observers = {
'visible, items'(visible) {
if (!visible)
return;
this.init();
},
};
this.methods = {
init() {
this.memoInitialData();
this.splitGridThemeActions();
},
memoInitialData() {
this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
},
splitGridThemeActions() {
if (this.data.theme !== ActionSheetTheme.Grid)
return;
this.setData({
gridThemeItems: chunk(this.data.items, this.data.count),
});
},
show(options) {
this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
this.splitGridThemeActions();
this.autoClose = true;
this._trigger('visible-change', { visible: true });
},
close() {
this.triggerEvent('close', { trigger: 'command' });
this._trigger('visible-change', { visible: false });
},
onPopupVisibleChange({ detail }) {
if (!detail.visible) {
this.triggerEvent('close', { trigger: 'overlay' });
this._trigger('visible-change', { visible: false });
}
if (this.autoClose) {
this.setData({ visible: false });
this.autoClose = false;
}
},
onSwiperChange(e) {
const { current } = e.detail;
this.setData({
currentSwiperIndex: current,
});
},
onSelect(event) {
const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
const { index } = event.currentTarget.dataset;
const isSwiperMode = theme === ActionSheetTheme.Grid;
const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
if (item) {
this.triggerEvent('selected', { selected: item, index: realIndex });
if (!item.disabled) {
this.triggerEvent('close', { trigger: 'select' });
this._trigger('visible-change', { visible: false });
}
}
},
onCancel() {
this.triggerEvent('cancel');
if (this.autoClose) {
this.setData({ visible: false });
this.autoClose = false;
}
},
};
}
};
ActionSheet.show = show;
ActionSheet = __decorate([
wxComponent()
], ActionSheet);
export default ActionSheet;

View File

@@ -0,0 +1,10 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-popup": "../popup/popup",
"t-grid": "../grid/grid",
"t-grid-item": "../grid-item/grid-item"
}
}

View File

@@ -0,0 +1,49 @@
<wxs src="./action-sheet.wxs" module="_this" />
<wxs src="../common/utils.wxs" module="_" />
<import src="./template/list.wxml" />
<import src="./template/grid.wxml" />
<view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
<t-popup
visible="{{visible}}"
placement="bottom"
usingCustomNavbar="{{usingCustomNavbar}}"
bind:visible-change="onPopupVisibleChange"
show-overlay="{{showOverlay}}"
z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}"
overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"
>
<view
class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
tabindex="0"
>
<view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}"
>{{description}}</view
>
<block wx:if="{{gridThemeItems.length}}">
<template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
</block>
<view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list">
<block wx:for="{{ items }}" wx:key="index">
<template
is="list"
data="{{index, classPrefix, listThemeItemClass: _.cls(classPrefix + '__list-item', [align, [disabled, item.disabled]]), item}}"
/>
</block>
</view>
</view>
<slot />
<view wx:if="{{showCancel}}" class="{{classPrefix}}__footer">
<view class="{{classPrefix}}__gap-{{theme}}" />
<view
class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
hover-class="{{classPrefix}}__cancel--hover"
hover-stay-time="70"
bind:tap="onCancel"
aria-role="button"
>
{{ cancelText || '取消' }}
</view>
</view>
</t-popup>
</view>

View File

@@ -0,0 +1,19 @@
var getListThemeItemClass = function (props) {
var classPrefix = props.classPrefix;
var item = props.item;
var prefix = props.prefix;
var classList = [classPrefix + '__list-item'];
if (item.disabled) {
classList.push(prefix + '-is-disabled');
}
return classList.join(' ');
};
var isImage = function (name) {
return name.indexOf('/') !== -1;
};
module.exports = {
getListThemeItemClass: getListThemeItemClass,
isImage: isImage,
};

View File

@@ -0,0 +1,169 @@
.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-action-sheet__content {
color: var(--td-action-sheet-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
overflow: hidden;
}
.t-action-sheet__content--grid {
padding-top: 16rpx;
}
.t-action-sheet__content:focus {
outline: 0;
}
.t-action-sheet__grid {
padding-bottom: 16rpx;
}
.t-action-sheet__grid--swiper {
padding-bottom: 48rpx;
}
.t-action-sheet__description {
color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
line-height: 44rpx;
font-size: 28rpx;
text-align: var(--td-action-sheet-text-align, center);
padding: 24rpx 32rpx;
position: relative;
}
.t-action-sheet__description:focus {
outline: 0;
}
.t-action-sheet__description::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__description::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-action-sheet__description--left {
text-align: left;
}
.t-action-sheet__description--left::after {
left: 32rpx;
}
.t-action-sheet__list-item {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: var(--td-action-sheet-list-item-height, 112rpx);
padding: 0 32rpx;
}
.t-action-sheet__list-item::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__list-item::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-action-sheet__list-item:focus {
outline: 0;
}
.t-action-sheet__list-item--left {
justify-content: start;
}
.t-action-sheet__list-item--left::after {
left: 32rpx;
}
.t-action-sheet__list-item--disabled {
color: var(--td-action-sheet-list-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-action-sheet__list-item-text {
font-size: var(--td-font-size-m, 32rpx);
word-wrap: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-action-sheet__list-item-icon {
margin-right: 16rpx;
}
.t-action-sheet__list-item-icon--suffix {
margin-left: auto;
}
.t-action-sheet__swiper-wrap {
margin-top: 8rpx;
position: relative;
}
.t-action-sheet__footer {
background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
}
.t-action-sheet__gap-list {
height: 16rpx;
background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-gray-color-1, #f3f3f3)));
}
.t-action-sheet__gap-grid {
height: 1rpx;
background-color: var(--td-action-sheet-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__cancel {
display: flex;
align-items: center;
justify-content: center;
color: var(--td-action-sheet-cancel-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
height: var(--td-action-sheet-cancel-height, 96rpx);
}
.t-action-sheet__dots {
position: absolute;
left: 50%;
bottom: 32rpx;
transform: translateX(-50%);
display: flex;
flex-direction: row;
}
.t-action-sheet__dots-item {
width: 16rpx;
height: 16rpx;
background-color: #dcdcdc;
border-radius: 50%;
margin: 0 16rpx;
transition: all 0.4s ease-in;
}
.t-action-sheet__dots-item.t-is-active {
background-color: #0052d9;
}

View File

@@ -0,0 +1,8 @@
/// <reference types="miniprogram-api-typings" />
import { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption } from './show';
export { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption };
declare const _default: {
show(options: ActionSheetShowOption): WechatMiniprogram.Component.TrivialInstance;
close(options: ActionSheetShowOption): void;
};
export default _default;

View File

@@ -0,0 +1,10 @@
import { show, close, ActionSheetTheme } from './show';
export { ActionSheetTheme };
export default {
show(options) {
return show(options);
},
close(options) {
return close(options);
},
};

View File

@@ -0,0 +1,3 @@
import { TdActionSheetProps } from './type';
declare const props: TdActionSheetProps;
export default props;

View File

@@ -0,0 +1,53 @@
const props = {
align: {
type: String,
value: 'center',
},
cancelText: {
type: String,
value: '',
},
count: {
type: Number,
value: 8,
},
description: {
type: String,
value: '',
},
items: {
type: Array,
required: true,
},
popupProps: {
type: Object,
value: {},
},
showCancel: {
type: Boolean,
value: true,
},
showOverlay: {
type: Boolean,
value: true,
},
theme: {
type: String,
value: 'list',
},
usingCustomNavbar: {
type: Boolean,
value: false,
},
visible: {
type: Boolean,
value: null,
required: true,
},
defaultVisible: {
type: Boolean,
value: false,
required: true,
},
};
export default props;

View File

@@ -0,0 +1,31 @@
/// <reference types="miniprogram-api-typings" />
/// <reference types="miniprogram-api-typings" />
export interface ActionSheetItem {
label: string;
color?: string;
disabled?: boolean;
icon?: string;
}
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
export declare enum ActionSheetTheme {
List = "list",
Grid = "grid"
}
interface ActionSheetProps {
align: 'center' | 'left';
cancelText?: string;
count?: number;
description: string;
items: Array<string | ActionSheetItem>;
showCancel?: boolean;
theme?: ActionSheetTheme;
visible: boolean;
defaultVisible?: boolean;
}
export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
context?: Context;
selector?: string;
}
export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
export declare const close: (options: ActionSheetShowOption) => void;
export {};

View File

@@ -0,0 +1,33 @@
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { getInstance } from '../common/utils';
export var ActionSheetTheme;
(function (ActionSheetTheme) {
ActionSheetTheme["List"] = "list";
ActionSheetTheme["Grid"] = "grid";
})(ActionSheetTheme || (ActionSheetTheme = {}));
export const show = function (options) {
const _a = Object.assign({}, options), { context, selector = '#t-action-sheet' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
const instance = getInstance(context, selector);
if (instance) {
instance.show(Object.assign({}, otherOptions));
return instance;
}
console.error('未找到组件,请确认 selector && context 是否正确');
};
export const close = function (options) {
const { context, selector = '#t-action-sheet' } = Object.assign({}, options);
const instance = getInstance(context, selector);
if (instance) {
instance.close();
}
};

View File

@@ -0,0 +1,51 @@
<template name="grid">
<block wx:if="{{gridThemeItems.length === 1}}">
<t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
<t-grid-item
t-class="{{classPrefix}}__grid-item"
class="{{classPrefix}}__square"
wx:for="{{gridThemeItems[0]}}"
wx:key="index"
bind:tap="onSelect"
data-index="{{index}}"
icon="{{ { name: item.icon, color: item.color } }}"
text="{{item.label || ''}}"
image="{{item.image || ''}}"
style="--td-grid-item-text-color: {{item.color}}"
>
</t-grid-item>
</t-grid>
</block>
<block wx:elif="{{gridThemeItems.length > 1}}">
<view class="{{classPrefix}}__swiper-wrap">
<swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
<swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
<t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" column="{{count / 2}}">
<t-grid-item
t-class="{{classPrefix}}__grid-item"
class="{{classPrefix}}__square"
wx:for="{{item}}"
wx:key="index"
data-index="{{index}}"
bind:tap="onSelect"
icon="{{ { name: item.icon, color: item.color } }}"
text="{{item.label || ''}}"
image="{{item.image || ''}}"
style="--td-grid-item-text-color: {{item.color}}"
>
</t-grid-item>
</t-grid>
</swiper-item>
</swiper>
<view class="{{classPrefix}}__nav">
<view class="{{classPrefix}}__dots">
<view
wx:for="{{gridThemeItems.length}}"
wx:key="index"
class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
/>
</view>
</view>
</view>
</block>
</template>

View File

@@ -0,0 +1,20 @@
<template name="list">
<view
data-index="{{index}}"
style="{{ item.color ? 'color: ' + item.color : '' }}"
class="{{listThemeItemClass}}"
bind:tap="onSelect"
aria-role="{{ariaRole || 'button'}}"
aria-label="{{item.label || item}}"
tabindex="0"
>
<t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
<view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
<t-icon
wx:if="{{item.suffixIcon}}"
name="{{item.suffixIcon}}"
class="{{classPrefix}}__list-item-icon {{classPrefix}}__list-item-icon--suffix"
size="48rpx"
></t-icon>
</view>
</template>

View File

@@ -0,0 +1,61 @@
import { PopupProps } from '../popup/index';
export interface TdActionSheetProps {
align?: {
type: StringConstructor;
value?: 'center' | 'left';
};
cancelText?: {
type: StringConstructor;
value?: string;
};
count?: {
type: NumberConstructor;
value?: number;
};
description?: {
type: StringConstructor;
value?: string;
};
items: {
type: ArrayConstructor;
value?: Array<string | ActionSheetItem>;
required?: boolean;
};
popupProps?: {
type: ObjectConstructor;
value?: PopupProps;
};
showCancel?: {
type: BooleanConstructor;
value?: boolean;
};
showOverlay?: {
type: BooleanConstructor;
value?: boolean;
};
theme?: {
type: StringConstructor;
value?: 'list' | 'grid';
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
visible: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
defaultVisible: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
}
export interface ActionSheetItem {
label: string;
color?: string;
disabled?: boolean;
icon?: string;
suffixIcon?: string;
}

View File

@@ -0,0 +1 @@
export {};

View File

@@ -0,0 +1,28 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class AvatarGroup extends SuperComponent {
externalClasses: string[];
properties: import("./type").TdAvatarGroupProps;
data: {
prefix: string;
classPrefix: string;
hasChild: boolean;
length: number;
className: string;
};
options: {
multipleSlots: boolean;
};
relations: RelationsOptions;
lifetimes: {
attached(): void;
ready(): void;
};
observers: {
'cascading, size'(): void;
};
methods: {
setClass(): void;
handleMax(): void;
onCollapsedItemClick(e: WechatMiniprogram.CustomEvent): void;
};
}

View File

@@ -0,0 +1,81 @@
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 avatarGroupProps from './props';
const { prefix } = config;
const name = `${prefix}-avatar-group`;
let AvatarGroup = class AvatarGroup extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-image`];
this.properties = avatarGroupProps;
this.data = {
prefix,
classPrefix: name,
hasChild: true,
length: 0,
className: '',
};
this.options = {
multipleSlots: true,
};
this.relations = {
'../avatar/avatar': {
type: 'descendant',
},
};
this.lifetimes = {
attached() {
this.setClass();
},
ready() {
this.setData({
length: this.$children.length,
});
this.handleMax();
},
};
this.observers = {
'cascading, size'() {
this.setClass();
},
};
this.methods = {
setClass() {
const { cascading, size } = this.properties;
const direction = cascading.split('-')[0];
const classList = [
name,
`${prefix}-class`,
`${name}-offset-${direction}`,
`${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
];
this.setData({
className: classList.join(' '),
});
},
handleMax() {
const { max } = this.data;
const len = this.$children.length;
if (!max || max > len)
return;
const restAvatars = this.$children.splice(max, len - max);
restAvatars.forEach((child) => {
child.hide();
});
},
onCollapsedItemClick(e) {
this.triggerEvent('collapsed-item-click', e.detail);
},
};
}
};
AvatarGroup = __decorate([
wxComponent()
], AvatarGroup);
export default AvatarGroup;

View File

@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "shared",
"usingComponents": {
"t-avatar": "../avatar/avatar"
}
}

View File

@@ -0,0 +1,21 @@
<wxs src="../common/utils.wxs" module="_" />
<view style="{{_._style([style, customStyle])}}" class="{{className}} class">
<slot />
<!-- 自定义折叠元素 -->
<view class="{{classPrefix}}__collapse--slot">
<slot name="collapse-avatar" />
</view>
<!-- 默认折叠元素 -->
<view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}" bindtap="onCollapsedItemClick">
<t-avatar
t-class-image="{{prefix}}-avatar--border {{prefix}}-avatar--border-{{size}} {{prefix}}-class-image"
t-class-content="{{prefix}}-class-content"
size="{{size}}"
shape="{{shape}}"
icon="{{ collapseAvatar ? '' : 'user-add'}}"
aria-role="none"
>{{collapseAvatar}}</t-avatar
>
</view>
</view>

View File

@@ -0,0 +1,214 @@
.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-avatar-group {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}
.t-avatar-group-offset-left .t-avatar__wrapper,
.t-avatar-group-offset-right .t-avatar__wrapper {
padding: var(--td-avatar-group-line-spacing, 4rpx) 0;
}
.t-avatar-group-offset-left-small,
.t-avatar-group-offset-right-small {
--td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -16rpx);
}
.t-avatar-group-offset-left-medium,
.t-avatar-group-offset-right-medium {
--td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -16rpx);
}
.t-avatar-group-offset-left-large,
.t-avatar-group-offset-right-large {
--td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -16rpx);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(1) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 1);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(2) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 2);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(3) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 3);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(4) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 4);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(5) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 5);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(6) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 6);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(7) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 7);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(8) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 8);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(9) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 9);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(10) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 10);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(11) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 11);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(12) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 12);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(13) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 13);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(14) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 14);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(15) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 15);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(16) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 16);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(17) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 17);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(18) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 18);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(19) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 19);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(20) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 20);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(21) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 21);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(22) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 22);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(23) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 23);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(24) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 24);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(25) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 25);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(26) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 26);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(27) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 27);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(28) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 28);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(29) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 29);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(30) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 30);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(31) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 31);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(32) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 32);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(33) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 33);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(34) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 34);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(35) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 35);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(36) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 36);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(37) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 37);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(38) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 38);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(39) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 39);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(40) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 40);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(41) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 41);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(42) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 42);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(43) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 43);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(44) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 44);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(45) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 45);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(46) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 46);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(47) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 47);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(48) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 48);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(49) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 49);
}
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(50) {
z-index: calc(var(--td-avatar-group-init-z-index, 50) - 50);
}
.t-avatar-group__collapse--slot,
.t-avatar-group__collapse--default {
z-index: 0;
font-weight: 600;
}
.t-avatar-group__collapse--slot {
float: left;
}
.t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
display: none;
float: left;
}
.t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
display: block;
float: left;
}

View File

@@ -0,0 +1,3 @@
import { TdAvatarGroupProps } from './type';
declare const props: TdAvatarGroupProps;
export default props;

View File

@@ -0,0 +1,20 @@
const props = {
cascading: {
type: String,
value: 'left-up',
},
collapseAvatar: {
type: String,
},
max: {
type: Number,
},
shape: {
type: String,
},
size: {
type: String,
value: '',
},
};
export default props;

View File

@@ -0,0 +1,24 @@
import { ShapeEnum } from '../common/common';
export interface TdAvatarGroupProps {
cascading?: {
type: StringConstructor;
value?: CascadingValue;
};
collapseAvatar?: {
type: StringConstructor;
value?: string;
};
max?: {
type: NumberConstructor;
value?: number;
};
shape?: {
type: StringConstructor;
value?: ShapeEnum;
};
size?: {
type: StringConstructor;
value?: string;
};
}
export declare type CascadingValue = 'left-up' | 'right-up';

View File

@@ -0,0 +1 @@
export {};

View File

@@ -0,0 +1,91 @@
:: BASE_DOC ::
## API
### Avatar Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
alt | String | - | show it when url is not valid | N
badge-props | Object | - | Typescript`BadgeProps`[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
bordered | Boolean | false | \- | N
hide-on-load-failed | Boolean | false | hide image when loading image failed | N
icon | String / Object | - | \- | N
image | String | - | images url | N
image-props | Object | - | Typescript`ImageProps`[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
shape | String | - | shape。options: circle/round。Typescript`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | size | N
### Avatar Events
name | params | description
-- | -- | --
error | - | trigger on image load failed
### Avatar External Classes
className | Description
-- | --
t-class | \-
t-class-alt | \-
t-class-content | \-
t-class-icon | \-
t-class-image | \-
### AvatarGroup Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
cascading | String | 'left-up' | multiple images cascading。options: left-up/right-up。Typescript`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
collapse-avatar | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
max | Number | - | \- | N
shape | String | - | shape。options: circle/round。Typescript`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | size | N
### AvatarGroup Events
name | params | description
-- | -- | --
collapsed-item-click | - | \-
### AvatarGroup External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
t-class-image | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | -
--td-avatar-group-line-spacing | 4rpx | -
--td-avatar-group-margin-left-large | -16rpx | -
--td-avatar-group-margin-left-medium | -16rpx | -
--td-avatar-group-margin-left-small | -16rpx | -
--td-avatar-bg-color | @brand-color-light-active | -
--td-avatar-border-color | #fff | -
--td-avatar-border-width-large | 6rpx | -
--td-avatar-border-width-medium | 4rpx | -
--td-avatar-border-width-small | 2rpx | -
--td-avatar-circle-border-radius | @radius-circle | -
--td-avatar-content-color | @brand-color | -
--td-avatar-icon-large-font-size | 64rpx | -
--td-avatar-icon-medium-font-size | 48rpx | -
--td-avatar-icon-small-font-size | 40rpx | -
--td-avatar-large-width | 128rpx | -
--td-avatar-margin-left | 0 | -
--td-avatar-medium-width | 96rpx | -
--td-avatar-round-border-radius | @radius-default | -
--td-avatar-small-width | 80rpx | -
--td-avatar-text-large-font-size | @font-size-xl | -
--td-avatar-text-medium-font-size | @font-size-m | -
--td-avatar-text-small-font-size | @font-size-base | -

View File

@@ -0,0 +1,151 @@
---
title: Avatar 头像
description: 用于展示用户头像信息,除了纯展示也可点击进入个人详情等操作。
spline: data
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-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-85%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-avatar": "tdesign-miniprogram/avatar/avatar",
"t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/a86Sfimw7VSO" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 头像类型
图片头像
{{ image-avatar }}
字符头像
{{ character-avatar }}
图标头像
{{ icon-avatar }}
徽标头像
{{ badge-avatar }}
### 组合头像
纯展示
{{ exhibition }}
带操作
{{ action }}
### 头像尺寸
头像 large/medium/small 尺寸
{{ size }}
## API
### Avatar Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
alt | String | - | 头像替换文本,仅当图片加载失败时有效 | N
badge-props | Object | - | 头像右上角提示信息,继承 Badge 组件的全部特性。如小红点或者数字。TS 类型:`BadgeProps`[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
bordered | Boolean | false | 已废弃。是否显示外边框 | N
hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
icon | String / Object | - | 图标。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon`。 | N
image | String | - | 图片地址 | N
image-props | Object | - | 透传至 Image 组件。TS 类型:`ImageProps`[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时,默认值为 circle。如果父组件 AvatarGroup 存在,默认值便由 AvatarGroup.shape 决定。可选项circle/round。TS 类型:`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | 尺寸示例值small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时,默认值为 medium。如果父组件 AvatarGroup 存在,默认值便由 AvatarGroup.size 决定 | N
### Avatar Events
名称 | 参数 | 描述
-- | -- | --
error | - | 图片加载失败时触发
### Avatar External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-alt | 替代文本样式类
t-class-content | 内容样式类
t-class-icon | 图标样式类
t-class-image | 图片样式类
### AvatarGroup Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
cascading | String | 'left-up' | 图片之间的层叠关系可选值左侧图片在上和右侧图片在上。可选项left-up/right-up。TS 类型:`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
collapse-avatar | String / Slot | - | 头像数量超出时,会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例:`+5``...`, `更多`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
max | Number | - | 能够同时显示的最多头像数量 | N
shape | String | - | 形状。优先级低于 Avatar.shape。可选项circle/round。TS 类型:`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
size | String | - | 尺寸示例值small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
### AvatarGroup Events
名称 | 参数 | 描述
-- | -- | --
collapsed-item-click | - | 点击头像折叠元素触发
### AvatarGroup External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
t-class-image | 图片样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-avatar-group-init-z-index | @avatar-group-init-zIndex) - @i | -
--td-avatar-group-line-spacing | 4rpx | -
--td-avatar-group-margin-left-large | -16rpx | -
--td-avatar-group-margin-left-medium | -16rpx | -
--td-avatar-group-margin-left-small | -16rpx | -
--td-avatar-bg-color | @brand-color-light-active | -
--td-avatar-border-color | #fff | -
--td-avatar-border-width-large | 6rpx | -
--td-avatar-border-width-medium | 4rpx | -
--td-avatar-border-width-small | 2rpx | -
--td-avatar-circle-border-radius | @radius-circle | -
--td-avatar-content-color | @brand-color | -
--td-avatar-icon-large-font-size | 64rpx | -
--td-avatar-icon-medium-font-size | 48rpx | -
--td-avatar-icon-small-font-size | 40rpx | -
--td-avatar-large-width | 128rpx | -
--td-avatar-margin-left | 0 | -
--td-avatar-medium-width | 96rpx | -
--td-avatar-round-border-radius | @radius-default | -
--td-avatar-small-width | 80rpx | -
--td-avatar-text-large-font-size | @font-size-xl | -
--td-avatar-text-medium-font-size | @font-size-m | -
--td-avatar-text-small-font-size | @font-size-base | -

View File

@@ -0,0 +1,22 @@
/// <reference types="miniprogram-api-typings" />
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Avatar extends SuperComponent {
options: WechatMiniprogram.Component.ComponentOptions;
externalClasses: string[];
properties: import("./type").TdAvatarProps;
data: {
prefix: string;
classPrefix: string;
isShow: boolean;
zIndex: number;
systemInfo: WechatMiniprogram.WindowInfo | WechatMiniprogram.SystemInfo;
};
relations: RelationsOptions;
observers: {
icon(icon: any): void;
};
methods: {
hide(): void;
onLoadError(e: WechatMiniprogram.CustomEvent): void;
};
}

View File

@@ -0,0 +1,73 @@
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 avatarProps from './props';
import { setIcon, systemInfo } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-avatar`;
let Avatar = class Avatar extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-image`,
`${prefix}-class-icon`,
`${prefix}-class-alt`,
`${prefix}-class-content`,
];
this.properties = avatarProps;
this.data = {
prefix,
classPrefix: name,
isShow: true,
zIndex: 0,
systemInfo,
};
this.relations = {
'../avatar-group/avatar-group': {
type: 'ancestor',
linked(parent) {
this.parent = parent;
this.setData({
shape: this.data.shape || parent.data.shape || 'circle',
size: this.data.size || parent.data.size,
bordered: true,
});
},
},
};
this.observers = {
icon(icon) {
const obj = setIcon('icon', icon, '');
this.setData(Object.assign({}, obj));
},
};
this.methods = {
hide() {
this.setData({
isShow: false,
});
},
onLoadError(e) {
if (this.properties.hideOnLoadFailed) {
this.setData({
isShow: false,
});
}
this.triggerEvent('error', e.detail);
},
};
}
};
Avatar = __decorate([
wxComponent()
], Avatar);
export default Avatar;

View File

@@ -0,0 +1,9 @@
{
"component": true,
"styleIsolation": "shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-badge": "../badge/badge",
"t-image": "../image/image"
}
}

View File

@@ -0,0 +1,54 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<wxs src="./avatar.wxs" module="_this" />
<view
class="{{classPrefix}}__wrapper class {{prefix}}-class"
style="{{_._style([_this.getStyles(isShow), style, customStyle])}}"
>
<t-badge
color="{{badgeProps.color || ''}}"
content="{{badgeProps.content || ''}}"
count="{{badgeProps.count || 0}}"
dot="{{badgeProps.dot || false}}"
max-count="{{badgeProps.maxCount || 99}}"
offset="{{badgeProps.offset || []}}"
shape="{{badgeProps.shape || 'circle'}}"
show-zero="{{badgeProps.showZero || false}}"
size="{{badgeProps.size || 'medium'}}"
t-class="{{badgeProps.tClass}}"
t-class-content="{{badgeProps.tClassContent}}"
t-class-count="{{badgeProps.tClassCount}}"
>
<view
class="{{_this.getClass(classPrefix, size || 'medium', shape, bordered)}} {{prefix}}-class-image"
style="{{_this.getSize(size, systemInfo)}}"
aria-label="{{ ariaLabel || alt ||'头像'}}"
aria-role="{{ ariaRole || 'img'}}"
aria-hidden="{{ ariaHidden }}"
>
<t-image
wx:if="{{image}}"
t-class="{{prefix}}-image {{classPrefix}}__image"
t-class-load="{{prefix}}-class-alt"
style="{{imageProps && imageProps.style || ''}}"
src="{{image}}"
mode="{{imageProps && imageProps.mode || 'aspectFill'}}"
lazy="{{imageProps && imageProps.lazy || false}}"
loading="{{imageProps && imageProps.loading || 'default'}}"
shape="{{imageProps && imageProps.shape || 'round'}}"
webp="{{imageProps && imageProps.webp || false}}"
error="{{alt || 'default'}}"
bind:error="onLoadError"
/>
<template
wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}"
is="icon"
data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', name: iconName, ...iconData}}"
/>
<view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
<slot />
</view>
</view>
</t-badge>
</view>

View File

@@ -0,0 +1,30 @@
module.exports = {
getClass: function (classPrefix, size, shape, bordered) {
var hasPx = (size || '').indexOf('px') > -1;
var borderSize = hasPx ? 'medium' : size;
var classNames = [
classPrefix,
classPrefix + (shape === 'round' ? '--round' : '--circle'),
bordered ? classPrefix + '--border' + ' ' + classPrefix + '--border-' + borderSize : '',
hasPx ? '' : classPrefix + '--' + size,
];
return classNames.join(' ');
},
getSize: function (size = 'medium', systemInfo) {
var res = getRegExp('^([0-9]+)(px|rpx)$').exec(size);
if (res && res.length >= 3) {
var px = res[1];
if (res[2] === 'rpx') {
px = Math.floor((systemInfo.windowWidth * res[1]) / 750);
}
return 'width:' + size + ';height:' + size + ';font-size:' + ((px / 8) * 3 + 2) + 'px';
}
},
getStyles: function (isShow) {
return isShow ? '' : 'display: none;';
},
};

View File

@@ -0,0 +1,104 @@
.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-avatar {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: var(--td-avatar-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-avatar__wrapper {
display: inline-flex;
position: relative;
vertical-align: top;
margin-left: var(--td-avatar-margin-left, 0);
}
.t-avatar--large {
width: var(--td-avatar-large-width, 128rpx);
height: var(--td-avatar-large-width, 128rpx);
font-size: var(--td-avatar-text-large-font-size, var(--td-font-size-xl, 40rpx));
}
.t-avatar--large .t-avatar__icon {
font-size: var(--td-avatar-icon-large-font-size, 64rpx);
}
.t-avatar--medium {
width: var(--td-avatar-medium-width, 96rpx);
height: var(--td-avatar-medium-width, 96rpx);
font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-m, 32rpx));
}
.t-avatar--medium .t-avatar__icon {
font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
}
.t-avatar--small {
width: var(--td-avatar-small-width, 80rpx);
height: var(--td-avatar-small-width, 80rpx);
font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-base, 28rpx));
}
.t-avatar--small .t-avatar__icon {
font-size: var(--td-avatar-icon-small-font-size, 40rpx);
}
.t-avatar .t-image,
.t-avatar__image {
width: 100%;
height: 100%;
}
.t-avatar--circle {
border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
overflow: hidden;
}
.t-avatar--round {
border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
overflow: hidden;
}
.t-avatar__text,
.t-avatar__icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.t-avatar__text:empty,
.t-avatar__icon:empty {
width: 0;
height: 0;
}
.t-avatar--border {
border-color: var(--td-avatar-border-color, #fff);
border-style: solid;
}
.t-avatar--border-small {
border-width: var(--td-avatar-border-width-small, 2rpx);
}
.t-avatar--border-medium {
border-width: var(--td-avatar-border-width-medium, 4rpx);
}
.t-avatar--border-large {
border-width: var(--td-avatar-border-width-large, 6rpx);
}

View File

@@ -0,0 +1,3 @@
import { TdAvatarProps } from './type';
declare const props: TdAvatarProps;
export default props;

View File

@@ -0,0 +1,35 @@
const props = {
alt: {
type: String,
value: '',
},
badgeProps: {
type: Object,
},
bordered: {
type: Boolean,
value: false,
},
hideOnLoadFailed: {
type: Boolean,
value: false,
},
icon: {
type: null,
},
image: {
type: String,
value: '',
},
imageProps: {
type: Object,
},
shape: {
type: String,
},
size: {
type: String,
value: '',
},
};
export default props;

View File

@@ -0,0 +1,41 @@
import { BadgeProps } from '../badge/index';
import { ImageProps } from '../image/index';
import { ShapeEnum } from '../common/common';
export interface TdAvatarProps {
alt?: {
type: StringConstructor;
value?: string;
};
badgeProps?: {
type: ObjectConstructor;
value?: BadgeProps;
};
bordered?: {
type: BooleanConstructor;
value?: boolean;
};
hideOnLoadFailed?: {
type: BooleanConstructor;
value?: boolean;
};
icon?: {
type: null;
value?: string | object;
};
image?: {
type: StringConstructor;
value?: string;
};
imageProps?: {
type: ObjectConstructor;
value?: ImageProps;
};
shape?: {
type: StringConstructor;
value?: ShapeEnum;
};
size?: {
type: StringConstructor;
value?: string;
};
}

View File

@@ -0,0 +1 @@
export {};

View File

@@ -0,0 +1,41 @@
:: BASE_DOC ::
## API
### BackTop Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
fixed | Boolean | true | \- | N
icon | String / Boolean / Object / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
scroll-top | Number | 0 | \- | N
text | String | '' | \- | N
theme | String | round | options: round/half-round/round-dark/half-round-dark | N
visibility-height | Number | 200 | \- | N
### BackTop Events
name | params | description
-- | -- | --
to-top | \- | \-
### BackTop External Classes
className | Description
-- | --
t-class | \-
t-class-icon | \-
t-class-text | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-back-top-round-bg-color | @font-white-1 | -
--td-back-top-round-border-color | @component-border | -
--td-back-top-round-border-radius | @radius-circle | -
--td-back-top-round-color | @font-gray-1 | -
--td-back-top-round-dark-bg-color | @gray-color-14 | -
--td-back-top-round-dark-color | @font-white-1 | -

View File

@@ -0,0 +1,72 @@
---
title: BackTop 返回顶部
description: 用于当页面过长往下滑动时,帮助用户快速回到页面顶部。
spline: navigation
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-100%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-back-top": "tdesign-miniprogram/back-top/back-top",
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/2aR1demj7aS2" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
<img src="https://tdesign.gtimg.com/miniprogram/readme/backtop-1.png" width="375px" height="50%">
### 基础返回顶部
{{ base }}
## API
### BackTop Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
scroll-top | Number | 0 | 页面滚动距离 | N
text | String | '' | 文案 | N
theme | String | round | 预设的样式类型。可选项round/half-round/round-dark/half-round-dark | N
visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N
### BackTop Events
名称 | 参数 | 描述
-- | -- | --
to-top | \- | 点击触发
### BackTop External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-icon | 图标样式类
t-class-text | 文本样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-back-top-round-bg-color | @font-white-1 | -
--td-back-top-round-border-color | @component-border | -
--td-back-top-round-border-radius | @radius-circle | -
--td-back-top-round-color | @font-gray-1 | -
--td-back-top-round-dark-bg-color | @gray-color-14 | -
--td-back-top-round-dark-color | @font-white-1 | -

View File

@@ -0,0 +1,26 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class BackTop extends SuperComponent {
externalClasses: string[];
options: {
multipleSlots: boolean;
};
properties: import("./type").TdBackTopProps;
relations: RelationsOptions;
data: {
prefix: string;
classPrefix: string;
_icon: any;
hidden: boolean;
};
observers: {
icon(): void;
scrollTop(value: number): void;
};
lifetimes: {
ready(): void;
};
methods: {
setIcon(v: any): void;
toTop(): void;
};
}

View File

@@ -0,0 +1,73 @@
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 { calcIcon } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-back-top`;
let BackTop = class BackTop extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
this.options = {
multipleSlots: true,
};
this.properties = props;
this.relations = {
'../pull-down-refresh/pull-down-refresh': {
type: 'ancestor',
},
};
this.data = {
prefix,
classPrefix: name,
_icon: null,
hidden: true,
};
this.observers = {
icon() {
this.setIcon();
},
scrollTop(value) {
const { visibilityHeight } = this.properties;
this.setData({ hidden: value < visibilityHeight });
},
};
this.lifetimes = {
ready() {
const { icon } = this.properties;
this.setIcon(icon);
},
};
this.methods = {
setIcon(v) {
this.setData({
_icon: calcIcon(v, 'backtop'),
});
},
toTop() {
var _a;
this.triggerEvent('to-top');
if (this.$parent) {
(_a = this.$parent) === null || _a === void 0 ? void 0 : _a.setScrollTop(0);
this.setData({ hidden: true });
}
else {
wx.pageScrollTo({
scrollTop: 0,
duration: 300,
});
}
},
};
}
};
BackTop = __decorate([
wxComponent()
], BackTop);
export default BackTop;

View File

@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon"
}
}

View File

@@ -0,0 +1,17 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{_._style([style, customStyle])}}"
class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}"
bindtap="toTop"
aria-role="button"
hidden="{{hidden}}"
>
<view class="{{classPrefix}}__icon" aria-hidden>
<slot name="icon" />
<template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ..._icon }}" />
</view>
<view wx:if="{{!!text}}" class="{{classPrefix}}__text--{{theme}} {{prefix}}-class-text">{{text}}</view>
<slot />
</view>

View File

@@ -0,0 +1,91 @@
.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-back-top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: transparent;
overflow: hidden;
box-sizing: border-box;
transition: height 0.2s;
height: auto;
}
.t-back-top--fixed {
position: fixed;
right: var(--td-spacer, 16rpx);
bottom: calc(var(--td-spacer-2, 32rpx) + env(safe-area-inset-bottom));
}
.t-back-top--round,
.t-back-top--round-dark {
width: 96rpx;
height: 96rpx;
border-radius: var(--td-back-top-round-border-radius, var(--td-radius-circle, 50%));
}
.t-back-top--round,
.t-back-top--half-round {
color: var(--td-back-top-round-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
border: 1rpx solid var(--td-back-top-round-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
background-color: var(--td-back-top-round-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-back-top--round-dark,
.t-back-top--half-round-dark {
color: var(--td-back-top-round-dark-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
background-color: var(--td-back-top-round-dark-bg-color, var(--td-gray-color-13, #242424));
}
.t-back-top--half-round,
.t-back-top--half-round-dark {
width: 120rpx;
height: 80rpx;
border-radius: 0;
border-top-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
border-bottom-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
flex-direction: row;
right: 0;
}
.t-back-top__text--round,
.t-back-top__text--round-dark,
.t-back-top__text--half-round,
.t-back-top__text--half-round-dark {
font-size: var(--td-font-size, 20rpx);
line-height: 24rpx;
}
.t-back-top__text--half-round,
.t-back-top__text--half-round-dark {
width: 48rpx;
}
.t-back-top__icon:not(:empty) + .t-back-top__text--half-round,
.t-back-top__icon:not(:empty) + .t-back-top__text--half-round-dark {
margin-left: 8rpx;
}
.t-back-top__icon {
display: flex;
justify-content: center;
align-items: center;
font-size: 44rpx;
}

View File

@@ -0,0 +1,3 @@
import { TdBackTopProps } from './type';
declare const props: TdBackTopProps;
export default props;

View File

@@ -0,0 +1,31 @@
const props = {
fixed: {
type: Boolean,
value: true,
},
icon: {
type: null,
value: true,
},
scrollTop: {
type: Number,
value: 0,
},
style: {
type: String,
value: '',
},
text: {
type: String,
value: '',
},
theme: {
type: String,
value: 'round',
},
visibilityHeight: {
type: Number,
value: 200,
},
};
export default props;

View File

@@ -0,0 +1,30 @@
export interface TdBackTopProps {
fixed?: {
type: BooleanConstructor;
value?: boolean;
};
icon?: {
type: null;
value?: string | boolean | object;
};
scrollTop?: {
type: NumberConstructor;
value?: number;
};
style?: {
type: StringConstructor;
value?: string;
};
text?: {
type: StringConstructor;
value?: string;
};
theme?: {
type: StringConstructor;
value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
};
visibilityHeight?: {
type: NumberConstructor;
value?: number;
};
}

View File

@@ -0,0 +1 @@
export {};

View File

@@ -0,0 +1,45 @@
:: BASE_DOC ::
## API
### Badge Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
color | String | - | \- | N
content | String | - | \- | N
count | String / Number / Slot | 0 | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
dot | Boolean | false | \- | N
max-count | Number | 99 | \- | N
offset | Array | - | Typescript`Array<string \| number>` | N
shape | String | circle | options: circle/square/bubble/ribbon | N
show-zero | Boolean | false | \- | N
size | String | medium | options: medium/large | N
### Badge External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-
t-class-count | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-badge-basic-height | 32rpx | -
--td-badge-basic-padding | 8rpx | -
--td-badge-basic-width | 32rpx | -
--td-badge-bg-color | @error-color | -
--td-badge-border-radius | 4rpx | -
--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
--td-badge-dot-size | 16rpx | -
--td-badge-font-size | @font-size-xs | -
--td-badge-font-weight | 600 | -
--td-badge-large-font-size | @font-size-s | -
--td-badge-large-height | 40rpx | -
--td-badge-large-padding | 10rpx | -
--td-badge-text-color | @font-white-1 | -

View File

@@ -0,0 +1,86 @@
---
title: Badge 徽标
description: 用于告知用户,该区域的状态变化或者待处理任务的数量。
spline: data
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-100%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-badge": "tdesign-miniprogram/badge/badge"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/TgaeQimG73SD" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
{{ base }}
### 组件样式
{{ theme }}
### 组件尺寸
{{ size }}
## FAQ
### 如何处理由 ribbon 徽标溢出导致页面出现横向滚动?
角标溢出问题建议从父容器组件处理。如 <a href="https://github.com/Tencent/tdesign-miniprogram/issues/3063" title="如 #3063 " target="_blank" rel="noopener noreferrer"> #3063 </a>,可以给父容器 `cell` 组件添加 `overflow: hidden`,处理溢出造成页面出现横向滚动的问题。
## API
### Badge Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
color | String | - | 颜色 | N
content | String | - | 徽标内容,示例:`content='自定义内容'`。也可以使用默认插槽定义 | N
count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字,也可以是文字。如:'new'/3/99+。特殊:值为空表示使用插槽渲染。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
dot | Boolean | false | 是否为红点 | N
max-count | Number | 99 | 封顶的数字值 | N
offset | Array | - | 设置状态点的位置偏移,示例:[-10, 20] 或 ['10em', '8rem']。TS 类型:`Array<string \| number>` | N
shape | String | circle | 形状。可选项circle/square/bubble/ribbon | N
show-zero | Boolean | false | 当数值为 0 时,是否展示徽标 | N
size | String | medium | 尺寸。可选项medium/large | N
### Badge External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类
t-class-count | 计数样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-badge-basic-height | 32rpx | -
--td-badge-basic-padding | 8rpx | -
--td-badge-basic-width | 32rpx | -
--td-badge-bg-color | @error-color | -
--td-badge-border-radius | 4rpx | -
--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
--td-badge-dot-size | 16rpx | -
--td-badge-font-size | @font-size-xs | -
--td-badge-font-weight | 600 | -
--td-badge-large-font-size | @font-size-s | -
--td-badge-large-height | 40rpx | -
--td-badge-large-padding | 10rpx | -
--td-badge-text-color | @font-white-1 | -

View File

@@ -0,0 +1,21 @@
import { SuperComponent } from '../common/src/index';
import type { TdBadgeProps } from './type';
export interface BadgeProps extends TdBadgeProps {
}
export default class Badge extends SuperComponent {
options: {
multipleSlots: boolean;
};
externalClasses: string[];
properties: TdBadgeProps;
data: {
prefix: string;
classPrefix: string;
value: string;
labelID: string;
descriptionID: string;
};
lifetimes: {
ready(): void;
};
}

View File

@@ -0,0 +1,43 @@
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 { uniqueFactory } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-badge`;
const getUniqueID = uniqueFactory('badge');
let Badge = class Badge extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
multipleSlots: true,
};
this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
value: '',
labelID: '',
descriptionID: '',
};
this.lifetimes = {
ready() {
const uniqueID = getUniqueID();
this.setData({
labelID: `${uniqueID}_label`,
descriptionID: `${uniqueID}_description`,
});
},
};
}
};
Badge = __decorate([
wxComponent()
], Badge);
export default Badge;

View File

@@ -0,0 +1,5 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {}
}

View File

@@ -0,0 +1,34 @@
<wxs src="./badge.wxs" module="_this" />
<wxs src="../common/utils.wxs" module="_" />
<!--
1. labelID 用于描述当前元素的文本
2. descriptionID 用于描述badge消息的文本
3. role=option一般用于多个内容合并焦点连续朗读
-->
<view
style="{{_._style([style, customStyle])}}"
class="{{_this.getBadgeOuterClass({shape})}} class {{prefix}}-class"
aria-labelledby="{{labelID}}"
aria-describedby="{{descriptionID}}"
aria-role="{{ ariaRole || 'option'}}"
>
<view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true">
<slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
<text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
</view>
<view
aria-hidden="true"
aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
wx:if="{{_this.isShowBadge({dot,count,showZero})}}"
id="{{descriptionID}}"
class="{{_this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
style="{{_._style([_this.getBadgeStyles({color, offset})])}}"
aria-hidden="true"
aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
>
{{ _this.getBadgeValue({dot, count, maxCount}) }}
</view>
<slot name="count" />
</view>

View File

@@ -0,0 +1,71 @@
var getBadgeValue = function (props) {
if (props.dot) {
return '';
}
if (isNaN(props.count) || isNaN(props.maxCount)) {
return props.count;
}
return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
};
var hasUnit = function (unit) {
return (
unit.indexOf('px') > 0 ||
unit.indexOf('rpx') > 0 ||
unit.indexOf('em') > 0 ||
unit.indexOf('rem') > 0 ||
unit.indexOf('%') > 0 ||
unit.indexOf('vh') > 0 ||
unit.indexOf('vm') > 0
);
};
var getBadgeStyles = function (props) {
var styleStr = '';
if (props.color) {
styleStr += 'background:' + props.color + ';';
}
if (props.offset[0]) {
styleStr +=
'left: calc(100% + ' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ');';
}
if (props.offset[1]) {
styleStr += 'top:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
}
return styleStr;
};
var getBadgeOuterClass = function (props) {
var baseClass = 't-badge';
var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
return classNames.join(' ');
};
var getBadgeInnerClass = function (props) {
var baseClass = 't-badge';
var classNames = [
baseClass + '--basic',
props.dot ? baseClass + '--dot' : '',
baseClass + '--' + props.size,
baseClass + '--' + props.shape,
!props.dot && props.count ? baseClass + '--count' : '',
];
return classNames.join(' ');
};
var isShowBadge = function (props) {
if (props.dot) {
return true;
}
if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
return false;
}
if (props.count == null) return false;
return true;
};
module.exports.getBadgeValue = getBadgeValue;
module.exports.getBadgeStyles = getBadgeStyles;
module.exports.getBadgeOuterClass = getBadgeOuterClass;
module.exports.getBadgeInnerClass = getBadgeInnerClass;
module.exports.isShowBadge = isShowBadge;

View File

@@ -0,0 +1,113 @@
.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-badge {
position: relative;
display: inline-flex;
align-items: start;
}
.t-badge--basic {
z-index: 100;
padding: 0 var(--td-badge-basic-padding, 8rpx);
font-size: var(--td-badge-font-size, var(--td-font-size-xs, var(--td-font-size, 20rpx)));
color: var(--td-badge-text-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
text-align: center;
height: var(--td-badge-basic-height, 32rpx);
line-height: var(--td-badge-basic-height, 32rpx);
font-weight: var(--td-badge-font-weight, 600);
border-radius: var(--td-badge-border-radius, 4rpx);
}
.t-badge--dot {
height: var(--td-badge-dot-size, 16rpx);
border-radius: 50%;
min-width: var(--td-badge-dot-size, 16rpx);
padding: 0;
}
.t-badge--count {
min-width: var(--td-badge-basic-width, 32rpx);
white-space: nowrap;
box-sizing: border-box;
}
.t-badge--circle {
border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2);
}
.t-badge__ribbon-outer {
position: absolute;
top: 0;
right: 0;
}
.t-badge--ribbon {
position: relative;
display: inline-block;
transform-origin: center center;
transform: translate(calc(50% - var(--td-badge-basic-height, 32rpx) + 1rpx), calc(-50% + var(--td-badge-basic-height, 32rpx) - 1rpx)) rotate(45deg);
border-radius: 0;
}
.t-badge--ribbon::before,
.t-badge--ribbon::after {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: 0;
border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
font-size: 0;
}
.t-badge--ribbon::before {
left: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
border-left: var(--td-badge-basic-height, 32rpx) solid transparent;
}
.t-badge--ribbon::after {
right: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
border-right: var(--td-badge-basic-height, 32rpx) solid transparent;
}
.t-badge--bubble {
border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
}
.t-badge--large {
font-size: var(--td-badge-large-font-size, var(--td-font-size-s, 24rpx));
height: var(--td-badge-large-height, 40rpx);
min-width: var(--td-badge-large-height, 40rpx);
line-height: var(--td-badge-large-height, 40rpx);
padding: 0 var(--td-badge-large-padding, 10rpx);
}
.t-badge--large.t-badge--circle {
border-radius: calc(var(--td-badge-large-height, 40rpx) / 2);
}
.t-badge__content:not(:empty) + .t-has-count {
transform-origin: center center;
transform: translate(-50%, -50%);
position: absolute;
left: 100%;
top: 0;
}
.t-badge__content-text {
display: block;
line-height: 48rpx;
color: var(--td-badge-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}

View File

@@ -0,0 +1,3 @@
export * from './type';
export * from './props';
export * from './badge';

View File

@@ -0,0 +1,3 @@
export * from './type';
export * from './props';
export * from './badge';

View File

@@ -0,0 +1,3 @@
import { TdBadgeProps } from './type';
declare const props: TdBadgeProps;
export default props;

View File

@@ -0,0 +1,41 @@
const props = {
color: {
type: String,
value: '',
},
content: {
type: String,
value: '',
},
count: {
type: null,
value: 0,
},
dot: {
type: Boolean,
value: false,
},
externalClasses: {
type: Array,
},
maxCount: {
type: Number,
value: 99,
},
offset: {
type: Array,
},
shape: {
type: String,
value: 'circle',
},
showZero: {
type: Boolean,
value: false,
},
size: {
type: String,
value: 'medium',
},
};
export default props;

View File

@@ -0,0 +1,42 @@
export interface TdBadgeProps {
color?: {
type: StringConstructor;
value?: string;
};
content?: {
type: StringConstructor;
value?: string;
};
count?: {
type: null;
value?: string | number;
};
dot?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-content', 't-class-count'];
};
maxCount?: {
type: NumberConstructor;
value?: number;
};
offset?: {
type: ArrayConstructor;
value?: Array<string | number>;
};
shape?: {
type: StringConstructor;
value?: 'circle' | 'square' | 'bubble' | 'ribbon';
};
showZero?: {
type: BooleanConstructor;
value?: boolean;
};
size?: {
type: StringConstructor;
value?: 'medium' | 'large';
};
}

View File

@@ -0,0 +1 @@
export {};

View File

@@ -0,0 +1,232 @@
---
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
---
<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>
## 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
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
app-parameter | String | - | \- | N
block | Boolean | false | make button to be a block-level element | N
content | String / Slot | - | button's children elements。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
custom-dataset | any | - | \- | 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/src/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
suffix | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 | \- | \-
contact | \- | \-
createliveactivity | \- | \-
error | \- | \-
getphonenumber | \- | \-
getrealtimephonenumber | \- | \-
getuserinfo | \- | \-
launchapp | \- | \-
opensetting | \- | \-
tap | `event` | \-
### 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-font-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-font-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-font-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-font-size | 36rpx | -
--td-button-small-padding-horizontal | 24rpx | -

View File

@@ -0,0 +1,234 @@
---
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"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/F1cSo7mm75SS" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 01 组件类型
#### 基础按钮
{{ base }}
#### 图标按钮
{{ icon-btn }}
#### 幽灵按钮
{{ ghost-btn }}
#### 组合按钮
{{ group-btn }}
#### 通栏按钮
{{ block-btn }}
### 02 组件状态
#### 按钮禁用态
{{ disabled }}
### 03 组件样式
#### 按钮尺寸
{{ size }}
#### 按钮形状
{{ shape }}
#### 按钮主题
{{ theme }}
## API
### Button Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
app-parameter | String | - | 打开 APP 时,向 APP 传递的参数open-type=launchApp时有效 | N
block | Boolean | false | 是否为块级元素 | N
content | String / Slot | - | 按钮内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
custom-dataset | any | - | 自定义 dataset可通过 event.currentTarget.dataset.custom 获取 | 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/src/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> *小程序插件中不能使用*<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
suffix | Slot | - | 右侧内容,可用于定义右侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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` 为头像临时文件链接
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时有效
tap | `event` | 点击按钮,当按钮不为加载或禁用状态时触发
### 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-font-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-font-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-font-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-font-size | 36rpx | -
--td-button-small-padding-horizontal | 24rpx | -

View File

@@ -0,0 +1,36 @@
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;
options: {
multipleSlots: boolean;
};
data: {
prefix: string;
className: string;
classPrefix: string;
};
observers: {
'theme, size, plain, block, shape, disabled, loading, variant'(): void;
icon(icon: any): 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;
agreeprivacyauthorization(e: any): void;
handleTap(e: any): void;
};
}

View File

@@ -0,0 +1,101 @@
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';
import { calcIcon } from '../common/utils';
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.options = {
multipleSlots: true,
};
this.data = {
prefix,
className: '',
classPrefix: name,
};
this.observers = {
'theme, size, plain, block, shape, disabled, loading, variant'() {
this.setClass();
},
icon(icon) {
this.setData({
_icon: calcIcon(icon, ''),
});
},
};
this.lifetimes = {
attached() {
this.setClass();
},
};
this.methods = {
setClass() {
const classList = [
name,
`${prefix}-class`,
`${name}--${this.data.variant || 'base'}`,
`${name}--${this.data.theme || 'default'}`,
`${name}--${this.data.shape || 'rectangle'}`,
`${name}--size-${this.data.size || 'medium'}`,
];
if (this.data.block) {
classList.push(`${name}--block`);
}
if (this.data.disabled) {
classList.push(`${name}--disabled`);
}
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);
},
agreeprivacyauthorization(e) {
this.triggerEvent('agreeprivacyauthorization', e.detail);
},
handleTap(e) {
if (this.data.disabled || this.data.loading)
return;
this.triggerEvent('tap', e);
},
};
}
};
Button = __decorate([
wxComponent()
], Button);
export default Button;

View File

@@ -0,0 +1,8 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-loading": "../loading/loading"
}
}

View File

@@ -0,0 +1,61 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<button
id="{{tId}}"
style="{{_._style([style, customStyle])}}"
data-custom="{{ customDataset }}"
class="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}}"
catch:tap="handleTap"
bind:getuserinfo="getuserinfo"
bind:contact="contact"
bind:getphonenumber="getphonenumber"
bind:error="error"
bind:opensetting="opensetting"
bind:launchapp="launchapp"
bind:chooseavatar="chooseavatar"
bind:agreeprivacyauthorization="agreeprivacyauthorization"
aria-label="{{ariaLabel}}"
>
<template
wx:if="{{_icon}}"
is="icon"
data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', ariaHidden: true, name: iconName, ..._icon}}"
/>
<t-loading
wx:if="{{loading}}"
delay="{{loadingProps.delay || 0}}"
duration="{{loadingProps.duration || 800}}"
indicator="{{loadingProps.indicator || true}}"
inheritColor="{{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 {{prefix}}-class-loading"
/>
<view class="{{classPrefix}}__content">
<slot name="content" />
<block wx:if="{{content}}">{{content}}</block>
<slot />
</view>
<slot name="suffix" />
</button>

View File

@@ -0,0 +1,541 @@
.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--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-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;
}

View File

@@ -0,0 +1,3 @@
export * from './props';
export * from './type';
export * from './button';

View File

@@ -0,0 +1,3 @@
export * from './props';
export * from './type';
export * from './button';

View File

@@ -0,0 +1,3 @@
import { TdButtonProps } from './type';
declare const props: TdButtonProps;
export default props;

View File

@@ -0,0 +1,108 @@
const props = {
appParameter: {
type: String,
value: '',
},
block: {
type: Boolean,
value: false,
},
content: {
type: String,
},
customDataset: {
type: null,
},
disabled: {
type: null,
value: undefined,
},
ghost: {
type: Boolean,
value: false,
},
hoverClass: {
type: String,
value: '',
},
hoverStartTime: {
type: Number,
value: 20,
},
hoverStayTime: {
type: Number,
value: 70,
},
hoverStopPropagation: {
type: Boolean,
value: false,
},
icon: {
type: null,
},
lang: {
type: String,
},
loading: {
type: Boolean,
value: false,
},
loadingProps: {
type: Object,
},
openType: {
type: String,
},
phoneNumberNoQuotaToast: {
type: Boolean,
value: true,
},
sendMessageImg: {
type: String,
value: '截图',
},
sendMessagePath: {
type: String,
value: '当前分享路径',
},
sendMessageTitle: {
type: String,
value: '当前标题',
},
sessionFrom: {
type: String,
value: '',
},
shape: {
type: String,
value: 'rectangle',
},
showMessageCard: {
type: Boolean,
value: false,
},
size: {
type: String,
value: 'medium',
},
style: {
type: String,
value: '',
},
tId: {
type: String,
value: '',
},
theme: {
type: String,
value: 'default',
},
type: {
type: String,
},
variant: {
type: String,
value: 'base',
},
};
export default props;

View File

@@ -0,0 +1,115 @@
import { LoadingProps } from '../loading/index';
export interface TdButtonProps {
appParameter?: {
type: StringConstructor;
value?: string;
};
block?: {
type: BooleanConstructor;
value?: boolean;
};
content?: {
type: StringConstructor;
value?: string;
};
customDataset?: {
type: null;
value?: null;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
ghost?: {
type: BooleanConstructor;
value?: boolean;
};
hoverClass?: {
type: StringConstructor;
value?: string;
};
hoverStartTime?: {
type: NumberConstructor;
value?: number;
};
hoverStayTime?: {
type: NumberConstructor;
value?: number;
};
hoverStopPropagation?: {
type: BooleanConstructor;
value?: boolean;
};
icon?: {
type: null;
value?: string | object;
};
lang?: {
type: StringConstructor;
value?: 'en' | 'zh_CN' | 'zh_TW';
};
loading?: {
type: BooleanConstructor;
value?: boolean;
};
loadingProps?: {
type: ObjectConstructor;
value?: LoadingProps;
};
openType?: {
type: StringConstructor;
value?: 'contact' | 'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'feedback' | 'chooseAvatar' | 'agreePrivacyAuthorization';
};
phoneNumberNoQuotaToast?: {
type: BooleanConstructor;
value?: boolean;
};
sendMessageImg?: {
type: StringConstructor;
value?: string;
};
sendMessagePath?: {
type: StringConstructor;
value?: string;
};
sendMessageTitle?: {
type: StringConstructor;
value?: string;
};
sessionFrom?: {
type: StringConstructor;
value?: string;
};
shape?: {
type: StringConstructor;
value?: 'rectangle' | 'square' | 'round' | 'circle';
};
showMessageCard?: {
type: BooleanConstructor;
value?: boolean;
};
size?: {
type: StringConstructor;
value?: 'extra-small' | 'small' | 'medium' | 'large';
};
style?: {
type: StringConstructor;
value?: string;
};
tId?: {
type: StringConstructor;
value?: string;
};
theme?: {
type: StringConstructor;
value?: 'default' | 'primary' | 'danger' | 'light';
};
type?: {
type: StringConstructor;
value?: 'submit' | 'reset';
};
variant?: {
type: StringConstructor;
value?: 'base' | 'outline' | 'dashed' | 'text';
};
}

View File

@@ -0,0 +1 @@
export {};

Some files were not shown because too many files have changed in this diff Show More