TDesign MiniProgram

https://tdesign.tencent.com/miniprogram
Admin
TDesign MiniProgram is a comprehensive UI component library designed for building mini-program...
Tokens:321,284
Snippets:2,382
Trust Score:10
Update:4 months ago
Show doc for...
Tokens:
Raw
### Dialog Guide Example

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

Example of using the Guide component in dialog mode, with steps and body content.

```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}}" mode="dialog" bind:skip="close" bind:finish="close">
  <view slot="body-0" class="slot-body">
    <p>用户引导的说明文案 0</p>
    <t-image
      class="guide-demo-image"
      src="https://tdesign.gtimg.com/demo/demo-image-1.png"
      mode="scaleToFill"
      width="100%"
    ></t-image>
  </view>
  <view slot="body-1" class="slot-body">
    <p>用户引导的说明文案 1</p>
    <t-image
      class="guide-demo-image"
      src="https://tdesign.gtimg.com/demo/demo-image-1.png"
      mode="scaleToFill"
      width="100%"
    ></t-image>
  </view>
  <view slot="body-2" class="slot-body">
    <p>用户引导的说明文案 2</p>
    <t-image
      class="guide-demo-image"
      src="https://tdesign.gtimg.com/demo/demo-image-1.png"
      mode="scaleToFill"
      width="100%"
    ></t-image>
  </view>
</t-guide>
```

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

### Guide Component Example

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

This code snippet shows how to use the Guide component with mixed bubble and dialog prompts.

```vue
<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="body-1" class="slot-body">
    <p>用户的引导的说明文本 1</p>
    <t-image
      class="guide-demo-image"
      src="https://tdesign.gtimg.com/demo/demo-image-1.png"
      mode="scaleToFill"
      width="100%"
    ></t-image>
  </view>
</t-guide>
```

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

### Basic Button

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

Example of basic button usage.

```javascript
ose() {
    this.triggerEvent('close');
  },
},
}
```

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

### Popup Guide

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

Example of using the Guide component in a popup format, defining steps with elements, titles, and placements.

```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');
    },
  },
});

```

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

### Custom Bubble Example

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

This code snippet demonstrates how to create a custom bubble for the guide component, including navigation buttons and descriptive text.

```wxml
<t-guide>
  <view slot="content-1" class="content">
    <t-icon name="arrow-left" size="64rpx" color="#fff" class="icon" />
    <view class="footer">
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="light"
        content="Skip"
        size="extra-small"
        bindtap="skip"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="light"
        content="Back"
        size="extra-small"
        bindtap="back"
      ></t-button>
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="primary"
        content="Next Step"
        size="extra-small"
        bindtap="next"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="primary"
        content="Finish"
        size="extra-small"
        bindtap="finish"
      ></t-button>
    </view>
  </view>
  <view slot="content-2" class="content">
    <t-icon name="arrow-up" size="64rpx" color="#fff" class="icon" />
    <p class="text">3、自定义的图形或说明文案，用来解释或指导该功能使用。</p>
    <view class="footer">
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="light"
        content="Skip"
        size="extra-small"
        bindtap="skip"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="light"
        content="Back"
        size="extra-small"
        bindtap="back"
      ></t-button>
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="primary"
        content="Next Step"
        size="extra-small"
        bindtap="next"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="primary"
        content="Finish"
        size="extra-small"
        bindtap="finish"
      ></t-button>
    </view>
  </view>
</t-guide>
```

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

### Basic Button

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

Example of using the basic button component in a TDesign mini program.

```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}}" bind:skip="close" bind:finish="close">
  <view slot="body-2" class="slot-body">slot展示 用户引导的说明案例</view>
</t-guide>

```

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

### Component Configuration

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

Configuration for the guide component, including 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

This code snippet provides the JavaScript logic for the Guide component, including setting up steps and handling element selection for prompts.

```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',
          },
        ],
      });
    },
  },
});
```

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

### Guide Component Logic

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

This snippet shows the JavaScript logic for the Guide component, including its methods and event handling.

```javascript
%7B%0A%20%20%22component%22%3A%20true%2C%0A%20%20%22usingComponents%22%3A%20%7B%0A%20%20%20%20%22t-guide%22%3A%20%22tdesign-miniprogram%2Fguide%2Fguide%22%2C%0A%20%20%20%20%22t-input%22%3A%20%22tdesign-miniprogram%2Finput%2Finput%22%2C%0A%20%20%20%20%22t-button%22%3A%20%22tdesign-miniprogram%2Fbutton%22%2C%0A%20%20%20%20%22t-image%22%3A%20%22tdesign-miniprogram%2Fimage%2Fimage%22%0A%20%20%7D%0A%7D%0A
```

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

### Guide Component without Overlay

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

This code snippet demonstrates how to use the Guide component in a mini-program view, configured not to show an overlay. It includes basic view structure and the TDesign Guide component with properties like 'current', 'steps', 'show-overlay', and event bindings for 'skip' and 'finish'.

```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" />

```

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

### Guide Component Logic

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

This JavaScript code snippet defines the logic for the TDesign Guide component. It initializes the component's data, including the current step and an array of steps. The 'attached' lifecycle hook sets the initial step and defines the 'steps' array, where each step includes an 'element' selector (using a Promise to get boundingClientRect), 'title', 'body', 'placement', and 'highlightPadding'. It also includes a 'close' method to trigger a 'close' event.

```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');
    },
  },
});

```

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

### Custom Bubble Example

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

This code snippet demonstrates how to create a custom bubble for the Guide component, allowing for custom icons and explanatory text. It includes input fields for labels and buttons for actions like 'Reset' and 'Confirm'.

```vue
<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>
      <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>
</t-guide>
```

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

### Styles

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

CSS styles for 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;
}

```

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

### Guide Component Configuration

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

Configuration object for the Guide component, specifying its own component status and listing other dependent components like t-guide, t-input, and t-button.

```json
%7B%0A%20%20%22component%22%3A%20true%2C%0A%20%20%22usingComponents%22%3A%20%7B%0A%20%20%20%20%22t-guide%22%3A%20%22tdesign-miniprogram%2Fguide%2Fguide%22%2C%0A%20%20%20%20%22t-input%22%3A%20%22tdesign-miniprogram%2Finput%2Finput%22%2C%0A%20%20%20%20%22t-button%22%3A%20%22tdesign-miniprogram%2Fbutton%2Fbutton%22%0A%20%20%7D%0A%7D%0A
```

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

### Badge Examples

Source: https://tdesign.tencent.com/miniprogram/components/badge?tab=api

Examples demonstrating various badge shapes and placements.

```html
<!--
  Because button is wrapped by t-badge, t-badge has role="option", which causes button's role=button to lose its function. It is equivalent to button being declared role=presentation
  Therefore, aria-role=button is promoted to t-badge
  Can refer to: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
  https://www.zhangxinxu.com/wordpress/2017/01/voiceover-aria-web-accessible-iphone/
-->

<view class="demo-desc">圆角徽标</view>
<view class="demo-wrapper">
  <t-badge count="2" offset="{{ [2, -2] }}">
    <t-icon name="notification" size="48rpx" ariaLabel="通知" />
  </t-badge>
</view>

<view class="demo-desc">方形徽标</view>
<view class="demo-wrapper">
  <t-badge count="2" shape="square" offset="{{ [1, -2] }}">
    <t-icon name="notification" size="48rpx" ariaLabel="通知" />
  </t-badge>
</view>

<view class="demo-desc">气泡徽标</view>
<view class="demo-wrapper">
  <t-badge count="领积分" shape="bubble" ariaRole="button">
    <t-button icon="shop" ariaLabel="商店" shape="square" size="large" />
  </t-badge>
</view>

<view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
<t-cell title="单行标题" t-class="t-class-cell">
  <t-badge count="NEW" offset="{{ bskylineRender ? [-18rpx, -32rpx] : [0, 0] }}" shape="ribbon-left" slot="note" />
</t-cell>
<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
  <t-badge count="NEW" offset="{{ bskylineRender ? [-18rpx, -32rpx] : [0, 0] }}" shape="ribbon" slot="note" />
</t-cell>

<view class="demo-desc" style="margin-bottom: 32rpx">三角角标</view>
<t-cell title="单行标题" t-class="t-class-cell">
  <t-badge count="NEW" offset="{{ bskylineRender ? [-24rpx, -32rpx] : [0, 0] }}" shape="triangle-left" slot="note" />
</t-cell>
<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
  <t-badge count="NEW" offset="{{ bskylineRender ? [-24rpx, -32rpx] : [0, 0] }}" shape="triangle-right" slot="note" />
</t-cell>

```

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

### Basic Drawer Example

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

Example of a basic drawer with a button to open it. Includes template and component logic.

```html
<t-button variant="outline" bind:tap="openDrawerBase" block size="large" theme="primary">基础抽屉</t-button>

<t-drawer
  visible="{{visible}}"
  placement="{{placement}}"
  items="{{sidebar}}"
  usingCustomNavbar
  bind:overlay-click="overlayClick"
  bind:item-click="itemClick"
>
</t-drawer>

```

```javascript
import SkylineBehavior from '@behaviors/skyline.js';

Component({
  behaviors: [SkylineBehavior],
  data: {
    placement: 'left',
    sidebar: [],
    baseSidebar: [
      {
        title: '菜单一',
      },
      {
        title: '菜单二',
      },
      {
        title: '菜单三',
      },
      {
        title: '菜单四',
      },
      {
        title: '菜单五',
      },
      {
        title: '菜单六',
      },
      {
        title: '菜单七',
      },
      {
        title: '菜单八',
      },
    ],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    openDrawerBase() {
      this.setData({
        visible: true,
        sidebar: this.data.baseSidebar,
      });
    },

    itemClick(e) {
      console.log(e.detail);
    },

    overlayClick(e) {
      console.log(e.detail);
    },
  },
});

```

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

### Component Configuration

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

JSON configuration for the Guide component, specifying its dependencies on other TDesign components.

```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"
  }
}

```

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

### Custom Keys Example

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

Example demonstrating how to use custom keys for the Cascader component.

```html
<t-cell title="地址" note="{{note}}" bind:click="showCascader" arrow></t-cell>

<t-cascader
  class="demo"
  visible="{{visible}}"
  keys="{{keys}}"
  options="{{options}}"
  title="请选择地址"
  placeholder="未选中时的提示文案"
  bind:change="onChange">
</t-cascader>

```

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

### Global and Local Import

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

Configuration for global import in `app.json` or local import in `index.json` for pages or components.

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

```

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

### Guide Component Styles

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

This snippet contains the CSS styles for the Guide component, defining its layout and appearance.

```css
.main-title%20%7B%0A%20%20margin%3A%2032rpx%3B%0A%20%20display%3A%20inline-block%3B%0A%7D%0A%0A.title-major%20%7B%0A%20%20font-size%3A%2048rpx%3B%0A%20%20font-weight%3A%20600%3B%0A%20%20line-height%3A%2072rpx%3B%0A%7D%0A%0A.title-sub%20%7B%0A%20%20font-size%3A%2032rpx%3B%0A%20%20font-weight%3A%20400%3B%0A%20%20line-height%3A%2048rpx%3B%0A%20%20margin-top%3A%208rpx%3B%0A%7D%0A%0A.action%20%7B%0A%20%20margin%3A%2063rpx%3B%0A%20%20display%3A%20grid%3B%0A%20%20grid-template-columns%3A%20repeat(2%2C%201fr)%3B%0A%20%20gap%3A%2063rpx%3B%0A%7D%0A%0A.slot-body%20%7B%0A%20%20margin-top%3A%208rpx%3B%0A%20%20text-align%3A%20center%3B%0A%20%20color%3A%20var(--td-text-color-secondary)%3B%0A%20%20font-size%3A%2032rpx%3B%0A%20%20font-weight%3A%20400%3B%0A%20%20line-height%3A%2048rpx%3B%0A%7D%0A%0A.slot-body%20.guide-demo-image%20%7B%0A%20%20margin-top%3A%2048rpx%3B%0A%7D%0A
```

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

### Global Import

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

Global import configuration in app.json.

```json
"usingComponents": {
  "t-steps": "tdesign-miniprogram/steps/steps",
  "t-step-item": "tdesign-miniprogram/step-item/step-item",
}

```

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

### Guide Component Styles

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

CSS styles for the Guide component, including main title, action buttons, and slot body.

```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: 64r px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64rpx;
}

.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;
}

```

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

### 纯文字

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

在开发者工具中预览效果

```wxml
<t-loading indicator="{{false}}" text="加载中..."></t-loading>

```

```javascript
Component({})

```

```json
{
  "components": true,
  "usingComponents": {
    "t-loading": "tdesign-miniprogram/loading/loading"
  }
}

```

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

### Guide Component Logic

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

JavaScript logic for the TDesign guide component, including setting up steps and handling component lifecycle.

```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: {
    cl
```

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

### Notice bar with entry

Source: https://tdesign.tencent.com/miniprogram/components/notice-bar

This example demonstrates a notice bar with a clickable entry point.

```vue
<t-notice-bar visible="{{visible}}" suffixIcon="chevron-right" bind:click="click">
  <view slot="content" class="inline"> 这是一条普通的通知信息 </view>
  <t-link slot="operation" content="详情" theme="primary" underline="{{false}}" navigator-props="{{navigatorProps}}" />
</t-notice-bar>

<t-notice-bar
  visible="{{visible}}"
  suffixIcon="chevron-right"
  content="这是一条普通的通知信息"
  bind:click="click">
</t-notice-bar>

```

```javascript
Component({
  data: {
    visible: true,
    navigatorProps: {
      url: '/pages/xxx/xxx',
    },
  },

  methods: {
    click(e) {
      const { trigger } = e.detail;
      console.log(`click on the ${trigger} area`);
    },
  },
})

```

```css
.inline {
  display: inline;
}

```

```json
{
  "component": true,
  "usingComponents": {
    "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar",
    "t-link": "tdesign-miniprogram/link/link"
  }
}

```

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

### 引入组件

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

Import the component in `app.json` or `page.json`.

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

```

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

### Guide Component Styling

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

CSS styles for the Guide component, defining margins, display properties, font sizes, weights, line heights, and grid layouts for actions.

```css
.main-title%20%7B%0A%20%20margin%3A%2032rpx%3B%0A%20%20display%3A%20inline-block%3B%0A%7D%0A%0A.title-major%20%7B%0A%20%20font-size%3A%2048rpx%3B%0A%20%20font-weight%3A%20600%3B%0A%20%20line-height%3A%2072rpx%3B%0A%7D%0A%0A.title-sub%20%7B%0A%20%20font-size%3A%2032rpx%3B%0A%20%20font-weight%3A%20400%3B%0A%20%20line-height%3A%2048rpx%3B%0A%20%20margin-top%3A%208rpx%3B%0A%7D%0A%0A.action%20%7B%0A%20%20margin%3A%2064rpx%3B%0A%20%20display%3A%20grid%3B%0A%20%20grid-template-columns%3A%20repeat(2%2C%201fr)%3B%0A%20%20gap%3A%2064rpx%3B%0A%7D%0A
```

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

### Component Configuration

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

This JSON snippet configures the component, specifying it as a custom component and listing its dependencies.

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

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

### Install tdesign-miniprogram

Source: https://tdesign.tencent.com/miniprogram-chat

Install tdesign-miniprogram using npm.

```bash
npm i tdesign-miniprogram -S --production

```

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

### Cascader Example

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

Example of using the Cascader component to select an address.

```html
<t-cell title="
          地址
        " note="{{note}}" bind:click="showCascader" arrow />

<t-cascader
  close-btn="{{false}}"
  check-strictly="{{true}}"
  visible="{{visible}}"
  value="{{value}}"
  options="{{options}}"
  title="请选择地址"
  bind:change="onChange"
  bind:pick="onPick">
  <text class="confirm-btn" slot="close-btn">确定</text>
</t-cascader>
```

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

### 引入

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

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

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

```

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

### Component Type: Underline Text Link

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

Underline text link example.

```html
<view class="link-example">
  <t-link size="small" theme="primary" content="跳转链接" underline hover />
  <t-link size="small" content="跳转链接" underline hover />
</view>

```

```javascript
Component({})

```

```css
.link-example {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 96rpx;
  background-color: var(--bg-color-demo);
}

```

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

```

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

### 引入

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

Global import configuration in app.json or local import in page/component index.json.

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

```

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

### Address Data Example

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

This JavaScript code provides an example of the data structure for address options in the Cascader component.

```javascript
const data = {
  areaList: [
    {
      label: '北京市',
      value: '110000',
      children: [
        {
          value: '110100',
          label: '北京市',
          children: [
            { value: '110101', label: '东城区' },
            { value: '110102', label: '西城区' },
            { value: '110105', label: '朝阳区' },
            { value: '110106', label: '丰台区' },
            { value: '110107', label: '石景山区' },
            { value: '110108', label: '海淀区' },
            { value: '110109', label: '门头沟区' },
            { value: '110111', label: '房山区' },
            { value: '110112', label: '通州区' },
            { value: '110113', label: '顺义区' },
            { value: '110114', label: '昌平区' },
            { value: '110115', label: '大兴区' },
            { value: '110116', label: '怀柔区' },
            { value: '110117', label: '平谷区' },
            { value: '110118', label: '密云区' },
            { value: '110119', label: '延庆区' }
          ]
        }
      ]
    },
    {
      label: '天津市',
      value: '120000',
      children: [
        {
          value: '120100',
          label: '天津市',
          children: [
            { value: '120101', label: '和平区' },
            { value: '120102', label: '河东区' },
            { value: '120103', label: '河西区' },
            { value: '120104', label: '南开区' },
            { value: '120105', label: '河北区' },
            { value: '120106', label: '红桥区' },
            { value: '120110', label: '东丽区' },
            { value: '120111', label: '西青区' },
            { value: '120112', label: '津南区' },
            { value: '120113', label: '北辰区' },
            { value: '120114', label: '武清区' },
            { value: '120115', label: '宝坻区' },
            { value: '120116', label: '滨海新区' },
            { value: '120117', label: '宁河区' }
```

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

### Chat Example Styles

Source: https://tdesign.tencent.com/miniprogram/components/config-provider

Basic CSS styling for the chat example block, setting background color and padding.

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

```

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

### Basic Form Example

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

Demonstrates the basic structure and data binding for a form.

```javascript
{
  data: {
    formData: {
      name: '',
      password: '',
      description: 0,
      gender: '',
      birth: '',
      place: '',
      resume: ''
    },
    rules: {
      name: [
        { pattern: '[a-zA-Z]{8}', validator: (val) => val.length === 8, message: '只能输入8个英文字符' },
      ],
      password: [{ validator: (val) => val.length > 6, message: '长度大于6个字符' }],
      description: [{ validator: (val) => val > 3, message: '分数过低会影响整体评价' }],
      gender: [{ validator: (val) => val !== '', message: '不能为空' }],
      birth: [{ validator: (val) => val !== '', message: '不能为空' }],
      place: [{ validator: (val) => val !== '', message: '不能为空' }],
      resume: [{ validator: (val) => val !== '', message: '不能为空' }]
    }
  },
  lifetimes: {
    attached() {
      this.setData({
        'rules.name': [
          { pattern: '[a-zA-Z]{8}', validator: (val) => val.length === 8, message: '只能输入8个英文字符' },
        ],
        'rules.password': [{ validator: (val) => val.length > 6, message: '长度大于6个字符' }],
        'rules.description': [{ validator: (val) => val > 3, message: '分数过低会影响整体评价' }],
        'rules.gender': [{ validator: (val) => val !== '', message: '不能为空' }],
        'rules.birth': [{ validator: (val) => val !== '', message: '不能为空' }],
        'rules.place': [{ validator: (val) => val !== '', message: '不能为空' }],
        'rules.resume': [{ validator: (val) => val !== '', message: '不能为空' }]
      });
    }
  },
  methods: {
    onReset(e) {
      this.setData({
        formData: e.detail.formData,
      });
    },
    onSubmit(e) {
      console.log('==onSumbit', e);
    },
    submit() {
      const form = this.selectComponent('#form');
      form.submit();
    },
    reset() {
      const form = this.selectComponent('#form');
      form.reset();
    },
    onInputChange(e) {
      const { field } = e.currentTarget.dataset;
      this.setData({
        [`formData.${field}`]: e.detail.value,
      });
    },
    onRadioChange(e) {
      this.setData({
        'formData.gender': e.detail.value,
      });
    },
    onRateChange(e) {
      this.setData({
        'formData.description': e.detail.value,
      });
    },
    onTextareaChange(e) {
      this.setData({
        'formData.resume': e.detail.value,
      });
    }
  }
}
```

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

### Custom Bubble

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

This code snippet defines the data, lifetimes, and methods for a custom bubble component, likely used for guiding users through a process.

```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(),
              ),
            placement: 'center',
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.label-field')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            placement: 'bottom',
            highlightPadding: 0,
          },
          {
            element: () =>
              new Promise((resolve) =>
                this.createSelectorQuery()
                  .select('.action')
                  .boundingClientRect((rect) => resolve(rect))
                  .exec(),
              ),
            placement: 'bottom-right',
          },
        ],
      });
    },
  },
  methods: {
    close() {
      this.triggerEvent('close');
    },
    skip() {
      this.setData({ current: -1 });
      this.close();
    },
    back() {
      this.setData({ current: 0 });
    },
    next() {
      this.setData({ current: this.data.current + 1 });
    },
    finish() {
      this.setData({ current: -1 });
      this.close();
    },
  },
});
```

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

### Global Import

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

Global import configuration in app.json.

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

```
Tokens:
Raw