### Install TDesign UniApp Chat via NPM

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

Command to install the TDesign UniApp Chat component library package using the NPM package manager.

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

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

### Implement Chat List Component

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

Example of how to import and use the TChatList component within a Vue 3 script setup block.

```vue
<template>
  <t-chat-list />
</template>

<script lang="ts" setup>
import TChatList from '@tdesign/uniapp-chat/chat-list/chat-list.vue';
</script>
```

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

### Define FormItem Validation Rules

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

Examples of how to define various validation rules for FormItem, including built-in types like email, length constraints, and custom validator functions.

```javascript
// Email validation
{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }

// Length validation
{ len: 10, message: '内容长度不对' }

// Custom validator
{ validator: (val) => val.length > 0, message: '请输入内容' }

// Pattern validation
{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }
```

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

### 引入 TabBar 组件

Source: https://tdesign.tencent.com/uniapp/components/tab-bar

在 UniApp 项目中引入 TTabBar 和 TTabBarItem 组件。可以在 main.ts 全局引入或在特定页面/组件中按需引入。

```typescript
import TTabBar from '@tdesign/uniapp/tab-bar/tab-bar.vue';
import TTabBarItem from '@tdesign/uniapp/tab-bar-item/tab-bar-item.vue';
```

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

### TabBarItem Component API

Source: https://tdesign.tencent.com/uniapp/components/tab-bar

Configuration for individual items within the TabBar component.

```APIDOC
## Component: TabBarItem

### Description
Represents an individual navigation item within the TabBar.

### Props
- **custom-style** (Object) - Optional - Custom styles
- **badge-props** (Object) - Optional - Badge configuration for notifications
- **icon** (String/Object) - Optional - Icon name or object
- **sub-tab-bar** (Array) - Optional - Array of sub-menu items
- **value** (String/Number) - Optional - Unique identifier for the item

### Slots
- **icon**: Custom slot for icon area content
```

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

### 引入 Toast 组件

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

在 UniApp 项目中引入 TDesign Toast 组件。可以在 main.ts 全局引入，也可以在特定页面或组件中按需引入。

```vue
import TToast from '@tdesign/uniapp/toast/toast.vue';
```

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

### Import Global Styles for TDesign UniApp

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

Instructions for importing CSS or LESS theme files into main.ts. Supports both CLI and HBuilderX project structures.

```typescript
// CLI 模式
import '@tdesign/uniapp/common/style/theme/index.css';

// HBuilderX 模式
// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.css';
```

```typescript
// CLI 模式
import '@tdesign/uniapp/common/style/theme/index.less';

// HBuilderX 模式
// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.less';
```

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

### TabBar Component API

Source: https://tdesign.tencent.com/uniapp/components/tab-bar

Configuration and properties for the main TabBar container component.

```APIDOC
## Component: TabBar

### Description
The TabBar component is used for bottom navigation, allowing users to switch between main application modules.

### Props
- **custom-style** (Object) - Optional - Custom component styles
- **bordered** (Boolean) - Optional - Whether to show outer border (default: true)
- **fixed** (Boolean) - Optional - Whether to fix at the bottom (default: true)
- **placeholder** (Boolean) - Optional - Enable placeholder when fixed (default: false)
- **safe-area-inset-bottom** (Boolean) - Optional - Enable bottom safe area adaptation (default: true)
- **shape** (String) - Optional - Shape of the bar: 'normal' | 'round' (default: 'normal')
- **split** (Boolean) - Optional - Whether to show split line (default: true)
- **theme** (String) - Optional - Style theme: 'normal' | 'tag' (default: 'normal')
- **value** (String/Number/Array) - Optional - Current selected index/value (supports v-model)
- **z-index** (Number) - Optional - Component z-index (default: 1)

### External Classes
- **t-class**: Root node style class
```

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

### 引入 TDesign Drawer 组件 (Vue/Vue SFC)

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

在 `main.ts` 或需要使用的页面/组件中引入 TDesign 的 Drawer 组件。此代码片段展示了如何在 Vue 项目中导入 Drawer 组件，为后续使用做准备。

```typescript
import TDrawer from '@tdesign/uniapp/drawer/drawer.vue';
```

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

### 引入 TDesign Fab 组件 (TypeScript)

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

在 `main.ts` 或需要使用该组件的页面/组件中引入 TDesign Fab 组件。此代码片段展示了如何在 TypeScript 环境中导入组件。

```typescript
import TFab from '@tdesign/uniapp/fab/fab.vue';
```

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

### Import TDesign Overlay Component

Source: https://tdesign.tencent.com/uniapp/components/overlay?tab=api

Demonstrates how to import the Overlay component into a UniApp project. It can be imported globally in main.ts or locally within specific pages or components.

```typescript
import TOverlay from '@tdesign/uniapp/overlay/overlay.vue';
```

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

### Import TSticky Component in Uniapp

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

Demonstrates how to import the TSticky component into your Uniapp project. This import can be done globally in `main.ts` or locally within specific pages or components.

```typescript
import TSticky from '@tdesign/uniapp/sticky/sticky.vue';
```

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

### Configure TypeScript Editor Support

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

Configuration for tsconfig.json to enable IDE autocompletion and type checking for TDesign UniApp Chat components.

```json
{
  "compilerOptions": {
    "types": [
      "@tdesign/uniapp-chat/global"
    ]
  }
}
```

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

### 使用 custom-style 属性覆盖组件样式

Source: https://tdesign.tencent.com/uniapp/custom-style

TDesign 组件支持 custom-style 属性，可直接传入 CSS 字符串应用于组件根元素。在开启 virtualHost 时，custom-style 与 style 效果一致；关闭时，必须使用 custom-style 以确保样式正确传入组件内部。

```html
<t-button style="color: red">填充按钮</t-button>
<t-button custom-style="color: red">填充按钮</t-button>
```

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

### Import TDesign Loading Component

Source: https://tdesign.tencent.com/uniapp/components/loading?tab=api

How to import the TLoading component into your UniApp project, typically within main.ts or specific page components.

```typescript
import TLoading from '@tdesign/uniapp/loading/loading.vue';
```

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

### Import TDesign Badge Component

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

How to import the TBadge component into your UniApp project files such as main.ts or specific page components.

```typescript
import TBadge from '@tdesign/uniapp/badge/badge.vue';
```

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

### Toast Component API

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

Configuration and usage details for the TDesign UniApp Toast component.

```APIDOC
## Toast Component

### Description
Lightweight feedback component that displays a message and automatically disappears after a duration.

### Props
- **custom-style** (Object) - Optional - Custom component styles
- **direction** (String) - Optional - Icon alignment: 'row' (default) or 'column'
- **duration** (Number) - Optional - Display duration in ms (default: 2000)
- **icon** (String/Object) - Optional - Custom icon
- **message** (String) - Optional - Text content to display
- **overlay-props** (Object) - Optional - Attributes passed to the Overlay component
- **placement** (String) - Optional - Position: 'top', 'middle' (default), 'bottom'
- **prevent-scroll-through** (Boolean) - Optional - Prevent scroll and click through (default: false)
- **show-overlay** (Boolean) - Optional - Whether to show overlay (default: false)
- **theme** (String) - Optional - Type: 'loading', 'success', 'warning', 'error'
- **using-custom-navbar** (Boolean) - Optional - Whether custom navbar is used (default: false)

### Events
- **close** - Triggered when toast is hidden
- **destroy** - Triggered when toast is destroyed

### Slots
- **icon** - Custom icon content
- **message** - Custom message content

### Usage Example
```javascript
import TToast from '@tdesign/uniapp/toast/toast.vue';
```
```

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

### 全局自定义主题色 (Less)

Source: https://tdesign.tencent.com/uniapp/custom-theme

通过修改 Less 变量来定义全局主题色，如品牌色、成功色、警告色和失败色。这些变量随后会被编译成 CSS Variables，用于全局覆盖 TDesign 组件的默认样式。

```less
@brand-color: var(--td-brand-color, #0052d9); // 主题色
@success-color: var(--td-success-color, #00a870); // 成功
@warning-color: var(--td-warning-color, #ed7b2f); // 警告
@error-color: var(--td-error-color, #e34d59); // 失败
```

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

### Import TDesign Form Components in Uniapp

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

Demonstrates how to import the TForm and TFormItem components into your Uniapp project. These imports can be done globally in `main.ts` or on a per-page/component basis where needed.

```typescript
import TForm from '@tdesign/uniapp/form/form.vue';
import TFormItem from '@tdesign/uniapp/form-item/form-item.vue';
```

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

### 局部自定义 Rate 组件主题 (CSS)

Source: https://tdesign.tencent.com/uniapp/custom-theme

通过在 CSS 中为特定组件（以 Rate 组件为例）定义 CSS Variables 来实现局部主题自定义。可以单独修改选中和未选中状态的颜色，而不影响其他组件或全局主题。

```css
page {
  --td-rate-selected-color: #ed7b2f; /* 选中的颜色 */
  --td-rate-unselected-color: #e3e6eb; /* 未选中的颜色 */
}
```

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

### Import Image Component - TypeScript

Source: https://tdesign.tencent.com/uniapp/components/image?tab=api

Demonstrates how to import the TImage component from the TDesign Uniapp library into your main TypeScript file or a specific page/component.

```typescript
import TImage from '@tdesign/uniapp/image/image.vue';

```

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

### Import Footer Component (Vue)

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

Demonstrates how to import the TFooter component in a Vue project. This import statement can be placed in `main.ts` or directly within the pages or components where the footer is needed.

```javascript
import TFooter from '@tdesign/uniapp/footer/footer.vue';
```

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

### Import TDesign Uniapp Avatar Components

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

This snippet shows how to import the TAvatar and TAvatarGroup components from the TDesign Uniapp library. These imports should be placed in your main entry file (e.g., main.ts) or directly in the pages/components where they are needed.

```typescript
import TAvatar from '@tdesign/uniapp/avatar/avatar.vue';
import TAvatarGroup from '@tdesign/uniapp/avatar-group/avatar-group.vue';
```

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

### 使用外部样式类覆盖组件样式

Source: https://tdesign.tencent.com/uniapp/custom-style

TDesign 为组件预置了外部样式类接口（如 t-class-loading），开发者可通过传入自定义类名进行样式覆盖。建议在 CSS 中使用 !important 以避免优先级冲突。

```html
<t-button t-class-loading="red-loading">填充按钮</t-button>
```

```css
.red-loading {
  color: red !important;
}
```

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

### 引入 Cascader 组件 (TypeScript)

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

在 `main.ts` 或需要使用的页面/组件中引入 TDesign Cascader 组件。此代码片段展示了如何在 TypeScript 环境下导入组件。

```typescript
import TCascader from '@tdesign/uniapp/cascader/cascader.vue';
```

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

### Import TDesign Slider Component

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

How to import the Slider component into your UniApp project, typically within main.ts or a specific page/component.

```typescript
import TSlider from '@tdesign/uniapp/slider/slider.vue';
```

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

### Import TMessage Component in Uniapp

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

This snippet shows how to import the TMessage component into your Uniapp project. It can be imported either in the main entry file (`main.ts`) or directly within the pages or components where it's needed.

```typescript
import TMessage from '@tdesign/uniapp/message/message.vue';
```

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

### Slider Component API

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

Details regarding the Slider component properties, events, and styling classes for the TDesign UniApp implementation.

```APIDOC
## Slider Component

### Description
Slider component for selecting values, ranges, or steps on a scale. Supports single/dual cursors, vertical orientation, and custom styling.

### Usage
```typescript
import TSlider from '@tdesign/uniapp/slider/slider.vue';
```

### Parameters
#### Props
- **value** (Number | Array) - Optional - Current slider value (supports v-model:value).
- **min** (Number) - Optional - Minimum range value (default: 0).
- **max** (Number) - Optional - Maximum range value (default: 100).
- **step** (Number) - Optional - Step size (default: 1).
- **range** (Boolean) - Optional - Enable dual-cursor mode (default: false).
- **disabled** (Boolean) - Optional - Disable the component.
- **vertical** (Boolean) - Optional - Enable vertical orientation (default: false).
- **theme** (String) - Optional - Style theme: 'default' or 'capsule'.
- **marks** (Object | Array) - Optional - Scale markers.

### Events
- **change** (context: { value: SliderValue }) - Triggered when the slider value changes.
- **dragstart** (context: { e: TouchEvent }) - Triggered when dragging starts.
- **dragend** (context: { value: SliderValue, e: TouchEvent }) - Triggered when dragging ends.

### External Classes
- **t-class**: Root node style class
- **t-class-bar**: Slider track style
- **t-class-cursor**: Cursor style

### CSS Variables
- **--td-slider-active-color**: Active track color
- **--td-slider-bar-height**: Track height (default: 8rpx)
- **--td-slider-dot-size**: Cursor size (default: 40rpx)
```

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

### 解除样式隔离以覆盖组件样式

Source: https://tdesign.tencent.com/uniapp/custom-style

通过开启 addGlobalClass 或在自定义组件中设置 styleIsolation: 'shared'，可以解除样式隔离，从而允许外部 CSS 样式直接作用于 TDesign 组件。

```html
<t-button theme="primary" >填充按钮</t-button>
```

```css
.t-button--primary {
  background-color: navy;
}
```

```javascript
Component({
  options: {
    styleIsolation: 'shared'
  }
})
```

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

### 自定义 TabBar 主题 (Vue/Template)

Source: https://tdesign.tencent.com/uniapp/custom-theme

为不被 `page` 包裹的组件（如自定义 TabBar）添加 `t-class` 属性，并为该 class 定义 CSS 变量来实现主题定制。这允许开发者为特定组件应用独立的样式。

```vue
<t-tab-bar t-class="custom-tab-bar">
  <t-tab-bar-item value="home" icon="home">home</t-tab-bar-item>
</t-tab-bar>
```

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

### Initialize Slider Component

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

When a slider is contained within a hidden element (like a popup or dialog), you must call the init method after the element becomes visible to ensure proper rendering.

```html
<t-slider id="slider" />
```

```javascript
const $slider = this.selectComponent('#slider');
$slider.init();
```

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

### Import Message API in Uniapp

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

This snippet demonstrates how to import the Message API for programmatic usage within your Uniapp application. This is typically done in a page's JavaScript file (`page.js`).

```typescript
import Message from '@tdesign/uniapp/message/index';
```

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

### Import DropdownMenu and DropdownItem Components - TypeScript

Source: https://tdesign.tencent.com/uniapp/components/dropdown-menu

Demonstrates how to import the DropdownMenu and DropdownItem Vue components into your main.ts file or directly within a page or component. These imports are necessary to utilize the dropdown functionalities provided by the TDesign library.

```typescript
import DropdownMenu from '@tdesign/uniapp/dropdown-menu/dropdown-menu.vue';
import DropdownItem from '@tdesign/uniapp/dropdown-item/dropdown-item.vue';
```

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

### 全局自定义主题色 (CSS)

Source: https://tdesign.tencent.com/uniapp/custom-theme

在 App.vue 文件中通过 CSS 变量直接覆盖 TDesign 的主题色。这种方法允许开发者快速应用自定义的主题色，例如将 `--td-brand-color` 设置为 `navy`。

```css
page {
  --td-brand-color: navy; // 任何你想要的主题色
}
```

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

### Button Component API

Source: https://tdesign.tencent.com/uniapp/components/button?tab=api

This section details the properties, events, slots, and external classes available for the TDesign Button component.

```APIDOC
## Button Component Documentation

### Introduction

Import the `TButton` component in `main.ts` or in the pages/components where it's needed.

```typescript
import TButton from '@tdesign/uniapp/button/button.vue';
```

### Component Types

- Basic Button
- Icon Button
- Ghost Button
- Grouped Button
- Full-width Button

### Component States

- Button Disabled State

### Component Styles

- Button Size
- Button Shape
- Button Theme

### Button Props

| Name | Type | Default Value | Description | Required |
|---|---|---|---|---|
| `custom-style` | Object | - | Custom styles | N |
| `activity-type` | Number | - | Card ID. When `open-type` is set to `liveActivity`, set `activity-type` to `notify_type`. After the user clicks the `button`, the `code` can be obtained via the `bindcreateliveactivity` event callback. | N |
| `app-parameter` | String | - | Parameters passed to the APP when opening it, valid when `open-type=launchApp` | N |
| `block` | Boolean | false | Whether it's a block-level element | N |
| `content` | String | - | Button content | N |
| `custom-dataset` | String / Number / Boolean / Object / Array | `{}` | Custom dataset, accessible via `event.currentTarget.dataset.custom` | N |
| `disabled` | Boolean | undefined | Disabled state. Priority: Button.disabled > Form.disabled | N |
| `entrance-path` | String | - | Path to open the mini-program from the message entrance, defaults to the chat tool launch path | N |
| `ghost` | Boolean | false | Whether it's a ghost button (hollow button) | N |
| `hover-class` | String | - | Specifies the style class when the button is pressed, valid when the button is not in a loading or disabled state. When `hover-class="none"`, there is no click state effect. | N |
| `hover-start-time` | Number | 20 | How long after pressing to show the click state, in milliseconds | N |
| `hover-stay-time` | Number | 70 | How long the click state remains after the finger is released, in milliseconds | N |
| `hover-stop-propagation` | Boolean | false | Specifies whether to prevent ancestor nodes from having a click state | N |
| `icon` | String / Object | - | Icon name. A string value represents the icon name, an `Object` value means it will be passed through to the `icon` component. | N |
| `lang` | String | - | Specifies the language for returning user information: `zh_CN` Simplified Chinese, `zh_TW` Traditional Chinese, `en` English. Official mini-program documentation. Options: en/zh_CN/zh_TW | N |
| `loading` | Boolean | false | Whether to display as a loading state | N |
| `loading-props` | Object | `{}` | Pass through all properties of the Loading component. TS Type: `LoadingProps`, Loading API Documents. Detailed type definition | N |
| `need-show-entrance` | Boolean | true | Whether to include the mini-program entrance in the forwarded text message | N |
| `open-type` | String | - | WeChat open capabilities. Options: `contact`, `liveActivity`, `share`, `getPhoneNumber`, `getUserInfo`, `launchApp`, `openSetting`, `feedback`, `chooseAvatar`, `agreePrivacyAuthorization`. Official mini-program documentation. | N |
| `phone-number-no-quota-toast` | Boolean | true | Native button property. When the quota for phone number quick verification or real-time verification is used up, whether to display the prompt "Applying to get your phone number, but the usage count for this feature has reached the current mini-program limit and cannot be used temporarily." Defaults to displaying, valid for `open-type="getPhoneNumber"` or `open-type="getRealtimePhoneNumber"`. | N |
| `send-message-img` | String | screenshot | Image for the in-conversation message card, valid for `open-type="contact"` | N |
| `send-message-path` | String | current share path | Path for the in-conversation message card to jump to the mini-program, valid for `open-type="contact"` | N |
| `send-message-title` | String | current title | Title for the in-conversation message card, valid for `open-type="contact"` | N |
| `session-from` | String | - | Session source, valid for `open-type="contact"` | N |
| `shape` | String | rectangle | Button shape, 4 types: rectangle, square, rounded rectangle, circle. Options: rectangle/square/round/circle | N |
| `show-message-card` | Boolean | false | Whether to show the in-conversation message card. Setting this to `true` will display a "potential mini-program to send" prompt in the bottom right corner when the user enters the customer service conversation. Clicking this allows for quick sending of mini-program messages, valid for `open-type="contact"` | N |
| `size` | String | medium | Component size. Options: extra-small/small/medium/large | N |
| `t-id` | String | - | Button tag ID | N |
| `theme` | String | default | Component style, including brand color and danger color. Options: default/primary/danger/light | N |
| `type` | String | - | Same as the mini-program's formType. Options: submit/reset | N |
| `variant` | String | base | Button style, including base, outline, dashed, text. Options: base/outline/dashed/text | N |

### Button Events

| Name | Parameters | Description |
|---|---|---|
| `agreeprivacyauthorization` | - | Native button property, callback for user agreeing to privacy policy, valid for `open-type=agreePrivacyAuthorization`. (Tips: If using the `onNeedPrivacyAuthorization` interface, call `resolve({ event: "agree", buttonId })` after `bindagreeprivacyauthorization` is triggered.) |
| `chooseavatar` | - | Native button property, callback for obtaining user avatar, valid for `open-type=chooseAvatar`. Returns `e.detail.avatarUrl` as the temporary file link for the avatar. |
| `click` | `(e: MouseEvent)` | Triggered on click |
| `contact` | - | Native button property, callback for customer service messages, valid for `open-type="contact"` |
| `createliveactivity` | - | Callback for the new one-time subscription message delivery mechanism, valid for `open-type=liveActivity` |
| `error` | - | Native button property, callback when an error occurs when using open capabilities, valid for `open-type=launchApp` |
| `getphonenumber` | - | Native button property, callback for phone number quick verification, valid for `open-type=getPhoneNumber`. (Tips: After triggering the `bindgetphonenumber` callback, hide the phone number button component immediately or set it to a disabled state to avoid additional charges due to repeated user authorization.) |
| `getrealtimephonenumber` | - | Native button property, callback for phone number real-time verification, valid for `open-type=getRealtimePhoneNumber`. (Tips: After triggering the `bindgetrealtimephonenumber` callback, hide the phone number button component immediately or set it to a disabled state to avoid additional charges due to repeated user authorization.) |
| `getuserinfo` | - | Native button property, returns user information when the user clicks this button. The detail data in the callback is consistent with `wx.getUserInfo`. Valid for `open-type="getUserInfo"` |
| `launchapp` | - | Callback for successful APP launch, valid for `open-type=launchApp` |
| `opensetting` | - | Native button property, callback after opening the authorization settings page, valid for `open-type=openSetting` |

### Button Slots

| Name | Description |
|---|---|
| - | Default slot, same effect as the `content` slot |
| `content` | Custom display content for `content` |
| `suffix` | Content on the right side, can be used to define a right-side icon |

### Button External Classes

| Class Name | Description |
|---|---|
| `t-class` | Root node style class |
| `t-class-icon` | Icon style class |
| `t-class-loading` | Loading style class |
```

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

### Cascader Component API

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

Details regarding the Cascader component properties, events, and slots for integration in UniApp projects.

```APIDOC
## Cascader Component

### Description
The Cascader component is used when a set of options is organized in a progressive hierarchy, allowing users to select items level by level.

### Properties
- **custom-style** (Object) - Optional - Custom component styles.
- **check-strictly** (Boolean) - Optional - Whether parent and child nodes are independent. Default: false.
- **close-btn** (Boolean) - Optional - Whether to show the close button. Default: true.
- **keys** (Object) - Optional - Alias mapping for value/label/children/disabled fields in options.
- **options** (Array) - Optional - Data source for options.
- **placeholder** (String) - Optional - Placeholder text when no option is selected.
- **sub-titles** (Array) - Optional - Sub-titles for each level.
- **theme** (String) - Optional - Display style (step/tab). Default: step.
- **title** (String) - Optional - Component title.
- **value** (String/Number) - Optional - Selected value (supports v-model).
- **visible** (Boolean) - Optional - Whether the component is visible. Default: false.

### Events
- **change** (context: { value: string|number, selectedOptions: string[] }) - Triggered when the value changes.
- **close** (context: { trigger: string }) - Triggered when closed.
- **pick** (context: { value: string|number, label: string, index: number, level: number }) - Triggered after an option is selected.

### Slots
- **close-btn** - Custom content for the close button.
- **header** - Custom header content.
- **middle-content** - Custom middle content.
- **title** - Custom title content.

### Request Example
```javascript
import TCascader from '@tdesign/uniapp/cascader/cascader.vue';

// Usage in template
<t-cascader v-model:value="selectedValue" :options="options" />
```
```

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

### Import TDesign Button Component

Source: https://tdesign.tencent.com/uniapp/components/button?tab=api

How to import the TDesign Button component into your UniApp project, typically within main.ts or specific page files.

```typescript
import TButton from '@tdesign/uniapp/button/button.vue';
```

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

### 自定义 TabBar 主题 (CSS)

Source: https://tdesign.tencent.com/uniapp/custom-theme

定义与 `t-class` 属性关联的 CSS 类，并在其中设置组件特定的 CSS Variables。例如，为 `.custom-tab-bar` 类设置 `--td-tab-bar-item-color` 来改变 TabBar Item 的颜色。

```css
.custom-tab-bar {
  --td-tab-bar-item-color: red;
}
```

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

### Avatar Component

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

The Avatar component is used to display user avatars, supporting images, text, and icons.

```APIDOC
## Avatar Component

### Description
Displays user avatar information. Supports images, characters, and icons. Can be used for profile navigation or identification.

### Props
- **custom-style** (Object) - Optional - Custom component styles
- **alt** (String) - Optional - Alt text for failed image loads
- **badge-props** (Object) - Optional - Badge configuration for notifications
- **hide-on-load-failed** (Boolean) - Optional - Hide image on load failure
- **icon** (String/Object) - Optional - Icon name or object
- **image** (String) - Optional - Image URL
- **shape** (String) - Optional - Shape: circle/round
- **size** (String) - Optional - Size: small/medium/large or custom pixel value

### Events
- **error** (e: Event) - Triggered when image loading fails

### Slots
- **default** - Custom content area
```

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

### AvatarGroup Component

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

The AvatarGroup component manages a collection of avatars, supporting cascading layouts and overflow handling.

```APIDOC
## AvatarGroup Component

### Description
Used to display a group of avatars. Handles overflow with a collapse element when the number of avatars exceeds the limit.

### Props
- **cascading** (String) - Optional - Layout direction: left-up/right-up
- **collapse-avatar** (String) - Optional - Content for the collapse element (e.g., '+5')
- **max** (Number) - Optional - Maximum number of avatars to display
- **shape** (String) - Optional - Shape: circle/round
- **size** (String) - Optional - Size: small/medium/large

### Events
- **collapsed-item-click** (e: MouseEvent) - Triggered when the collapse element is clicked

### Slots
- **default** - Avatar items
- **collapse-avatar** - Custom content for the collapse element
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.