TDesign

https://tdesign.tencent.com
Admin
TDesign is a comprehensive design system and component library by Tencent that provides design...
Tokens:942,464
Snippets:7,928
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Implement Guide Component without Overlay

Source: https://tdesign.tencent.com/miniprogram/components/guide

This example shows the WXML structure for a guide component and the corresponding JavaScript component configuration for defining guide steps.

```html
<view>
  <view class="main-title">
    <view class="title-major">用户引导标题</view>
    <view class="title-sub"> 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 </view>
  </view>
  <view class="field label-field">
    <t-input label="标签文字" layout="vertical" placeholder="请输入文字"></t-input>
  </view>
  <view class="field">
    <t-input label="标签文字" layout="vertical" placeholder="请输入文字"></t-input>
  </view>
  <view class="action">
    <t-button block theme="light" size="large">重置</t-button>
    <t-button block theme="primary" size="large">确定</t-button>
  </view>
</view>

<t-guide current="{{current}}" steps="{{steps}}" show-overlay="{{false}}" bind:skip="close" bind:finish="close" />

```

```javascript
Component({
  data: {
    current: -1,
    steps: [],
  },
  lifetimes: {
    attached() {
      this.setData({
        current: 0,
        steps: [
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.main-title')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            body: '用户引导的说明文案',
            placement: 'center',
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.label-field')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            body: '用户引导的说明文案',
            placement: 'bottom',
            highlightPadding: 0,
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.action')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            body: '用户引导的说明文案',
            placement: 'top-right',
          },
        ],
      });
    },
  },
  methods: {
    close() {
      this.triggerEvent('close');
    },
  },
});

```

--------------------------------

### Implement Guide Component

Source: https://tdesign.tencent.com/miniprogram/components/guide

A complete example showing the structure of a guide component with custom content slots and navigation buttons.

```xml
<view>
  <view class="main-title">
    <view class="title-major">用户引导标题</view>
    <view class="title-sub"> 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 </view>
  </view>
  <view class="field label-field">
    <t-input label="标签文字" layout="vertical" placeholder="请输入文字"></t-input>
  </view>
  <view class="field">
    <t-input label="标签文字" layout="vertical" placeholder="请输入文字"></t-input>
  </view>
  <view class="action">
    <t-button block theme="light" size="large">重置</t-button>
    <t-button block theme="primary" size="large">确定</t-button>
  </view>
</view>

<t-guide current="{{current}}" steps="{{steps}}" bind:skip="close" bind:finish="close">
  <view slot="content-0" class="content">
    <t-icon name="arrow-up" size="64rpx" color="#fff" class="icon" />
    <p class="text">1、自定义的图形或说明文案，用来解释或指导该功能使用。</p>
    <view class="footer">
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="light"
        content="跳过"
        size="extra-small"
        bindtap="skip"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="light"
        content="返回"
        size="extra-small"
        bindtap="back"
      ></t-button>
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="primary"
        content="下一步"
        size="extra-small"
        bindtap="next"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="primary"
        content="完成"
        size="extra-small"
        bindtap="finish"
      ></t-button>
    </view>
  </view>
  <view slot="content-1" class="content">
    <t-icon name="arrow-up" size="64rpx" color="#fff" class="icon" />
    <p class="text">2、自定义的图形或说明文案，用来解释或指导该功能使用。</p>
    <view class="footer">
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="light"
        content="跳过"
        size="extra-small"
        bindtap="skip"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="light"
        content="返回"
        size="extra-small"
        bindtap="back"
      ></t-button>
```

--------------------------------

### Thinking State Implementation

Source: https://tdesign.tencent.com/miniprogram-chat/components/chat-thinking?tab=api

Example setup for the component in a pending state, including WXML, JS logic, CSS, and component registration.

```html
<view class="chat-example-block">
  <t-chat-thinking
    content="{{content}}"
    layout="block"
    status="{{status}}"
    bind:collapsedChange="handleCollapsedChange"
  />
</view>
```

```javascript
Component({
  data: {
    animation: 'moving',
    content: {
      text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律',
      title: '思考中···',
    },
    status: 'pending',
  },
  methods: {
    handleCollapsedChange(e) {
      console.log('展开状态变化:', e.detail);
    },
  },
});
```

```css
.chat-example-block {
  background-color: var(--td-bg-color-container);
  padding: 32rpx;
}
```

```json
{
  "usingComponents": {
    "t-chat-thinking": "tdesign-miniprogram/chat-thinking/chat-thinking"
  }
}
```

--------------------------------

### Completed State Implementation

Source: https://tdesign.tencent.com/miniprogram-chat/components/chat-thinking?tab=api

Example setup for the component in a completed state, including WXML, JS logic, CSS, and component registration.

```html
<view class="chat-example-block">
  <t-chat-thinking
    content="{{content}}"
    layout="block"
    status="{{status}}"
    bind:collapsedChange="handleCollapsedChange"
  />
</view>
```

```javascript
Component({
  data: {
    animation: 'moving',
    status: 'complete',
    content: {
      text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说， 保持原来的运动状态。',
      title: '已深度思考(耗时19秒)',
    },
  },
  methods: {
    handleCollapsedChange(e) {
      console.log('展开状态变化:', e.detail);
    },
  },
});
```

```css
.chat-example-block {
  background-color: var(--td-bg-color-container);
  padding: 32rpx;
}
```

```json
{
  "usingComponents": {
    "t-chat-thinking": "tdesign-miniprogram/chat-thinking/chat-thinking",
    "t-radio": "tdesign-miniprogram/radio/radio",
    "t-radio-group": "tdesign-miniprogram/radio-group/radio-group"
  }
}
```

--------------------------------

### Guide 组件属性 (Props)

Source: https://tdesign.tencent.com/mobile-vue/components/guide

Guide 组件支持的配置属性，用于定义引导行为、样式及步骤内容。

```APIDOC
### Guide Props

- **backButtonProps** (Object) - Optional - 透传返回按钮的全部属性
- **counter** (Slot / Function) - Optional - 自定义渲染计数部分
- **current** (Number) - Optional - 当前步骤，支持 v-model
- **defaultCurrent** (Number) - Optional - 当前步骤的非受控属性
- **finishButtonProps** (Object) - Optional - 透传完成按钮的全部属性
- **hideCounter** (Boolean) - Optional - 是否隐藏计数，默认 false
- **hideSkip** (Boolean) - Optional - 是否隐藏跳过按钮，默认 false
- **highlightPadding** (Number) - Optional - 高亮框的内边距，默认 8
- **mode** (String) - Optional - 引导框类型，可选 popover/dialog，默认 popover
- **nextButtonProps** (Object) - Optional - 透传下一步按钮的全部属性
- **showOverlay** (Boolean) - Optional - 是否出现遮罩层，默认 true
- **skipButtonProps** (Object) - Optional - 透传跳过按钮的全部属性
- **steps** (Array) - Optional - 定义每个步骤的内容
- **zIndex** (Number) - Optional - 提示框层级，默认 999999
```

--------------------------------

### Bottom Placement Popover Example

Source: https://tdesign.tencent.com/miniprogram/components/popover

Demonstrates the initial setup for a bottom-left positioned popover.

```xml
<view class="popover-example-row">
  <view class="demo-block__header-desc">底部弹出气泡</view>
  <view class="row">
    <view class="popover-example__content">
      <t-popover
        placement="bottom-left"
        theme="dark"
        bind:visible-change="onVisibleChange"
        data-target="bottomLeft"
        visible="{{visible.bottomLeft}}"
      >
        <view slot="content">弹出气泡内容</view>
        <view class="popover-examp
```

--------------------------------

### Configure Guide Button Properties

Source: https://tdesign.tencent.com/miniprogram/components/guide

Examples of passing button properties to the Guide component via props.

```javascript
{ content: '返回', theme: 'default' }
```

```javascript
{ content: '完成', theme: 'primary' }
```

```javascript
{ content: '下一步', theme: 'primary' }
```

```javascript
{ content: '跳过', theme: 'default' }
```

--------------------------------

### Guide Component Configuration

Source: https://tdesign.tencent.com/miniprogram/components/guide

JSON configuration for registering the guide component and its dependencies.

```json
{
  "component": true,
  "usingComponents": {
    "t-guide": "tdesign-miniprogram/guide/guide",
    "t-input": "tdesign-miniprogram/input/input",
    "t-button": "tdesign-miniprogram/button/button",
    "t-image": "tdesign-miniprogram/image/image"
  }
}
```

--------------------------------

### Guide Component Configuration

Source: https://tdesign.tencent.com/miniprogram/components/guide

JSON configuration file to register the Guide component and its dependencies.

```json
{
  "component": true,
  "usingComponents": {
    "t-guide": "tdesign-miniprogram/guide/guide",
    "t-input": "tdesign-miniprogram/input/input",
    "t-button": "tdesign-miniprogram/button/button"
  }
}
```

--------------------------------

### Guide Component Logic

Source: https://tdesign.tencent.com/miniprogram/components/guide

Defines the component data and step-by-step guide configuration using selector queries.

```javascript
Component({
  data: {
    current: -1,
    steps: [],
  },
  lifetimes: {
    attached() {
      this.setData({
        current: 0,
        steps: [
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.main-title')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            body: '用户引导的说明文案',
            placement: 'center',
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.label-field')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            placement: 'bottom',
            mode: 'dialog',
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.action')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            body: '用户引导的说明文案',
            placement: 'bottom-right',
          },
        ],
      });
    },
  },
  methods: {
    close() {
      this.triggerEvent('close');
    },
  },
});
```

--------------------------------

### Base Setup for Auto-import

Source: https://tdesign.tencent.com/vue-next/getting-started

Initial setup for the application entry point when using auto-import plugins.

```javascript
import { createApp } from 'vue';
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';

const app = createApp(App);
```

--------------------------------

### Install Auto-import Plugins

Source: https://tdesign.tencent.com/vue-next/getting-started

Installs necessary plugins for automatic component and API importing.

```bash
npm install -D @tdesign-vue-next/auto-import-resolver unplugin-vue-components unplugin-auto-import
```

--------------------------------

### Guide Component API

Source: https://tdesign.tencent.com/miniprogram/components/guide

Configuration properties and event handlers for the Guide component.

```APIDOC
## Guide Props

| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| style | Object | - | 样式 | N |
| custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N |
| back-button-props | Object | - | 透传 返回按钮 的全部属性 | N |
| counter | String / Function | - | 用于自定义渲染计数部分 | N |
| current | Number | - | 当前步骤，即整个引导的进度 | N |
| default-current | Number | undefined | 当前步骤，即整个引导的进度。非受控属性 | N |
| finish-button-props | Object | - | 透传 完成按钮 的全部属性 | N |
| hide-back | Boolean | false | 是否隐藏返回按钮 | N |
| hide-counter | Boolean | false | 是否隐藏计数 | N |
| hide-skip | Boolean | false | 是否隐藏跳过按钮 | N |
| highlight-padding | Number | 16 | 高亮框的内边距，单位rpx | N |
| mode | String | popover | 引导框的类型。可选项：popover/dialog | N |
| next-button-props | Object | - | 透传 下一步按钮 的全部属性 | N |
| show-overlay | Boolean | true | 是否出现遮罩层 | N |
| skip-button-props | Object | - | 透传 跳过按钮 的全部属性 | N |
| steps | Array | - | 用于定义每个步骤的内容 | N |
| using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N |
| z-index | Number | 999999 | 提示框的层级 | N |

## Guide Events

| 名称 | 参数 | 描述 |
|---|---|---|
| back | (detail: { current: number, total: number }) | 点击返回按钮时触发 |
| change | (current: number, context?: { total: number }) | 当前步骤发生变化时触发 |
| finish | (detail: { current: number, total: number }) | 点击完成按钮时触发 |
| next-step-click | (detail: { next: number, current: number, total: number }) | 点击下一步时触发 |
| skip | (detail: { current: number, total: number }) | 点击跳过按钮时触发 |

## GuideStep Configuration

| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| element | Function | - | 必需。高亮的节点 | Y |
| placement | String | 'top' | 引导框相对于高亮元素出现的位置 | N |
```

--------------------------------

### Install via NPM

Source: https://tdesign.tencent.com/uniapp-chat/getting-started

Use the NPM package manager to install the chat component library.

```bash
npm i @tdesign/uniapp-chat
```

--------------------------------

### Nuxt 3 Installation

Source: https://tdesign.tencent.com/vue-next/getting-started

Commands to install the TDesign Nuxt module.

```bash
npx nuxi@latest module add tdesign-vue-next
# or
npm install tdesign-vue-next
npm install -D @tdesign-vue-next/nuxt
```

--------------------------------

### Guide Component Lifecycle and Logic

Source: https://tdesign.tencent.com/miniprogram/components/guide

Defines the component lifecycle and step configuration using createSelectorQuery to locate elements for the guide.

```javascript
Component({
  data: {
    current: -1,
    steps: [],
  },
  lifetimes: {
    attached() {
      this.setData({
        current: 0,
        steps: [
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.main-title')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            placement: 'center',
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.label-field')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            placement: 'bottom',
            highlightPadding: 0,
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.action')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            placement: 'bottom-right',
          },
        ],
      });
    },
  },
  methods: {
    close() {
      this.triggerEvent('close');
    },
  },
});
```

--------------------------------

### Guide Component Logic

Source: https://tdesign.tencent.com/miniprogram/components/guide

Defines the component lifecycle and step configuration, including selector queries to locate elements for the guide highlights.

```javascript
Component({
  data: {
    current: -1,
    steps: [],
  },
  lifetimes: {
    attached() {
      this.setData({
        current: 0,
        steps: [
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.main-title')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            body: '用户引导的说明文案',
            placement: 'center',
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.label-field')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            body: '用户引导的说明文案',
            placement: 'bottom',
            highlightPadding: 0,
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.action')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            title: '用户引导标题',
            // body: '用户引导的说明文案',
            placement: 'bottom-right',
          },
        ],
      });
    },
  },
  methods: {
    close() {
      this.triggerEvent('close');
    },
  },
});
```

--------------------------------

### Styling Guide Components

Source: https://tdesign.tencent.com/vue-next/components/guide

Since Guide uses Teleport, standard scoped styles may not apply. Use these methods to override styles.

```html
<style>
.test .t-radio-button__label {
  color: red;
}
</style>
```

```html
<style scoped>
.abc{
  color: red;
}
:global(.test .t-radio-button__label) {
  color: red;
}
</style>
```

--------------------------------

### Define Guide Step Offset

Source: https://tdesign.tencent.com/miniprogram/components/guide

Example of offset values for positioning the guide popover.

```javascript
[-10, 20]
```

```javascript
['10px', '8px']
```

```javascript
['20rpx', '16rpx']
```

--------------------------------

### Initialize TDesign Starter Project

Source: https://tdesign.tencent.com/react/quick-start

Install the CLI globally and run the initialization command to create a new project.

```bash
## 1、安装 tdesign-starter-cli
npm i tdesign-starter-cli@latest -g

## 2、创建项目
td-starter init
```

--------------------------------

### Define Guide Step Element

Source: https://tdesign.tencent.com/miniprogram/components/guide

Example of a function to retrieve the bounding client rectangle of a target element for a guide step.

```javascript
() => new Promise((resolve) => this.createSelectorQuery().select('#tdesign').boundingClientRect((rect) => resolve(rect)).exec())
```

--------------------------------

### Build and Preview Project

Source: https://tdesign.tencent.com/miniprogram/getting-started

Commands to install dependencies and compile components for local development preview.

```bash
# 安装项目依赖
npm install

# 执行组件编译
npm run dev
```

--------------------------------

### Guide Component API

Source: https://tdesign.tencent.com/uniapp/components/guide

The Guide component is used to create guided tours. It accepts a series of steps and provides events for navigation.

```APIDOC
## Guide Component

### Props
- **custom-style** (Object) - Optional - Custom component styles.
- **back-button-props** (Object) - Optional - Props for the back button.
- **counter** (String/Function) - Optional - Custom rendering for the counter.
- **current** (Number) - Optional - Current step index (v-model).
- **finish-button-props** (Object) - Optional - Props for the finish button.
- **hide-back** (Boolean) - Optional - Whether to hide the back button (default: false).
- **hide-counter** (Boolean) - Optional - Whether to hide the counter (default: false).
- **hide-skip** (Boolean) - Optional - Whether to hide the skip button (default: false).
- **highlight-padding** (Number) - Optional - Padding for the highlight box in rpx (default: 16).
- **mode** (String) - Optional - Guide mode: 'popover' or 'dialog' (default: 'popover').
- **next-button-props** (Object) - Optional - Props for the next button.
- **show-overlay** (Boolean) - Optional - Whether to show the overlay (default: true).
- **skip-button-props** (Object) - Optional - Props for the skip button.
- **steps** (Array<GuideStep>) - Optional - Definition of guide steps.
- **using-custom-navbar** (Boolean) - Optional - Whether a custom navbar is used (default: false).
- **z-index** (Number) - Optional - Z-index of the guide (default: 999999).

### Events
- **back** (context: { e: MouseEvent, current: number, total: number }) - Triggered when the back button is clicked.
- **change** (current: number, context?: { e: MouseEvent, total: number }) - Triggered when the current step changes.
- **finish** (context: { e: MouseEvent, current: number, total: number }) - Triggered when the finish button is clicked.
- **next-step-click** (context: { e: MouseEvent, next: number, current: number, total: number }) - Triggered when the next button is clicked.
- **skip** (context: { e: MouseEvent, current: number, total: number }) - Triggered when the skip button is clicked.
```

--------------------------------

### Guide 组件事件 (Events)

Source: https://tdesign.tencent.com/mobile-vue/components/guide

Guide 组件在用户交互过程中触发的事件回调。

```APIDOC
### Guide Events

- **back** (context: { e: MouseEvent, current: number, total: number }) - 点击返回按钮时触发
- **change** (current: number, context?: { e: MouseEvent, total: number }) - 当前步骤发生变化时触发
- **finish** (context: { e: MouseEvent, current: number, total: number }) - 点击完成按钮时触发
- **next-step-click** (context: { e: MouseEvent, next: number, current: number, total: number }) - 点击下一步时触发
- **skip** (context: { e: MouseEvent, current: number, total: number }) - 点击跳过按钮时触发
```

--------------------------------

### 安装脚手架工具

Source: https://tdesign.tencent.com/starter/docs/react/get-started

全局安装 tdesign-starter-cli 以便使用初始化命令。

```bash
npm i tdesign-starter-cli -g
```

--------------------------------

### Guide Events

Source: https://tdesign.tencent.com/vue/components/guide

Events emitted by the Guide component.

```APIDOC
## Guide Events

- **change** (current: number, context?: { e: MouseEvent, total: number }) - Triggered when the current step changes.
- **finish** (context: { e: MouseEvent, current: number, total: number }) - Triggered when the finish button is clicked.
- **next-step-click** (context: { e: MouseEvent, next: number, current: number, total: number }) - Triggered when the next button is clicked.
- **prev-step-click** (context: { e: MouseEvent, prev: number, current: number, total: number }) - Triggered when the previous button is clicked.
- **skip** (context: { e: MouseEvent, current: number, total: number }) - Triggered when the skip button is clicked.
```

--------------------------------

### Guide Component Props

Source: https://tdesign.tencent.com/mobile-react/components/guide

Configuration properties for the Guide component.

```APIDOC
## Guide Props

### Parameters
- **className** (String) - Optional - 类名
- **style** (Object) - Optional - 样式
- **backButtonProps** (Object) - Optional - 透传返回按钮属性
- **counter** (TElement) - Optional - 自定义渲染计数
- **current** (Number) - Optional - 当前步骤
- **defaultCurrent** (Number) - Optional - 初始步骤
- **finishButtonProps** (Object) - Optional - 透传完成按钮属性
- **hideCounter** (Boolean) - Optional - 是否隐藏计数
- **hideSkip** (Boolean) - Optional - 是否隐藏跳过按钮
- **highlightPadding** (Number) - Optional - 高亮框内边距
- **mode** (String) - Optional - 引导框类型 (popover/dialog)
- **nextButtonProps** (Object) - Optional - 透传下一步按钮属性
- **showOverlay** (Boolean) - Optional - 是否出现遮罩层
- **skipButtonProps** (Object) - Optional - 透传跳过按钮属性
- **steps** (Array) - Optional - 定义步骤内容
- **zIndex** (Number) - Optional - 提示框层级

### Events
- **onBack** (Function) - 点击返回按钮时触发
- **onChange** (Function) - 当前步骤发生变化时触发
- **onFinish** (Function) - 点击完成按钮时触发
- **onNextStepClick** (Function) - 点击下一步时触发
- **onSkip** (Function) - 点击跳过按钮时触发
```

--------------------------------

### 手动引入 Guide 组件

Source: https://tdesign.tencent.com/uniapp/components/guide

在非 easycom 模式下，可以通过手动导入的方式引入 Guide 组件。

```javascript
import TGuide from '@tdesign/uniapp/guide/guide.vue';
```

--------------------------------

### Setup for Next.js

Source: https://tdesign.tencent.com/react/getting-started

Use the lib directory for Next.js to avoid issues with automatic CSS imports in the es directory.

```javascript
'use client'

import { Button } from 'tdesign-react/lib/'; // 按需引入无样式组件代码
import 'tdesign-react/dist/tdesign.css'; // 全局引入所有组件样式代码
// 在 React19 使用，引入下面这行
import "tdesign-react/lib/_util/react-19-adapter";
```

```javascript
const nextConfig = {
  transpilePackages: ['tdesign-react'],
};

module.exports = nextConfig;
```

--------------------------------

### Install via CDN

Source: https://tdesign.tencent.com/mobile-vue/getting-started

Direct browser inclusion using unpkg links. Not recommended for production due to lack of tree-shaking and potential stability issues.

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.css" />
<script src="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.js"></script>
...
<script>
  Vue.createApp({}).use(TDesign).mount('#app');
</script>
```

--------------------------------

### File Type Implementation

Source: https://tdesign.tencent.com/miniprogram-chat/components/attachments?tab=api

Example showing how to render multiple attachments as a list.

```wxml
<view class="chat-example">
  <!-- 有效的示例，呈现效果为 单行滚动 -->
  <!-- <view class="chat-example-block">
    <t-attachments items="{{items}}" bind:fileClick="onFileClick" bind:remove="onRemove" bind:add="onAdd" />
  </view> -->

  <view class="chat-example-block" wx:for="{{items}}" wx:for-item="item" wx:key="url">
    <t-attachments items="{{[item]}}" bind:fileClick="onFileClick" bind:remove="onRemove" bind:add="onAdd" />
  </view>
</view>
```

--------------------------------

### Guide Component Styles

Source: https://tdesign.tencent.com/miniprogram/components/guide

CSS styles for the guide component layout and typography.

```css
.main-title {
  margin: 32rpx;
  display: inline-block;
}

.title-major {
  font-size: 48rpx;
  font-weight: 600;
  line-height: 72rpx;
}

.title-sub {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
  margin-top: 8rpx;
}

.action {
  margin: 63rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 63rpx;
}

.slot-body {
  margin-top: 8rpx;
  text-align: center;
  color: var(--td-text-color-secondary);
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
}

.slot-body .guide-demo-image {
  margin-top: 48rpx;
}
```

--------------------------------

### Implement Mixed Bubble and Pop-up Guide

Source: https://tdesign.tencent.com/miniprogram/components/guide

Use the t-guide component to display step-by-step user guidance with custom slots for content.

```xml
%3Cview%3E%0A%20%20%3Cview%20class%3D%22main-title%22%3E%0A%20%20%20%20%3Cview%20class%3D%22title-major%22%3E%E7%94%A8%E6%88%B7%E5%BC%95%E5%AF%BC%E6%A0%87%E9%A2%98%3C%2Fview%3E%0A%20%20%20%20%3Cview%20class%3D%22title-sub%22%3E%20%E6%8C%89%E9%92%AE%E7%94%A8%E4%BA%8E%E5%BC%80%E5%90%AF%E4%B8%80%E4%B8%AA%E9%97%AD%E7%8E%AF%E7%9A%84%E6%93%8D%E4%BD%9C%E4%BB%BB%E5%8A%A1%EF%BC%8C%E5%A6%82%E2%80%9C%E5%88%A0%E9%99%A4%E2%80%9D%E5%AF%B9%E8%B1%A1%E3%80%81%E2%80%9C%E8%B4%AD%E4%B9%B0%E2%80%9D%E5%95%86%E5%93%81%E7%AD%89%E3%80%82%20%3C%2Fview%3E%0A%20%20%3C%2Fview%3E%0A%20%20%3Cview%20class%3D%22field%20label-field%22%3E%0A%20%20%20%20%3Ct-input%20label%3D%22%E6%A0%87%E7%AD%BE%E6%96%87%E5%AD%97%22%20layout%3D%22vertical%22%20placeholder%3D%22%E8%AF%B7%E8%BE%93%E5%85%A5%E6%96%87%E5%AD%97%22%3E%3C%2Ft-input%3E%0A%20%20%3C%2Fview%3E%0A%20%20%3Cview%20class%3D%22field%22%3E%0A%20%20%20%20%3Ct-input%20label%3D%22%E6%A0%87%E7%AD%BE%E6%96%87%E5%AD%97%22%20layout%3D%22vertical%22%20placeholder%3D%22%E8%AF%B7%E8%BE%93%E5%85%A5%E6%96%87%E5%AD%97%22%3E%3C%2Ft-input%3E%0A%20%20%3C%2Fview%3E%0A%20%20%3Cview%20class%3D%22action%22%3E%0A%20%20%20%20%3Ct-button%20block%20theme%3D%22light%22%20size%3D%22large%22%3E%E9%87%8D%E7%BD%AE%3C%2Ft-button%3E%0A%20%20%20%20%3Ct-button%20block%20theme%3D%22primary%22%20size%3D%22large%22%3E%E7%A1%AE%E5%AE%9A%3C%2Ft-button%3E%0A%20%20%3C%2Fview%3E%0A%3C%2Fview%3E%0A%0A%3Ct-guide%20current%3D%22%7B%7Bcurrent%7D%7D%22%20steps%3D%22%7B%7Bsteps%7D%7D%22%20bind%3Askip%3D%22close%22%20bind%3Afinish%3D%22close%22%3E%0A%20%20%3Cview%20slot%3D%22body-1%22%20class%3D%22slot-body%22%3E%0A%20%20%20%20%3Cp%3E%E7%94%A8%E6%88%B7%E5%BC%95%E5%AF%BC%E7%9A%84%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%88%201%3C%2Fp%3E%0A%20%20%20%20%3Ct-image%0A%20%20%20%20%20%20class%3D%22guide-demo-image%22%0A%20%20%20%20%20%20src%3D%22https%3A%2F%2Ftdesign.gtimg.com%2Fdemo%2Fdemo-image-1.png%22%0A%20%20%20%20%20%20mode%3D%22scaleToFill%22%0A%20%20%20%20%20%20width%3D%22100%25%22%0A%20%20%20%20%3E%3C%2Ft-image%3E%0A%20%20%3C%2Fview%3E%0A%3C%2Ft-guide%3E%0A
```

--------------------------------

### Basic Grid Implementation

Source: https://tdesign.tencent.com/miniprogram/components/grid

Examples of grid layouts with varying column counts and item configurations.

```html
<t-grid class="block" column="{{5}}">
  <t-grid-item t-class-image="image" text="标题文字" image="{{img1}}" />
  <t-grid-item t-class-image="image" text="标题文字" image="{{img2}}" />
  <t-grid-item t-class-image="image" text="标题文字" image="{{img3}}" />
  <t-grid-item t-class-image="image" text="标题文字" image="{{img2}}" />
  <t-grid-item t-class-image="image" text="最多四字" image="{{img1}}" />
</t-grid>

<t-grid class="block">
  <t-grid-item t-class-image="image" text="标题文字" image="{{img1}}" />
  <t-grid-item t-class-image="image" text="标题文字" image="{{img2}}" />
  <t-grid-item t-class-image="image" text="标题文字" image="{{img3}}" />
  <t-grid-item t-class-image="image" text="最多五个字" image="{{img1}}" />
</t-grid>

<t-grid class="block" column="{{3}}">
  <t-grid-item t-class-image="image" text="标题文字" image="{{img1}}" />
  <t-grid-item t-class-image="image" text="标题文字" image="{{img2}}" />
  <t-grid-item t-class-image="image" text="最多六个文字" image="{{img3}}" />
</t-grid>
```

--------------------------------

### Implement Basic Popup

Source: https://tdesign.tencent.com/miniprogram/components/popup

Demonstrates a basic popup with multiple placement options and associated logic.

```wxml
<t-popup
  visible="{{visible}}"
  usingCustomNavbar
  bind:visible-change="onVisibleChange"
  placement="{{cur.value || 'top'}}"
>
  <view class="block block--{{cur.value}}">{{cur.text}}</view>
</t-popup>

<t-button
  wx:for="{{position}}"
  wx:key="index"
  block
  size="large"
  variant="outline"
  theme="primary"
  bind:tap="handlePopup"
  data-item="{{item}}"
  t-class="wrapper"
>
  {{item.text}}
</t-button>
```

```javascript
Component({
  data: {
    cur: {},
    position: [
      { value: 'top', text: '顶部弹出' },
      { value: 'left', text: '左侧弹出' },
      { value: 'center', text: '中间弹出' },
      { value: 'bottom', text: '底部弹出' },
      { value: 'right', text: '右侧弹出' },
    ],
  },
  methods: {
    handlePopup(e) {
      const { item } = e.currentTarget.dataset;

      this.setData(
        {
          cur: item,
        },
        () => {
          this.setData({ visible: true });
        },
      );
    },
    onVisibleChange(e) {
      this.setData({
        visible: e.detail.visible,
      });
    },
  },
});
```

```css
.block {
  color: var(--td-text-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.block--top,
.block--bottom {
  width: 100vw;
  height: 240px;
}

.block--left,
.block--right {
  width: 280px;
  height: 100%;
}

.block--center {
  width: 240px;
  height: 240px;
}

.wrapper {
  margin-bottom: 32rpx;
}

.wrapper:last-child {
  margin-bottom: 0;
}
```

```json
{
  "component": true,
  "usingComponents": {
    "t-popup": "tdesign-miniprogram/popup/popup",
    "t-button": "tdesign-miniprogram/button/button"
  }
}
```

--------------------------------

### Guide Component Styling

Source: https://tdesign.tencent.com/miniprogram/components/guide

CSS styles for the elements targeted by the guide component.

```css
.main-title {
  margin: 32rpx;
  display: inline-block;
}

.title-major {
  font-size: 48rpx;
  font-weight: 600;
  line-height: 72rpx;
}

.title-sub {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
  margin-top: 8rpx;
}

.action {
  margin: 64rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64rpx;
}

.slot-body {
  margin-top: 8rpx;
  text-align: left;
  color: var(--td-text-color-secondary);
  font-size: 28rpx;
  font-weight: 400;
  line-height: 44rpx;
}
```

--------------------------------

### Form Error Message Configuration Example

Source: https://tdesign.tencent.com/miniprogram/components/form

Example of the error-message object structure.

```typescript
{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }
```
Tokens:
Raw