## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-cell": "tdesign-miniprogram/cell/cell",
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
}
```
## 代码演示
在开发者工具中预览效果
### 类型 单行单元格Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
{{ base }}
多行单元格
{{ multiple }}
### 样式
卡片单元格
{{ theme }}
## API
### Cell Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
arrow | Boolean / Object | false | 是否显示右侧箭头 | N
bordered | Boolean | true | 是否显示下边框 | N
description | String / Slot | - | 下方内容描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
hover | Boolean | - | 是否开启点击反馈 | N
image | String / Slot | - | 主图。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N
left-icon | String / Object / Slot | - | 左侧图标，出现在单元格标题的左侧。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
note | String / Slot | - | 和标题同行的说明文字。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
required | Boolean | false | 是否显示表单必填星号 | N
right-icon | String / Object / Slot | - | 最右侧图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
title | String / Slot | - | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N
### Cell Events
名称 | 参数 | 描述
-- | -- | --
click | - | 右侧内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
### Cell External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-center | 中间（`title`, `description`）内容样式类
t-class-description | 下方描述内容样式类
t-class-hover | 悬停样式类
t-class-image | 图片样式类
t-class-left | 左侧内容样式类
t-class-left-icon | 左侧图标样式类
t-class-note | 右侧说明文字样式类
t-class-right | 右侧内容样式类
t-class-right-icon | 右侧图标样式类
t-class-title | 标题样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-cell-group-border-color | @component-stroke | -
--td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
--td-cell-group-title-color | @font-gray-3 | -
--td-cell-group-title-font-size | 28rpx | -
--td-cell-group-title-line-height | 90rpx | -
--td-cell-group-title-padding-left | 32rpx | -
--td-cell-bg-color | @bg-color-container | -
--td-cell-border-color | @component-stroke | -
--td-cell-border-width | 1px | -
--td-cell-border-left-space | @cell-horizontal-padding | -
--td-cell-border-right-space | 0 | -
--td-cell-description-color | @font-gray-2 | -
--td-cell-description-font-size | @font-size-base | -
--td-cell-description-line-height | 44rpx | -
--td-cell-height | auto | -
--td-cell-horizontal-padding | 32rpx | -
--td-cell-hover-color | @bg-color-secondarycontainer | -
--td-cell-image-height | 96rpx | -
--td-cell-image-width | 96rpx | -
--td-cell-left-icon-color | @brand-color | -
--td-cell-left-icon-font-size | 48rpx | -
--td-cell-line-height | 48rpx | -
--td-cell-note-color | @font-gray-3 | -
--td-cell-note-font-size | @font-size-m | -
--td-cell-required-color | @error-color-6 | -
--td-cell-required-font-size | @font-size-m | -
--td-cell-right-icon-color | @font-gray-3 | -
--td-cell-right-icon-font-size | 48rpx | -
--td-cell-title-color | @font-gray-1 | -
--td-cell-title-font-size | @font-size-m | -
--td-cell-vertical-padding | 32rpx | -
================================================
FILE: miniprogram/packageAPI/components/tdesign-miniprogram/cell/cell.d.ts
================================================
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class Cell extends SuperComponent {
externalClasses: string[];
relations: RelationsOptions;
options: {
multipleSlots: boolean;
};
properties: import("./type").TdCellProps;
data: {
prefix: string;
classPrefix: string;
isLastChild: boolean;
};
observers: {
leftIcon(v: any): void;
rightIcon(v: any): void;
arrow(v: any): void;
};
setIcon(name: any, value: any, defaultValue: any): void;
onClick(e: any): void;
jumpLink(urlKey?: string, link?: string): void;
}
================================================
FILE: miniprogram/packageAPI/components/tdesign-miniprogram/cell/cell.js
================================================
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}-cell`;
let Cell = class Cell extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-title`,
`${prefix}-class-description`,
`${prefix}-class-note`,
`${prefix}-class-hover`,
`${prefix}-class-image`,
`${prefix}-class-left`,
`${prefix}-class-left-icon`,
`${prefix}-class-center`,
`${prefix}-class-right`,
`${prefix}-class-right-icon`,
];
this.relations = {
'../cell-group/cell-group': {
type: 'parent',
},
};
this.options = {
multipleSlots: true,
};
this.properties = props;
this.data = {
prefix,
classPrefix: name,
isLastChild: false,
};
this.observers = {
leftIcon(v) {
this.setIcon('_leftIcon', v, '');
},
rightIcon(v) {
this.setIcon('_rightIcon', v, '');
},
arrow(v) {
this.setIcon('_arrow', v, 'chevron-right');
},
};
}
setIcon(name, value, defaultValue) {
this.setData({
[name]: calcIcon(value, defaultValue),
});
}
onClick(e) {
this.triggerEvent('click', e.detail);
this.jumpLink();
}
jumpLink(urlKey = 'url', link = 'jumpType') {
const url = this.data[urlKey];
const jumpType = this.data[link];
if (url) {
wx[jumpType]({ url });
}
}
};
Cell = __decorate([
wxComponent()
], Cell);
export default Cell;
================================================
FILE: miniprogram/packageAPI/components/tdesign-miniprogram/cell/cell.json
================================================
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-icon": "../icon/icon",
"t-image": "../image/image"
}
}
================================================
FILE: miniprogram/packageAPI/components/tdesign-miniprogram/cell/cell.wxml
================================================
### 组件类型 基础 {{ base }} 增加间距 {{ offset }} ## API ### Col Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N offset | String / Number | - | 列的偏移量（默认单位px） | N span | String / Number | - | 列的宽度（默认单位px） | N ### Row Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N gutter | String / Number | - | 列之间的间距（默认单位px） | N ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/col/col.d.ts ================================================ import { SuperComponent, RelationsOptions } from '../common/src/index'; export default class Col extends SuperComponent { externalClasses: string[]; properties: import("./type").TdColProps; data: { prefix: string; classPrefix: string; }; relations: RelationsOptions; } ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/col/col.js ================================================ 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'; const { prefix } = config; const name = `${prefix}-col`; let Col = class Col extends SuperComponent { constructor() { super(...arguments); this.externalClasses = [`${prefix}-class`]; this.properties = props; this.data = { prefix, classPrefix: name, }; this.relations = { '../row/row': { type: 'parent', }, }; } }; Col = __decorate([ wxComponent() ], Col); export default Col; ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/col/col.json ================================================ { "component": true, "styleIsolation": "apply-shared", "usingComponents": {} } ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/col/col.wxml ================================================Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
该组件于 0.7.3 版本上线，请留意版本。
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-collapse": "tdesign-miniprogram/collapse/collapse",
"t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel"
}
```
## 代码演示
在开发者工具中预览效果
### 类型 基础折叠面板 {{ base }} 带操作说明 {{ action }} 手风琴模式 {{ accordion }} ### 样式 卡片折叠面板 {{ theme }} ## API ### Collapse Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N default-expand-all | Boolean | false | 默认是否展开全部 | N disabled | Boolean | - | 是否禁用面板展开/收起操作 | N expand-icon | Boolean | true | 展开图标 | N expand-mutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N theme | String | default | 折叠面板风格。可选项：default/card | N value | Array | [] | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = ArrayTips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
finish | \- | \- ### CountDown External Classes className | Description -- | -- t-class | \- t-class-count | \- t-class-split | \- ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- --td-countdown-bg-color | @error-color-6 | - --td-countdown-default-color | @font-gray-1 | - --td-countdown-round-border-radius | @radius-circle | - --td-countdown-round-color | @font-white-1 | - --td-countdown-square-border-radius | @radius-small | - ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/count-down/README.md ================================================ --- title: CountDown 倒计时 description: 用于实时展示倒计时数值。 spline: data isComponent: true ---
> CountDown 组件用于实时展示倒计时数值。
如果需要与站点演示一致的数字字体效果，推荐您到 数字字体章节，将 TCloudNumber 字体下载并将包含的 TCloudNumberVF.ttf 做为 TCloudNumber 字体资源引入到具体项目中使用。
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-count-down": "tdesign-miniprogram/count-down/count-down"
}
```
## 代码演示
在开发者工具中预览效果
### 基础倒计时 {{ base }} ### 调整尺寸 {{ size }} ## API ### CountDown Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N auto-start | Boolean | true | 是否自动开始倒计时 | N content | String / Slot | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N millisecond | Boolean | false | 是否开启毫秒级渲染 | N size | String | 'medium' | `0.5.1`。倒计时尺寸。可选项：small/medium/large | N split-with-unit | Boolean | false | `0.5.1`。使用时间单位分割 | N theme | String | 'default' | `0.5.1`。倒计时风格。可选项：default/round/square | N time | Number | 0 | 必需。倒计时时长，单位毫秒 | Y ### CountDown Events 名称 | 参数 | 描述 -- | -- | -- change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
finish | \- | 倒计时结束时触发 ### CountDown External Classes 类名 | 描述 -- | -- t-class | 根节点样式类 t-class-count | 计数样式类 t-class-split | 分隔线样式类 ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-countdown-bg-color | @error-color-6 | - --td-countdown-default-color | @font-gray-1 | - --td-countdown-round-border-radius | @radius-circle | - --td-countdown-round-color | @font-white-1 | - --td-countdown-square-border-radius | @radius-small | - ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/count-down/count-down.d.ts ================================================ import { SuperComponent } from '../common/src/index'; export default class CountDown extends SuperComponent { externalClasses: string[]; properties: import("./type").TdCountDownProps; observers: { time(): void; }; data: { prefix: string; classPrefix: string; timeDataUnit: { DD: string; HH: string; mm: string; ss: string; SSS: string; }; timeData: import("./utils").TimeData; formattedTime: string; }; timeoutId: null | number; lifetimes: { detached(): void; }; methods: { start(): void; pause(): void; reset(): void; getTime(): number; updateTime(remain: number): void; doCount(): void; }; } ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/count-down/count-down.js ================================================ 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 { isSameSecond, parseFormat, parseTimeData, TimeDataUnit } from './utils'; const { prefix } = config; const name = `${prefix}-count-down`; let CountDown = class CountDown extends SuperComponent { constructor() { super(...arguments); this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-split`]; this.properties = props; this.observers = { time() { this.reset(); }, }; this.data = { prefix, classPrefix: name, timeDataUnit: TimeDataUnit, timeData: parseTimeData(0), formattedTime: '0', }; this.timeoutId = null; this.lifetimes = { detached() { if (this.timeoutId) { clearTimeout(this.timeoutId); this.timeoutId = null; } }, }; this.methods = { start() { if (this.counting) { return; } this.counting = true; this.endTime = Date.now() + this.remain; this.doCount(); }, pause() { this.counting = false; this.timeoutId && clearTimeout(this.timeoutId); }, reset() { this.pause(); this.remain = this.properties.time; this.updateTime(this.remain); if (this.properties.autoStart) { this.start(); } }, getTime() { return Math.max(this.endTime - Date.now(), 0); }, updateTime(remain) { const { format } = this.properties; this.remain = remain; const timeData = parseTimeData(remain); this.triggerEvent('change', timeData); const { timeText } = parseFormat(remain, format); const timeRange = format.split(':'); this.setData({ timeRange, timeData, formattedTime: timeText.replace(/:/g, ' : '), }); if (remain === 0) { this.pause(); this.triggerEvent('finish'); } }, doCount() { this.timeoutId = setTimeout(() => { const time = this.getTime(); if (this.properties.millisecond) { this.updateTime(time); } else if (!isSameSecond(time, this.remain) || time === 0) { this.updateTime(time); } if (time !== 0) { this.doCount(); } }, 33); }, }; } }; CountDown = __decorate([ wxComponent() ], CountDown); export default CountDown; ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/count-down/count-down.json ================================================ { "component": true, "styleIsolation": "apply-shared", "usingComponents": { "t-icon": "../icon/icon" } } ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/count-down/count-down.wxml ================================================
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon"
}
```
## 常见问题
控制台告警：Failed to load font 👇
告警属于开发者工具的 bug，可以忽略，具体可以看 官网文档
### 基础组件图标 {{ base }} ### 自定义组件图标 {{ custom }} 自定义图标用法，下面以 `iconfont` 为例 #### 准备图标文件 文件后缀应为`.wxss`，如下方代码块所示： ```css @font-face { font-family: 'icon'; // 使用自定义的字体名称 ··· } .icon { font-family: 'icon' !important; // 字体名称 ··· } .icon-a-0:before { // icon 图标。注意 FontClass 前缀与 font-family 保持一致 content: '\e64d'; } ``` - 添加所需图标，下载图标。图标库一般会提供 **在线链接** 或者 **下载至本地** 等使用方式。**在线链接** 方式会指向一个 `.css` 文件，可以下载或复制其内容，将其修改成后缀名为 `.wxss` 的文件 - 将 `.wxss` 文件中的 `FontClass/Symbol前缀` 与 `Font Family` 两项内容保持一致，如: `FontClass/Symbol` 前缀为 `icon-`，则 `Font Family` 为 `icon`。 > 注：若是采用 `下载至本地` 方式，需关注 `.css` 和 `.ttf` 文件。由于微信小程序不支持处理 `ttf、woff、eot` 等文件，但支持 `base64`，所以需要将 `.ttf` 文件转换为 `base64` (可借助转换工具，如 [transfonter.org](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容，最后将 `.css` 文件修改后缀为 `.wxss` #### 引入自定义图标 - 全局引入：在项目 `app.wxss`，使用 `@import` 引入上述的 `.wxss` 文件 - 局部引入：在 `page` 对应的 `.wxss` 中，使用 `@import` 引入上述的 `.wxss` 文件 #### 自定义图标的使用 `Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-image": "tdesign-miniprogram/image/image"
}
```
## 代码演示
在开发者工具中预览效果
### 裁切样式 {{ base }} ### 加载状态 {{ status }} ## 常见问题Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
本地图片无法正确引用? 👇
建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-loading": "tdesign-miniprogram/loading/loading"
}
```
## 代码演示
在开发者工具中预览效果
### 纯icon {{ base }} ### icon加文字横向 {{ horizontal }} ### icon加文字竖向 {{ vertical }} ### 纯文字 {{ text }} ### 加载失败 {{ error }} ### 状态 {{ status }} ### 加载速度 {{ duration }} ### 规格 {{ size }} ## API ### Loading Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N indicator | Boolean / Slot | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N inherit-color | Boolean | false | 是否继承父元素颜色 | N layout | String | horizontal | 对齐方式。可选项：horizontal/vertical | N loading | Boolean | true | 是否处于加载状态 | N pause | Boolean | false | 是否暂停动画 | N progress | Number | - | 加载进度 | N reverse | Boolean | - | 加载动画是否反向 | N size | String | '40rpx' | 尺寸，示例：40rpx/20px | N text | String / Slot | - | 加载提示文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N theme | String | circular | 加载组件类型。可选项：circular/spinner/dots，skyline 模式下暂不支持枚举值 circular | N ### Loading External Classes 类名 | 描述 -- | -- t-class | 根节点样式类 t-class-indicator | 指示符样式类 t-class-text | 文本样式类 ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-loading-color | @brand-color | - --td-loading-text-color | inherit | - --td-loading-text-font-size | 24rpx | - --td-loading-text-line-height | 40rpx | - ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/loading/index.d.ts ================================================ export * from './props'; export * from './type'; export * from './loading'; ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/loading/index.js ================================================ export * from './props'; export * from './type'; export * from './loading'; ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/loading/loading.d.ts ================================================ import { SuperComponent } from '../common/src/index'; import type { TdLoadingProps } from './type'; export interface LoadingProps extends TdLoadingProps { } export default class Loading extends SuperComponent { externalClasses: string[]; data: { prefix: string; classPrefix: string; show: boolean; }; options: { multipleSlots: boolean; }; properties: { delay?: { type: NumberConstructor; value?: number; }; duration?: { type: NumberConstructor; value?: number; }; externalClasses?: { type: ArrayConstructor; value?: ["t-class", "t-class-text", "t-class-indicator"]; }; indicator?: { type: BooleanConstructor; value?: boolean; }; inheritColor?: { type: BooleanConstructor; value?: boolean; }; layout?: { type: StringConstructor; value?: "horizontal" | "vertical"; }; loading?: { type: BooleanConstructor; value?: boolean; }; pause?: { type: BooleanConstructor; value?: boolean; }; progress?: { type: NumberConstructor; value?: number; }; reverse?: { type: BooleanConstructor; value?: boolean; }; size?: { type: StringConstructor; value?: string; }; text?: { type: StringConstructor; value?: string; }; theme?: { type: StringConstructor; value?: "circular" | "spinner" | "dots"; }; }; timer: any; observers: { loading(this: any, cur: any): void; }; lifetimes: { detached(): void; }; refreshPage(): void; } ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/loading/loading.js ================================================ 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'; const { prefix } = config; const name = `${prefix}-loading`; let Loading = class Loading extends SuperComponent { constructor() { super(...arguments); this.externalClasses = [`${prefix}-class`, `${prefix}-class-text`, `${prefix}-class-indicator`]; this.data = { prefix, classPrefix: name, show: true, }; this.options = { multipleSlots: true, }; this.properties = Object.assign({}, props); this.timer = null; this.observers = { loading(cur) { const { delay } = this.properties; if (this.timer) { clearTimeout(this.timer); } if (cur) { if (delay) { this.timer = setTimeout(() => { this.setData({ show: cur }); this.timer = null; }, delay); } else { this.setData({ show: cur }); } } else { this.setData({ show: cur }); } }, }; this.lifetimes = { detached() { clearTimeout(this.timer); }, }; } refreshPage() { this.triggerEvent('reload'); } }; Loading = __decorate([ wxComponent() ], Loading); export default Loading; ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/loading/loading.json ================================================ { "component": true, "styleIsolation": "apply-shared", "usingComponents": {} } ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/loading/loading.wxml ================================================Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-navbar": "tdesign-miniprogram/navbar/navbar",
}
```
## 代码演示
在开发者工具中预览效果
### 基础导航栏 {{ base }} ### 胶囊样式导航栏 {{ back-home }} ### 带搜索导航栏 {{ search }} ### 带图片导航栏 {{ img }} ### 组件样式 {{ left-title }} ### 自定义颜色 {{ custom-color }} ## API ### Navbar Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N animation | Boolean | true | 是否添加动画效果 | N capsule | Slot | - | 左侧胶囊区域。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N delta | Number | 1 | 后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack | N fixed | Boolean | true | 是否固定在顶部 | N left | Slot | - | `0.26.0`。左侧内容区域。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N left-arrow | Boolean | false | `0.26.0`。是否展示左侧箭头 | N title | String / Slot | - | 页面标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N title-max-length | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N visible | Boolean | true | 是否显示 | N ### Navbar Events 名称 | 参数 | 描述 -- | -- | -- complete | \- | navigateBack 执行完成后触发（失败或成功均会触发） fail | \- | navigateBack 执行失败后触发 go-back | \- | 点击左侧箭头时触发 success | \- | navigateBack 执行成功后触发 ### Navbar External Classes 类名 | 描述 -- | -- t-class | 根节点样式类 t-class-capsule | 左侧胶囊区域样式类 t-class-center | 中间内容样式类 t-class-home-icon | 首页图标样式类 t-class-left | 左侧内容样式类 t-class-left-icon | 左侧图标样式类 t-class-nav-btn | 导航按钮样式类 t-class-title | 标题样式类 ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-navbar-bg-color | @bg-color-container | - --td-navbar-capsule-border-color | #e3e6ea | - --td-navbar-capsule-border-radius | 32rpx | - --td-navbar-capsule-height | 64rpx | - --td-navbar-capsule-width | 176rpx | - --td-navbar-color | @font-gray-1 | - --td-navbar-height | 96rpx | - --td-navbar-left-arrow-size | 48rpx | - --td-navbar-title-font-size | 36rpx | - --td-navbar-title-font-weight | 600 | - ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/navbar/navbar.d.ts ================================================ import { SuperComponent } from '../common/src/index'; export default class Navbar extends SuperComponent { externalClasses: string[]; timer: any; options: { multipleSlots: boolean; }; properties: import("./type").TdNavbarProps; observers: { visible(this: Navbar, visible: any): void; 'title,titleMaxLength'(this: any): void; }; data: { prefix: string; classPrefix: string; boxStyle: string; showTitle: string; hideLeft: boolean; hideCenter: boolean; }; attached(): PromiseTips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-search": "tdesign-miniprogram/search/search"
}
```
## 代码演示
在开发者工具中预览效果
### 01 组件类型 基础搜索框 {{ base }} 获取焦点后显示取消按钮 {{ action }} ### 02 组件样式 搜索框形状 {{ shape }} ### 03 组件状态 默认状态其他对齐方式 {{ other }} ## API ### Search Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N action | String / Slot | '' | 自定义右侧操作按钮文字。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N center | Boolean | false | 是否居中 | N clearable | Boolean | true | 是否启用清除控件 | N confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N confirm-type | String | search | 设置键盘右下角按钮的文字，仅在type='text'时生效。Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
具体释义：
`send` 右下角按钮为“发送”；
`search` 右下角按钮为“搜索”；
`next` 右下角按钮为“下一个”；
`go` 右下角按钮为“前往”；
`done` 右下角按钮为“完成”。
[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N cursor | Number | - | 必需。指定 focus 时的光标位置 | Y cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N disabled | Boolean | false | 是否禁用 | N focus | Boolean | false | 是否聚焦 | N hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N label | String | '' | 已废弃。左侧文本 | N left-icon | String / Slot | 'search' | 左侧图标。如果需要使用 `Slot` 进行自定义，必须将该值设置为假值。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N placeholder | String | '' | 占位符 | N placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y result-list | Array | [] | 预览结果列表。TS 类型：`Array
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-tag": "tdesign-miniprogram/tag/tag",
"t-check-tag": "tdesign-miniprogram/check-tag/check-tag"
}
```
## 代码演示
在开发者工具中预览效果
### 组件类型 {{ type }} 可关闭的标签 {{ closable }} 可点击的标签 {{ checkable }} ### 组件状态 展示型标签 {{ theme }} ### 组件尺寸 {{ size }} ## API ### Tag Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N closable | Boolean / Object / Slot | false | 标签是否可关闭。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N icon | String / Object / Slot | - | 标签中的图标，可自定义图标呈现。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max-width | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N size | String | medium | 标签尺寸。可选项：small/medium/large/extra-large | N theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N ### Tag Events 名称 | 参数 | 描述 -- | -- | -- click | - | 点击时触发 close | - | 如果关闭按钮存在，点击关闭按钮时触发 ### Tag External Classes 类名 | 描述 -- | -- t-class | 根节点样式类 ### CheckTag Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N default-checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N closable | Boolean | false | 标签是否可关闭 | N content | String / Number / Array / Slot | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[]` | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N icon | String / Object / Slot | - | 标签图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N variant | String | dark | `0.26.0`。标签风格变体。可选项：dark/light/outline/light-outline | N ### CheckTag Events 名称 | 参数 | 描述 -- | -- | -- change | `(checked: boolean)` | 状态切换时触发 click | - | 点击标签时触发 close | \- | 如果关闭按钮存在，点击关闭按钮时触发 ### CheckTag External Classes 类名 | 描述 -- | -- t-class | 根节点样式类 ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-tag-close-icon-color | @font-gray-3 | - --td-tag-danger-color | @error-color | - --td-tag-danger-light-color | @error-color-1 | - --td-tag-default-color | @bg-color-component | - --td-tag-default-font-color | @font-gray-1 | - --td-tag-default-light-color | @bg-color-secondarycontainer | - --td-tag-disabled-background-color | @bg-color-component-disabled | - --td-tag-disabled-border-color | @component-border | - --td-tag-disabled-color | @font-gray-4 | - --td-tag-extra-large-font-size | @font-size-base | - --td-tag-extra-large-height | 80rpx | - --td-tag-extra-large-icon-size | 32rpx | - --td-tag-extra-large-padding | 32rpx - 1px | - --td-tag-large-font-size | @font-size-base | - --td-tag-large-height | 56rpx | - --td-tag-large-icon-size | 32rpx | - --td-tag-large-padding | 16rpx - 1px | - --td-tag-mark-border-radius | @tag-round-border-radius | - --td-tag-medium-font-size | @font-size-s | - --td-tag-medium-height | 48rpx | - --td-tag-medium-icon-size | 28rpx | - --td-tag-medium-padding | 16rpx - 1px | - --td-tag-outline-bg-color | @bg-color-container | - --td-tag-primary-color | @brand-color | - --td-tag-primary-light-color | @brand-color-light | - --td-tag-round-border-radius | 999px | - --td-tag-small-font-size | @font-size | - --td-tag-small-height | 40rpx | - --td-tag-small-icon-size | 24rpx | - --td-tag-small-padding | 12rpx - 1px | - --td-tag-square-border-radius | 8rpx | - --td-tag-success-color | @success-color | - --td-tag-success-light-color | @success-color-1 | - --td-tag-warning-color | @warning-color | - ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/tag/props.d.ts ================================================ import { TdTagProps } from './type'; declare const props: TdTagProps; export default props; ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/tag/props.js ================================================ const props = { closable: { type: null, value: false, }, disabled: { type: Boolean, value: false, }, externalClasses: { type: Array, }, icon: { type: null, }, maxWidth: { type: null, }, shape: { type: String, value: 'square', }, size: { type: String, value: 'medium', }, theme: { type: String, value: 'default', }, variant: { type: String, value: 'dark', }, }; export default props; ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/tag/tag.d.ts ================================================ ///Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-toast": "tdesign-miniprogram/toast/toast"
}
```
## 代码演示
在开发者工具中预览效果
### 基础提示 {{ base }} ### 组件状态 {{ theme }} ### 显示遮罩 {{ cover }} ### 手动关闭 {{ close }} ## API ### Toast Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N direction | String | row | 图标排列方式。可选项：row/column | N duration | Number | 2000 | 弹窗显示毫秒数 | N icon | String / Object / Slot | - | 自定义图标。传入对象则透传至 Icon 组件。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N message | String / Slot | - | 弹窗显示文字。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N overlay-props | Object | - | 遮罩层属性，透传至 Overlay。TS 类型：`OverlayProps `，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/toast/type.ts) | N placement | String | middle | 弹窗展示位置。可选项： top/middle/bottom | N prevent-scroll-through | Boolean | false | 防止滚动穿透，即不允许点击和滚动 | N show-overlay | Boolean | false | 是否显示遮罩层 | N theme | String | - | 提示类型。可选项：loading/success/error | N using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N ### Toast Events 名称 | 参数 | 描述 -- | -- | -- close | \- | 轻提示隐藏的时候触发 destroy | \- | 轻提示销毁的时候触发 ### Toast External Classes 类名 | 描述 -- | -- t-class | 根节点样式类 ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-toast-bg-color | @font-gray-2 | - --td-toast-color | @font-white-1 | - --td-toast-column-icon-size | 64rpx | - --td-toast-max-width | 374rpx | - --td-toast-radius | 8rpx | - --td-toast-row-icon-size | 48rpx | - ================================================ FILE: miniprogram/packageAPI/components/tdesign-miniprogram/toast/index.d.ts ================================================ ///Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
识别id: {{hintBox.markerId}}
上传图片后点击左侧按钮
将图片添加到 Marker 识别列表
点击左侧按钮上传图片（允许上传1-9张）
识别id: {{hintBox.markerId}}