### Custom Indexes Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/indexes/README.md

Demonstrates a custom configuration for the Indexes component, allowing for specific index lists and custom styling. This example uses a predefined `indexList` and custom event handlers.

```javascript
Page({
  data: {
    list: [
      {
        index: 'A',
        title: 'A',
        children: [{ title: 'A1' }, { title: 'A2' }, { title: 'A3' }, { title: 'A4' }, { title: 'A5' }, { title: 'A6' }, { title: 'A7' }, { title: 'A8' }, { title: 'A9' }, { title: 'A10' }, { title: 'A11' }, { title: 'A12' }, { title: 'A13' }, { title: 'A14' }, { title: 'A15' }, { title: 'A16' }, { title: 'A17' }, { title: 'A18' }, { title: 'A19' }, { title: 'A20' }, { title: 'A21' }, { title: 'A22' }, { title: 'A23' }, { title: 'A24' }, { title: 'A25' }, { title: 'A26' }]
      },
      {
        index: 'B',
        title: 'B',
        children: [{ title: 'B1' }, { title: 'B2' }, { title: 'B3' }, { title: 'B4' }, { title: 'B5' }, { title: 'B6' }, { title: 'B7' }, { title: 'B8' }, { title: 'B9' }, { title: 'B10' }, { title: 'B11' }, { title: 'B12' }, { title: 'B13' }, { title: 'B14' }, { title: 'B15' }, { title: 'B16' }, { title: 'B17' }, { title: 'B18' }, { title: 'B19' }, { title: 'B20' }, { title: 'B21' }, { title: 'B22' }, { title: 'B23' }, { title: 'B24' }, { title: 'B25' }, { title: 'B26' }]
      },
      {
        index: 'C',
        title: 'C',
        children: [{ title: 'C1' }, { title: 'C2' }, { title: 'C3' }, { title: 'C4' }, { title: 'C5' }, { title: 'C6' }, { title: 'C7' }, { title: 'C8' }, { title: 'C9' }, { title: 'C10' }, { title: 'C11' }, { title: 'C12' }, { title: 'C13' }, { title: 'C14' }, { title: 'C15' }, { title: 'C16' }, { title: 'C17' }, { title: 'C18' }, { title: 'C19' }, { title: 'C20' }, { title: 'C21' }, { title: 'C22' }, { title: 'C23' }, { title: 'C24' }, { title: 'C25' }, { title: 'C26' }]
      }
    ],
    indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  },
  methods: {
    onChange(e) {
      console.log('change event:', e.detail.index);
    },
    onSelect(e) {
      console.log('select event:', e.detail.index);
    }
  }
});

```

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

### Basic Button Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Demonstrates the basic usage of the TDesign button component.

```wxml
<t-button>Basic Button</t-button>
```

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

### Button Size Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Illustrates different size options for the TDesign button.

```wxml
<t-button size="large">Large</t-button>
<t-button size="medium">Medium</t-button>
<t-button size="small">Small</t-button>
<t-button size="extra-small">Extra Small</t-button>
```

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

### Basic Countdown Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/count-down/README.md

This snippet demonstrates the basic usage of the CountDown component to display a countdown.

```wxml
<t-count-down time="{{time}}"></t-count-down>
```

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

### Basic Navbar Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/navbar/README.md

This snippet shows the basic usage of the Navbar component.

```json
{}

```

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

### Combination Button Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Example of combining multiple elements or styles within a button.

```wxml
<t-button icon="edit" shape="square">Edit</t-button>
```

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

### Basic Indexes Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/indexes/README.md

Demonstrates the basic usage of the Indexes component. Ensure the developer tool is open and follow the steps: npm i > build npm package > check 'Compile JS to ES5'.

```javascript
Page({
  data: {
    list: [
      {
        index: 'A',
        title: 'A',
        children: [
          { title: 'A1' },
          { title: 'A2' },
          { title: 'A3' },
          { title: 'A4' },
          { title: 'A5' },
          { title: 'A6' },
          { title: 'A7' },
          { title: 'A8' },
          { title: 'A9' },
          { title: 'A10' },
          { title: 'A11' },
          { title: 'A12' },
          { title: 'A13' },
          { title: 'A14' },
          { title: 'A15' },
          { title: 'A16' },
          { title: 'A17' },
          { title: 'A18' },
          { title: 'A19' },
          { title: 'A20' },
          { title: 'A21' },
          { title: 'A22' },
          { title: 'A23' },
          { title: 'A24' },
          { title: 'A25' },
          { title: 'A26' }
        ]
      },
      {
        index: 'B',
        title: 'B',
        children: [
          { title: 'B1' },
          { title: 'B2' },
          { title: 'B3' },
          { title: 'B4' },
          { title: 'B5' },
          { title: 'B6' },
          { title: 'B7' },
          { title: 'B8' },
          { title: 'B9' },
          { title: 'B10' },
          { title: 'B11' },
          { title: 'B12' },
          { title: 'B13' },
          { title: 'B14' },
          { title: 'B15' },
          { title: 'B16' },
          { title: 'B17' },
          { title: 'B18' },
          { title: 'B19' },
          { title: 'B20' },
          { title: 'B21' },
          { title: 'B22' },
          { title: 'B23' },
          { title: 'B24' },
          { title: 'B25' },
          { title: 'B26' }
        ]
      },
      {
        index: 'C',
        title: 'C',
        children: [
          { title: 'C1' },
          { title: 'C2' },
          { title: 'C3' },
          { title: 'C4' },
          { title: 'C5' },
          { title: 'C6' },
          { title: 'C7' },
          { title: 'C8' },
          { title: 'C9' },
          { title: 'C10' },
          { title: 'C11' },
          { title: 'C12' },
          { title: 'C13' },
          { title: 'C14' },
          { title: 'C15' },
          { title: 'C16' },
          { title: 'C17' },
          { title: 'C18' },
          { title: 'C19' },
          { title: 'C20' },
          { title: 'C21' },
          { title: 'C22' },
          { title: 'C23' },
          { title: 'C24' },
          { title: 'C25' },
          { title: 'C26' }
        ]
      }
    ]
  },
  methods: {
    onChange(e) {
      console.log('change event:', e.detail.index);
    },
    onSelect(e) {
      console.log('select event:', e.detail.index);
    }
  }
});

```

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

### Icon Button Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Shows how to use an icon within a TDesign button.

```wxml
<t-button icon="add">Add Item</t-button>
```

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

### Install Search Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/search/README.md

To use the Search component, you need to import it in your `app.json` for global use or in the `index.json` of a specific page/component for local use.

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

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

### Multi-Line Cell Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/cell/README.md

Shows how to use the Cell component to display multi-line content with a title and description.

```wxml
{{ multiple }}
```

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

### Install Navbar Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/navbar/README.md

To use the Navbar component, you need to import it in your global `app.json` or local `index.json` configuration file.

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

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

### Capsule Style Navbar Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/navbar/README.md

Shows how to implement a Navbar with a capsule-style left section, often used for back and home navigation.

```json
{{ back-home }}
```

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

### Block Button Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Demonstrates a block-level button that spans the full width.

```wxml
<t-button block>Block Button</t-button>
```

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

### Button Shape Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Demonstrates various shape options for the TDesign button.

```wxml
<t-button shape="rectangle">Rectangle</t-button>
<t-button shape="square">Square</t-button>
<t-button shape="round">Round</t-button>
<t-button shape="circle">Circle</t-button>
```

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

### Ghost Button Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Illustrates the ghost button style, which has a transparent background.

```wxml
<t-button ghost>Ghost Button</t-button>
```

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

### Button Theme Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Shows different theme colors available for the TDesign button.

```wxml
<t-button theme="primary">Primary</t-button>
<t-button theme="danger">Danger</t-button>
<t-button theme="light">Light</t-button>
<t-button theme="default">Default</t-button>
```

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

### Disabled Button Example

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Shows how to disable a button, making it unclickable.

```wxml
<t-button disabled>Disabled Button</t-button>
```

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

### Install Loading Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/loading/README.md

Configure the Loading component in your app.json for global use or in a specific page's index.json for local use.

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

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

### Install Toast Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/toast/README.md

To use the Toast component, you need to import it in your global or local configuration. Add the `t-toast` component to your `app.json` or `index.json`.

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

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

### Install Icon Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/icon/README.md

To use the Icon component, you need to import it in your page or component's JSON configuration file. This snippet shows the global import in `app.json`.

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

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

### Install Radio Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/radio/README.md

Import the Radio and Radio Group components globally in `app.json` or locally in the page's `index.json`.

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

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

### Install CountDown Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/count-down/README.md

To use the CountDown component, you need to add it to your app.json for global import or to your page/component's index.json for local import.

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

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

### Search Input Shape Customization

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/search/README.md

This example illustrates how to customize the shape of the search input component, choosing between square and round designs.

```json
{{ shape }}
```

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

### Basic Toast Usage

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/toast/README.md

Demonstrates the basic usage of the Toast component for simple prompts.

```wxml
<template>
  <t-toast />
</template>
```

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

### 全屏加载 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

设置 `fullscreen` 为 `true` 来展示全屏加载效果。

```wxml
<t-loading fullscreen />
```

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

### Global and Local Introduction

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/indexes/README.md

Configuration for using the TDesign Indexes and IndexesAnchor components in `app.json` for global import or `index.json` for local import.

```json
"usingComponents": {
  "t-indexes": "tdesign-miniprogram/indexes/indexes",
  "t-indexes-anchor": "tdesign-miniprogram/indexes-anchor/indexes-anchor"
}
```

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

### Toast with Different Themes

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/toast/README.md

Shows how to use the Toast component with different themes like 'loading', 'success', and 'error'.

```wxml
<template>
  <t-toast theme="loading" message="加载中" />
  <t-toast theme="success" message="操作成功" />
  <t-toast theme="error" message="操作失败" />
</template>
```

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

### Navbar with Image Display

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/navbar/README.md

Example of using an image within the Navbar component, potentially for branding or user avatars.

```json
{{ img }}
```

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

### 图标加文字（横向）Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

配置 `layout` 为 `horizontal` 来展示图标和文字横向排列的加载效果。

```wxml
<t-loading text="加载中..." layout="horizontal" />
```

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

### 图标加文字（竖向）Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

配置 `layout` 为 `vertical` 来展示图标和文字竖向排列的加载效果。

```wxml
<t-loading text="加载中..." layout="vertical" />
```

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

### 自定义加载文案 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

通过 `text` 插槽可以自定义加载提示文案的内容。

```wxml
<t-loading>
  <view slot="text">正在努力加载，请稍候...</view>
</t-loading>
```

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

### 暂停动画 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

设置 `pause` 为 `true` 可以暂停加载动画的播放。

```wxml
<t-loading pause />
```

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

### 自定义尺寸 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

通过 `size` 属性可以设置加载图标的尺寸，支持像素值。

```wxml
<t-loading size="40px" />
```

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

### Toast with Overlay

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/toast/README.md

Illustrates how to display a Toast with an overlay to prevent user interaction with the background content.

```wxml
<template>
  <t-toast message="带遮罩层" show-overlay />
</template>
```

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

### Install TDesign Tag Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/tag/README.md

To use the TDesign Tag component, you need to register it in your `app.json` for global use or in the `index.json` of a specific page/component for local use. This snippet shows the global registration in `app.json`.

```json
{
  "usingComponents": {
    "t-tag": "tdesign-miniprogram/tag/tag",
    "t-check-tag": "tdesign-miniprogram/check-tag/check-tag"
  }
}
```

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

### Global and Local Import

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/image/README.md

Configure the Image component in `app.json` for global import or in `index.json` for local import.

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

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

### 不同主题 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

通过 `theme` 属性可以切换不同的加载动画主题，如 `circular`（默认）、`spinner`、`dots`。

```wxml
<t-loading theme="spinner" />
```

```wxml
<t-loading theme="dots" />
```

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

### 基础吸顶

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/sticky/README.md

将内容包裹在 Sticky 组件内，实现基础的吸顶效果。

```wxml
<t-sticky>
  <view class="content">
    内容区域
  </view>
</t-sticky>
```

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

### 基础分割符

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/divider/README.md

Demonstrates the basic usage of the Divider component with text content.

```wxml
<t-divider content="基础分割符"></t-divider>
<t-divider content="基础分割符" align="left"></t-divider>
<t-divider content="基础分割符" align="right"></t-divider>
```

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

### 反向动画 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

设置 `reverse` 为 `true` 可以让加载动画反向播放。

```wxml
<t-loading reverse />
```

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

### Image Cropping Styles

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/image/README.md

Demonstrates different image cropping modes like scaleToFill, aspectFit, and aspectFill.

```wxml
<t-image src="{{url}}" mode="scaleToFill"></t-image>
<t-image src="{{url}}" mode="aspectFit"></t-image>
<t-image src="{{url}}" mode="aspectFill"></t-image>
<t-image src="{{url}}" mode="widthFix"></t-image>
<t-image src="{{url}}" mode="heightFix"></t-image>
<t-image src="{{url}}" mode="top"></t-image>
<t-image src="{{url}}" mode="bottom"></t-image>
<t-image src="{{url}}" mode="center"></t-image>
<t-image src="{{url}}" mode="left"></t-image>
<t-image src="{{url}}" mode="right"></t-image>
<t-image src="{{url}}" mode="top left"></t-image>
<t-image src="{{url}}" mode="top right"></t-image>
<t-image src="{{url}}" mode="bottom left"></t-image>
<t-image src="{{url}}" mode="bottom right"></t-image>
```

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

### 自定义加载速度 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

通过 `duration` 属性可以调整加载动画的执行时间，单位为毫秒。

```wxml
<t-loading duration="2000" />
```

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

### 手风琴模式折叠面板

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/collapse/README.md

配置 `expand-mutex` 属性为 `true`，实现手风琴效果，每次只展开一个面板。

```wxml
<t-collapse value="{{collapseVal}}" bind:change="onChange" expand-mutex="true">
  <t-collapse-panel header="面板标题一">
    这里是面板一的内容
  </t-collapse-panel>
  <t-collapse-panel header="面板标题二" value="panel-2">
    这里是面板二的内容
  </t-collapse-panel>
  <t-collapse-panel header="面板标题三" disabled>
    这里是面板三的内容
  </t-collapse-panel>
</t-collapse>
```

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

### Progress Bar with Transition

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/progress/README.md

This snippet demonstrates a Progress Bar with a transition effect.

```wxml
<t-progress percentage="{{transition}}" status="active"></t-progress>
```

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

### Basic Progress Bar

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/progress/README.md

This snippet shows the basic usage of the Progress Bar component.

```wxml
<t-progress percentage="30"></t-progress>
```

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

### 自定义状态 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

通过 `status` 属性可以自定义加载状态，例如 `loading`（默认）、`error`、`success` 等。

```wxml
<t-loading status="success" text="加载成功" />
```

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

### Import Switch Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/switch/README.md

Configure the Switch component in `app.json` for global import or in `index.json` for local import.

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

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

### 虚线分割符

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/divider/README.md

Shows how to use the `dashed` attribute to create a dashed Divider.

```wxml
<t-divider dashed content="虚线分割符"></t-divider>
<t-divider dashed content="虚线分割符" align="left"></t-divider>
<t-divider dashed content="虚线分割符" align="right"></t-divider>
```

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

### Search Input with Action Button

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/search/README.md

Demonstrates how to display a cancel button when the search input gains focus.

```json
{{ action }}
```

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

### 引入 Loading 组件

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

全局引入 Loading 组件到 app.json 或局部引入到页面的 index.json 中。

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

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

### 设置吸顶距离

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/sticky/README.md

通过 offset-top 属性设置吸顶时与顶部的距离，单位为 px。

```wxml
<t-sticky offset-top="50">
  <view class="content">
    内容区域，吸顶时距离顶部50px
  </view>
</t-sticky>
```

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

### Loading Component - Basic Icon

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/loading/README.md

Displays a basic loading indicator using the default icon.

```wxml
<t-loading />
```

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

### 自定义加载指示符 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

通过 `indicator` 插槽可以自定义加载指示符的内容。

```wxml
<t-loading>
  <view slot="indicator">加载中...</view>
</t-loading>
```

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

### 继承父元素颜色 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

设置 `inherit-color` 为 `true` 可以让加载指示符继承父元素的颜色。

```wxml
<view style="color: red;">
  <t-loading inherit-color />
</view>
```

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

### Image Cropping Styles

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/image/README.md

Demonstrates various cropping styles for the Image component.

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

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

### 胶囊型滑块示例

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/slider/README.md

通过 `theme` 属性设置为 `capsule` 来应用胶囊型滑块样式。

```wxml
{{ capsule }}
```

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

### Import Button Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/button/README.en-US.md

Configure the button component in `app.json` for global import or `index.json` for local import.

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

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

### Loading Component - Progress

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/loading/README.md

Displays the loading progress with a numerical value.

```wxml
<t-loading progress="50" />
```

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

### 加载失败 Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

通过设置 `status` 为 `error` 来展示加载失败的状态。

```wxml
<t-loading status="error" text="加载失败" />
```

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

### 卡片折叠面板

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/collapse/README.md

通过设置 `theme` 属性为 `card`，切换折叠面板的显示风格为卡片式。

```wxml
<t-collapse value="{{collapseVal}}" bind:change="onChange" theme="card">
  <t-collapse-panel header="面板标题一">
    这里是面板一的内容
  </t-collapse-panel>
  <t-collapse-panel header="面板标题二" value="panel-2">
    这里是面板二的内容
  </t-collapse-panel>
  <t-collapse-panel header="面板标题三" disabled>
    这里是面板三的内容
  </t-collapse-panel>
</t-collapse>
```

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

### 引入 Divider 组件

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/divider/README.md

Configure the Divider component in `app.json` for global import or `index.json` for local import.

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

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

### 带数值滑动选择器示例

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/slider/README.md

配置 `label` 属性以显示滑块当前值，支持自定义文案或百分比显示。

```wxml
{{ label }}
```

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

### 带操作说明的折叠面板

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/collapse/README.md

在折叠面板的头部右侧添加操作说明，例如按钮或链接。

```wxml
<t-collapse value="{{collapseVal}}" bind:change="onChange">
  <t-collapse-panel header="面板标题一" header-right-content="操作一">
    这里是面板一的内容
  </t-collapse-panel>
  <t-collapse-panel header="面板标题二" value="panel-2" header-right-content="操作二">
    这里是面板二的内容
  </t-collapse-panel>
  <t-collapse-panel header="面板标题三" header-right-content="操作三" disabled>
    这里是面板三的内容
  </t-collapse-panel>
</t-collapse>
```

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

### Loading API

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/loading/README.md

API documentation for the Loading component, detailing its props, external classes, and CSS variables.

```APIDOC
## Loading Props

| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| style | Object | - | Styles | N |
| custom-style | Object | - | Styles, generally used for scenarios where virtualized component nodes are enabled | N |
| delay | Number | 0 | The time to delay the display of the loading effect, used to prevent flickering caused by excessively fast requests, in milliseconds | N |
| duration | Number | 800 | The time for one execution of the loading animation, in milliseconds | N |
| fullscreen | Boolean | false | `1.8.5`. Whether to display as a full-screen loading | N |
| indicator | Boolean / Slot | true | Loading indicator. `true` displays the default indicator, `false` does not display it. Custom indicators can also be used. [Common type definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N |
| inherit-color | Boolean | false | Whether to inherit the parent element's color | N |
| layout | String | horizontal | Alignment. Options: horizontal/vertical | N |
| loading | Boolean | true | Whether in loading state | N |
| pause | Boolean | false | Whether to pause the animation | N |
| progress | Number | - | Loading progress | N |
| reverse | Boolean | - | Whether the loading animation is reversed | N |
| size | String | '20px' | Size, example: 20px | N |
| text | String / Slot | - | Loading prompt text. [Common type definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N |
| theme | String | circular | Loading component type. Options: circular/spinner/dots. Skyline mode does not support the enum value `circular` |

## Loading External Classes

| Class Name | Description |
|---|---|
| t-class | Root node style class |
| t-class-indicator | Indicator style class |
| t-class-text | Text style class |

## CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

| Name | Default Value | Description |
|---|---|---|
| --td-loading-color | @brand-color | - |
| --td-loading-text-color | inherit | - |
| --td-loading-text-font-size | 24rpx | - |
| --td-loading-text-line-height | 40rpx | - |
```

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

### Image Shape and Lazy Loading

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/image/README.md

Demonstrates different image shapes (circle, round, square) and enables lazy loading.

```wxml
<t-image src="{{url}}" shape="circle"></t-image>
<t-image src="{{url}}" shape="round"></t-image>
<t-image src="{{url}}" shape="square"></t-image>
<t-image src="{{url}}" lazy></t-image>
```

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

### 引入 Collapse 组件

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/collapse/README.md

全局引入在 app.json 配置，局部引入在页面或组件的 index.json 配置。

```json
"usingComponents": {
  "t-collapse": "tdesign-miniprogram/collapse/collapse",
  "t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel"
}
```

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

### 引入 Badge 组件

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/badge/README.md

全局引入在 app.json 配置，局部引入在页面或组件的 index.json 配置。

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

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

### 引入 Sticky 组件

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/sticky/README.md

全局引入 Sticky 组件到 app.json，或局部引入到页面的 index.json 中。

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

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

### 监听滚动事件

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/sticky/README.md

通过 scroll 事件监听滚动状态，获取滚动距离和吸顶状态。

```wxml
<t-sticky bind:scroll="onScroll">
  <view class="content">
    内容区域
  </view>
</t-sticky>
```

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

### 自定义内容分割符

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/divider/README.md

Demonstrates using slots to insert custom content within the Divider.

```wxml
<t-divider>
  <view>
    自定义内容
  </view>
</t-divider>
<t-divider layout="vertical">
  <view>
    自定义内容
  </view>
</t-divider>
```

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

### Loading Component - Dots Theme

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/loading/README.md

Uses the dots theme for the loading indicator.

```wxml
<t-loading theme="dots" />
```

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

### Navbar with Search Bar

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/navbar/README.md

Illustrates how to integrate a search bar within the Navbar component.

```json
{{ search }}
```

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

### 引入 TDesign Tabs 组件

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/tabs/README.md

在 `app.json` 或 `index.json` 中配置 `usingComponents` 来引入 `t-tabs` 和 `t-tab-panel` 组件。

```json
"usingComponents": {
  "t-tabs": "tdesign-miniprogram/tabs/tabs",
  "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel"
}
```

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

### Import Progress Component

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageChatTool/components/tdesign-miniprogram/progress/README.md

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

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

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

### 基础折叠面板

Source: https://github.com/wechat-miniprogram/miniprogram-demo/blob/master/miniprogram/packageAPI/components/tdesign-miniprogram/collapse/README.md

展示基础的折叠面板功能，点击标题可展开或收起内容。

```wxml
<t-collapse value="{{collapseVal}}" bind:change="onChange">
  <t-collapse-panel header="面板标题一">
    这里是面板一的内容
  </t-collapse-panel>
  <t-collapse-panel header="面板标题二" value="panel-2">
    这里是面板二的内容
  </t-collapse-panel>
  <t-collapse-panel header="面板标题三" disabled>
    这里是面板三的内容
  </t-collapse-panel>
</t-collapse>
```