### Run Development Server

Source: https://github.com/tencent/tdesign-mobile-react/wiki/Mobile-React：组件升级指引

Start the development server to view examples and test interactive components. This command also helps verify if the component examples match the expected behavior.

```bash
npm run dev
```

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

### Guide Props

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/guide/guide.md

Props available for the Guide component.

```APIDOC
## Guide Props

| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| className | String | - | Class name | N |
| style | Object | - | Style, TS Type: `React.CSSProperties` | N |
| backButtonProps | Object | - | Props for the back button, e.g., `{ content: 'Back', theme: 'default' }`. TS Type: `ButtonProps` | N |
| counter | TElement | - | Custom rendering for the counter part. TS Type: `TNode<{ current: number; total: number }>` | N |
| current | Number | - | Current step, -1 to hide. | N |
| defaultCurrent | Number | - | Default current step (uncontrolled). | N |
| finishButtonProps | Object | - | Props for the finish button, e.g., `{ content: 'Finish', theme: 'primary' }`. TS Type: `ButtonProps` | N |
| hideCounter | Boolean | false | Whether to hide the counter. | N |
| hideSkip | Boolean | false | Whether to hide the skip button. | N |
| highlightPadding | Number | 8 | Padding for the highlight area. | N |
| mode | String | popover | Type of guide box. Options: popover/dialog. | N |
| nextButtonProps | Object | - | Props for the next button, e.g., `{ content: 'Next', theme: 'primary' }`. TS Type: `ButtonProps` | N |
| showOverlay | Boolean | true | Whether to show the overlay. | N |
| skipButtonProps | Object | - | Props for the skip button, e.g., `{ content: 'Skip', theme: 'default' }`. TS Type: `ButtonProps` | N |
| steps | Array | - | Defines content for each step, including highlighted nodes, placement, and text. TS Type: `Array<GuideStep>` | N |
| zIndex | Number | 999999 | Layer level of the tooltip. | N |
| onBack | Function | - | Triggered when the back button is clicked. TS Type: `(context: { e: MouseEvent, current: number, total: number }) => void` | N |
| onChange | Function | - | Triggered when the current step changes. TS Type: `(current: number, context?: { e: MouseEvent, total: number }) => void` | N |
| onFinish | Function | - | Triggered when the finish button is clicked. TS Type: `(context: { e: MouseEvent, current: number, total: number }) => void` | N |
| onNextStepClick | Function | - | Triggered when the next step button is clicked. TS Type: `(context: { e: MouseEvent, next: number, current: number, total: number }) => void` | N |
| onSkip | Function | - | Triggered when the skip button is clicked. TS Type: `(context: { e: MouseEvent, current: number, total: number }) => void` | N
```

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

### Install Dependencies

Source: https://github.com/tencent/tdesign-mobile-react/wiki/Mobile-React：组件升级指引

Install all project dependencies using npm. This command should be run after initializing submodules.

```bash
npm i
```

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

### Guide Props

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/guide/guide.en-US.md

Properties available for the Guide component to configure its behavior, appearance, and content.

```APIDOC
## Guide Props

### Description
Properties available for the Guide component to configure its behavior, appearance, and content.

### Props

| name | type | default | description | required |
| -- | -- | -- | -- | -- |
| className | String | - | className of component | N |
| style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N |
| backButtonProps | Object | - | Typescript：`ButtonProps` | N |
| counter | TElement | - | Typescript：`TNode<{ current: number; total: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N |
| current | Number | - | - | N |
| defaultCurrent | Number | - | uncontrolled property | N |
| finishButtonProps | Object | - | Typescript：`ButtonProps` | N |
| hideCounter | Boolean | false | - | N |
| hideSkip | Boolean | false | - | N |
| highlightPadding | Number | 8 | - | N |
| mode | String | popover | options: popover/dialog | N |
| nextButtonProps | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/guide/type.ts) | N |
| showOverlay | Boolean | true | - | N |
| skipButtonProps | Object | - | Typescript：`ButtonProps` | N |
| steps | Array | - | Typescript：`Array<GuideStep>` | N |
| zIndex | Number | 999999 | - | N |

### Events

| name | type | description |
| -- | -- | -- |
| onBack | Function | Typescript：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/> |
| onChange | Function | Typescript：`(current: number, context?: { e: MouseEvent,  total: number }) => void`<br/> |
| onFinish | Function | Typescript：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/> |
| onNextStepClick | Function | Typescript：`(context: { e: MouseEvent, next: number, current: number, total: number  }) => void`<br/> |
| onSkip | Function | Typescript：`(context: { e: MouseEvent, current: number, total: number  }) => void`<br/> |
```

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

### GuideConfig

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/config-provider/config-provider.en-US.md

Configuration options for the Guide component.

```APIDOC
## GuideConfig

### Description

Configuration options for the Guide component.

### Parameters

#### Request Body

- **back** (String) - Optional
- **finish** (String) - Optional
- **next** (String) - Optional
- **skip** (String) - Optional
```

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

### GuideConfig

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/config-provider/config-provider.md

Configuration options for the Guide component.

```APIDOC
## GuideConfig

### Description
Configuration options for the Guide component.

### Properties
- **back** (String) - Optional - Language configuration, description text for 'Back'.
- **finish** (String) - Optional - Language configuration, description text for 'Finish'.
- **next** (String) - Optional - Language configuration, description text for 'Next'.
- **skip** (String) - Optional - Language configuration, description text for 'Skip'.
```

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

### Usage with Next.js (Client Component)

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/site/docs/getting-started.en-US.md

Import components and styles for Next.js applications. Use the 'lib' bundle and ensure CSS is imported correctly. This example assumes a client component setup.

```javascript
'use client'

import { Button } from 'tdesign-mobile-react/lib/';
import 'tdesign-mobile-react/dist/tdesign.css';
```

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

### GuideStep

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/guide/guide.en-US.md

Configuration object for each step within the Guide component.

```APIDOC
## GuideStep

### Description
Configuration object for each step within the Guide component.

### Properties

| name | type | default | description | required |
| -- | -- | -- | -- | -- |
| backButtonProps | Object | - | Typescript：`ButtonProps` | N |
| body | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N |
| content | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N |
| element | String / Function | - | required。Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | Y |
| highlightContent | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N |
| highlightPadding | Number | - | - | N |
| mode | String | - | options: popover/dialog | N |
| nextButtonProps | Object | - | Typescript：`ButtonProps` | N |
| offset | Array | - | this api is in discussing. do not use it.。Typescript：`Array<string \| number>` | N |
| placement | String | 'top' | Typescript：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/guide/type.ts) | N |
| popoverProps | Object | - | Popover component props if `mode = popover`。Typescript：`PopoverProps`，[Popover API Documents](./popover?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/guide/type.ts) | N |
| showOverlay | Boolean | true | - | N |
| skipButtonProps | Object | - | Typescript：`ButtonProps` | N |
| title | String / Slot / Function | - | title of current step。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N |
```

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

### Install tdesign-icons-react

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/icon/icon.en-US.md

Install the `tdesign-icons-react` package to use icons directly in your project. On-demand importing is recommended to minimize output size and enable features like weight adjustment and color fills.

```bash
npm install tdesign-icons-react
```

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

### GuideStep

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/guide/guide.md

Defines the properties for each step in the Guide component.

```APIDOC
## GuideStep

| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| backButtonProps | Object | - | Custom props for the current step's back button. TS Type: `ButtonProps` | N |
| body | String / Slot / Function | - | Content of the current step's tooltip. TS Type: `string \| TNode` | N |
| content | Slot / Function | - | Custom content for the guide popup. If present, all props except `placement`, `offset`, and `element` are ignored. TS Type: `TNode` | N |
| element | String / Function | - | Required. The highlighted element. A String is treated as a selector. Example: `'#tdesign'` or `() => document.querySelector('#tdesign')`. TS Type: `AttachNode` | Y |
| highlightContent | Slot / Function | - | Custom highlight box (only effective when `mode` is `popover`). TS Type: `TNode` | N |
| highlightPadding | Number | - | Padding for the highlight box. | N |
| mode | String | - | Type of guide box. Options: popover/dialog. | N |
| nextButtonProps | Object | - | Custom props for the current step's next button. TS Type: `ButtonProps` | N |
| offset | Array | - | Offset relative to `placement`. Example: `[-10, 20]` or `['10px', '8px']`. TS Type: `Array<string \| number>` | N |
| placement | String | 'top' | Position of the guide box relative to the highlighted element (only effective when `mode` is `popover`). TS Type: `StepPopoverPlacement` | N |
| popoverProps | Object | - | Props passed to the Popover component. Valid when `mode=popover`. TS Type: `PopoverProps` | N |
| showOverlay | Boolean | true | Whether to show the overlay. | N |
| skipButtonProps | Object | - | Custom props for the current step's skip button. TS Type: `ButtonProps` | N |
| title | String / Slot / Function | - | Title content for the current step. TS Type: `string \| TNode` | N
```

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

### Install TDesign Mobile React via npm

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/site/docs/getting-started.en-US.md

Use npm to install the TDesign Mobile React component library. This is the recommended method for most projects.

```bash
npm i tdesign-mobile-react
```

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

### Initialize and Update Submodules

Source: https://github.com/tencent/tdesign-mobile-react/wiki/Mobile-React：组件升级指引

Run these commands to initialize and update Git submodules for the project. This is a prerequisite for installing dependencies and running the development server.

```bash
git submodule init && git submodule update
```

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

### Getting All Icon Names

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/icon/icon.md

How to obtain a list of all available icon names using the manifest import.

```APIDOC
## Get All Icon Names

### Description
To get a list of all available icon names, you can import the `manifest` object from the `tdesign-icons-react` package.

### Usage
```javascript
import { manifest } from 'tdesign-icons-react';

// manifest will contain an object with all icon names as keys
console.log(Object.keys(manifest));
```
```

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

### Full Icon Import Example

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/icon/icon.en-US.md

Demonstrates the full import of icons. The icon size can be controlled using various units like 'small', 'medium', 'large', '35px', or '3em'. Icon color is managed via CSS using the `style` attribute.

```javascript
<template>
  <div class="icons-wrapper">
    <t-icon name="add" />
    <t-icon name="edit" size="small" />
    <t-icon name="delete" size="medium" />
    <t-icon name="share" size="large" />
    <t-icon name="print" size="35px" />
    <t-icon name="save" size="3em" />
  </div>
</template>

<script lang="ts" setup>
import TIcon from 'tdesign-icons-react';
</script>
<style>
.icons-wrapper > * {
  margin-right: 8px;
}
</style>
```

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

### Get All Icon Names

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/icon/icon.en-US.md

Import the `manifest` from `tdesign-icons-react` to retrieve all available icon names.

```javascript
import { manifest } from 'tdesign-icons-react'
```

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

### Update Demo Snapshots for Unit Tests

Source: https://github.com/tencent/tdesign-mobile-react/wiki/Mobile-React：组件升级指引

Before running unit tests, update the demo snapshots if any changes have been made to the demo examples. This ensures test consistency.

```bash
npm run test:snap-update
```

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

### On-demand Loading for No-Network Scenarios

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/icon/icon.en-US.md

In no-network environments, use on-demand loading for icons. For example, change `<t-icon name="add" />` to `<AddIcon />`.

```javascript
import { AddIcon } from 'tdesign-icons-react';
```

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

### Execute Unit Tests

Source: https://github.com/tencent/tdesign-mobile-react/wiki/Mobile-React：组件升级指引

Run the full suite of unit tests for the project. This includes component logic and demo snapshot tests.

```bash
npm run test
```

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

### Get Icon Name List

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/icon/icon.md

Obtain a list of all available icon names by importing the `manifest` object from 'tdesign-icons-react'.

```javascript
import { manifest } from 'tdesign-icons-react';
```

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

### DrawerInstance Methods

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/drawer/drawer.en-US.md

Methods available on the Drawer instance for programmatic control.

```APIDOC
## DrawerInstance

### Description

Methods available on the Drawer instance for programmatic control.

### Methods

- **destroy** - No params, No return - 
- **hide** - No params, No return - 
- **show** - No params, No return - 
- **update** - Params: `(props: DrawerOptions)`, No return - 
```

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

### Customize Theme with Vite

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/site/docs/getting-started.en-US.md

Configure Vite to customize TDesign Mobile React themes by modifying Less variables. This example shows how to change the button height.

```javascript
// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          '@btn-height-s': '40px',
        },
      },
    },
  },
};
```

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

### ToastOptions

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/toast/toast.en-US.md

Options for creating a toast instance programmatically.

```APIDOC
## ToastOptions

### Description

Options for creating a toast instance programmatically.

### Properties

- **attach** (String / Function) - Optional - Typescript：`AttachNode`. [see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) (default: 'body')
- **className** (String) - Optional
- **style** (Object) - Optional - Typescript：`Styles`. [see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)
- **ToastProps** - Optional - extends `ToastProps`
```

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

### DrawerOptions

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/drawer/drawer.md

Options for configuring the Drawer.

```APIDOC
## DrawerOptions

### Description
Options for configuring the Drawer.

### Properties
- **className** (String) - Optional - Drawer class name, e.g., 't-class-drawer-first t-class-drawer-second'.
- **style** (Object) - Optional - The style attribute of the dialog, input [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText). TS Type: `Styles`.
- **Omit<DrawerProps, 'attach'>** (-) - Optional - Inherits all properties from `Omit<DrawerProps, 'attach'>`.
```

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

### Iconfont Usage

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/icon/icon.en-US.md

Example of using Iconfont. Similar to SVG icons, Iconfont icons can be loaded from a URL. The `loadDefaultIcons` prop controls whether default Iconfont icons are loaded.

```javascript
<template>
  <t-iconfont name="wechat"></t-iconfont>
  <t-iconfont name="qq"></t-iconfont>
</template>

<script lang="ts" setup>
import TIconfont from 'tdesign-icons-react';
</script>
```

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

### DrawerOptions

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/drawer/drawer.en-US.md

Options for configuring the Drawer, extending DrawerProps with additional settings.

```APIDOC
## DrawerOptions

### Description

Options for configuring the Drawer, extending DrawerProps with additional settings.

### Props

- **className** (String) - Optional - 
- **style** (Object) - Optional - Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)
- **Omit<DrawerProps, 'attach'>** (-) - Optional - extends `Omit<DrawerProps, 'attach'>`
```

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

### Customize Theme with Webpack

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/site/docs/getting-started.en-US.md

Configure Webpack to customize TDesign Mobile React themes by modifying Less variables. This example demonstrates changing the button height using less-loader.

```javascript
// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
      options: {
        lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
          modifyVars: {
            '@btn-height-s': '40px',
          },
          javascriptEnabled: true,
        },
      },
    }],
  }],
}
```

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

### DialogInstance Methods

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/dialog/dialog.en-US.md

Methods available on the Dialog instance for programmatic control.

```APIDOC
## DialogInstance

### Description
Provides methods to control the dialog's lifecycle after it has been initialized.

### Methods
- **destroy**(): void - Destroys the dialog instance.
- **hide**(): void - Hides the dialog.
- **show**(): void - Shows the dialog.
- **update**(props: DialogOptions): void - Updates the dialog's properties.
```

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

### FormInstanceFunctions API

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/form/form.md

Provides methods for interacting with form instances, such as clearing validation, getting form elements, retrieving field values, resetting the form, setting field values, and submitting or validating the form.

```APIDOC
## FormInstanceFunctions

### Description
Provides methods for interacting with form instances.

### Methods

#### `clearValidate(fields?: Array<keyof FormData>)`
- **Description**: Clears validation results. Optionally specify fields to clear validation for. If `fields` is empty, all fields are cleared.
- **Parameters**:
  - `fields` (Array<keyof FormData>): Optional. An array of form field keys to clear validation for.
- **Returns**: `-`

#### `currentElement()`
- **Description**: Gets the form DOM element.
- **Returns**: `HTMLFormElement`

#### `getCurrentElement()`
- **Description**: Gets the form DOM element.
- **Returns**: `HTMLFormElement`

#### `getFieldValue(field: NamePath)`
- **Description**: Gets the value of a single form field.
- **Parameters**:
  - `field` (NamePath): The name or path of the field to get the value from.
- **Returns**: `unknown`

#### `getFieldsValue(nameList: string[] | boolean)`
- **Description**: Gets the values of a group of fields. If `nameList` is `true`, returns all form data.
- **Parameters**:
  - `nameList` (string[] | boolean): An array of field names or `true` to get all values.
- **Returns**: `getFieldsValue<FormData>`

#### `getValidateMessage(fields?: Array<keyof FormData>)`
- **Description**: Gets validation results. If called without arguments, returns all validation results.
- **Parameters**:
  - `fields` (Array<keyof FormData>): Optional. An array of form field keys to get validation messages for.
- **Returns**: `Array<FormRule> | void`

#### `reset(params?: FormResetParams<FormData>)`
- **Description**: Resets the form. Can reset all fields to empty or initial values. Supports resetting specific fields.
- **Parameters**:
  - `params` (FormResetParams<FormData>): Optional. Configuration for reset, including `type` ('initial' or 'empty') and `fields` (Array<keyof FormData>).
- **Returns**: `-`

#### `setFields(fields: FieldData[])`
- **Description**: Sets the state for multiple form fields.
- **Parameters**:
  - `fields` (FieldData[]): An array of field data objects, each containing `name`, `value`, `status`, and `validateMessage`.
- **Returns**: `-`

#### `setFieldsValue(field: Data)`
- **Description**: Sets the value for a form field.
- **Parameters**:
  - `field` (Data): An object containing the field name and its new value.
- **Returns**: `-`

#### `setValidateMessage(message: FormValidateMessage<FormData>)`
- **Description**: Sets custom validation messages, e.g., for remote validation results. Should be used after the component is mounted.
- **Parameters**:
  - `message` (FormValidateMessage<FormData>): An object mapping field names to an array of validation messages.
- **Returns**: `-`

#### `submit(params?: { showErrorMessage?: boolean })`
- **Description**: Submits the form. Can be used when there is no submit button. Optionally controls whether to display error messages on validation failure.
- **Parameters**:
  - `params` ({ showErrorMessage?: boolean }): Optional. Configuration object, `showErrorMessage` (boolean) controls error message display.
- **Returns**: `-`

#### `validate(params?: FormValidateParams)`
- **Description**: Validates the form fields. Returns a promise that resolves with validation results. Can specify fields to validate, trigger type, and whether to show error messages.
- **Parameters**:
  - `params` (FormValidateParams): Optional. Configuration object including `fields` (Array<string>), `showErrorMessage` (boolean), and `trigger` ('blur', 'change', 'submit', 'all').
- **Returns**: `Promise<FormValidateResult<FormData>>`

#### `validateOnly(params?: Pick<FormValidateParams, 'fields' | 'trigger'>)`
- **Description**: Performs validation without modifying the component's state. Returns a promise with validation results only.
- **Parameters**:
  - `params` (Pick<FormValidateParams, 'fields' | 'trigger'>): Optional. Configuration object including `fields` (Array<string>) and `trigger` ('blur', 'change', 'submit', 'all').
- **Returns**: `Promise<FormValidateResult<FormData>>`
```

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

### drawer or DrawerPlugin

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/drawer/drawer.md

Plugin options for the Drawer.

```APIDOC
## drawer or DrawerPlugin

### Description
Plugin options for the Drawer.

### Parameters
- **options** (-) - Optional - TS Type: `DrawerOptions`.
```

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

### Import Components and Styles

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/site/docs/getting-started.en-US.md

Import individual components and global styles for on-demand usage with build tools like Webpack or Rollup that support tree-shaking.

```javascript
import { Button } from 'tdesign-mobile-react';
import 'tdesign-mobile-react/es/style/index.css'; // global design variables
```

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

### Drawer Plugin

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/drawer/drawer.en-US.md

Options for the drawer plugin, used for initializing or configuring the drawer.

```APIDOC
## drawer or DrawerPlugin

### Description

Options for the drawer plugin, used for initializing or configuring the drawer.

### Options

- **options** (-) - Default: - - Typescript：`DrawerOptions`
```

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

### Basic Usage with Tree-Shaking

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/site/docs/getting-started.md

Import components and common styles when using build tools like Webpack or Rollup that support tree-shaking for optimized builds.

```javascript
import { Button } from 'tdesign-mobile-react';
import 'tdesign-mobile-react/es/style/index.css'; // 少量公共样式
```

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

### Input Component API

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/input/input.md

This section details the available props for the Input component, including their types, default values, descriptions, and whether they are required.

```APIDOC
## Input Component API

### Props

| Prop Name | Type | Default | Description | Required |
|---|---|---|---|---|
| className | String | - | Class name for the input element. | N |
| style | Object | - | Inline styles for the input element. TS Type: `React.CSSProperties`. | N |
| align | String | left | Text alignment within the input. Options: `left`, `center`, `right`. | N |
| allowInputOverMax | Boolean | false | Allows input even when exceeding `maxlength` or `maxcharacter`. | N |
| autocomplete | String | undefined | Enables native HTML5 autocomplete functionality. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for details. | N |
| autofocus | Boolean | false | Automatically focuses the input element on mount. | N |
| borderless | Boolean | false | Enables borderless mode for the input. | N |
| clearTrigger | String | always | Trigger for the clear button. Options: `always`, `focus`. Only effective when input has value. | N |
| clearable | Boolean | false | Enables a clear button to empty the input. | N |
| cursorColor | String | #0052d9 | Color of the input cursor. | N |
| disabled | Boolean | undefined | Disables the input element. | N |
| enterkeyhint | String | - | Controls the appearance of the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) for options. | N |
| errorMessage | String | - | Deprecated. Use `status` and `tips` instead. Error message text. | N |
| extra | TElement | - | Extra content displayed to the right of the input. TS Type: `TNode`. | N |
| format | Function | - | Function to format the displayed value. TS Type: `InputFormatType = (value: InputValue) => string`. | N |
| label | TNode | - | Text displayed to the left of the input. TS Type: `string | TNode`. | N |
| layout | String | horizontal | Layout of the label and input. Options: `vertical`, `horizontal`. | N |
| maxcharacter | Number | - | Maximum number of characters allowed, where Chinese characters count as two. Use either `maxcharacter` or `maxlength`. | N |
| maxlength | String / Number | - | Maximum length of input string. Use either `maxcharacter` or `maxlength`. | N |
| name | String | - | Name attribute for the input element. | N |
| placeholder | String | undefined | Placeholder text for the input. | N |
| prefixIcon | TElement | - | Icon displayed before the input. TS Type: `TNode`. | N |
| readonly | Boolean | undefined | Sets the input to read-only mode. | N |
| size | String | medium | Deprecated. Input size. Options: `small`, `medium`. TS Type: `'medium' | 'small'`. | N |
| spellcheck | Boolean | false | Enables native HTML5 spellcheck. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck) for details. | N |
| status | String | default | Status of the input. Options: `default`, `success`, `warning`, `error`. | N |
| suffix | TNode | - | Content displayed after the input, before the suffix icon. TS Type: `string | TNode`. | N |
| suffixIcon | TElement | - | Icon displayed after the input. TS Type: `TNode`. | N |
| tips | TNode | - | Helper text displayed below the input, styled according to `status`. TS Type: `string | TNode`. | N |
| type | String | text | Type of the input. Options: `text`, `number`, `url`, `tel`, `password`, `search`, `submit`, `hidden`. | N |
| value | String / Number | - | Controlled value of the input. TS Type: `InputValue`. | N |
| defaultValue | String / Number | - | Uncontrolled initial value of the input. TS Type: `InputValue`. | N |

### Events

| Event Name | Arguments | Description |
|---|---|---|
| onBlur | `(value: InputValue, context: { e: FocusEvent })` | Triggered when the input loses focus. | N |
| onChange | `(value: InputValue, context?: { e?: InputEvent | MouseEvent | CompositionEvent; trigger: 'input' | 'initial' | 'clear' | 'blur'})` | Triggered when the input value changes. `trigger='initial'` indicates automatic adjustment due to constraints. | N |
| onClear | `(context: { e: TouchEvent })` | Triggered when the clear button is clicked. | N |
| onFocus | `(value: InputValue, context: { e: FocusEvent })` | Triggered when the input gains focus. | N |
| onValidate | `(context: { error?: 'exceed-maximum' | 'below-minimum' })` | Triggered when the character count exceeds limits. | N |
```

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

### Import Components and Styles (esm)

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/site/docs/getting-started.en-US.md

Import components and styles from the 'esm' directory, suitable for environments that support ES modules. This version also includes a small amount of common styles.

```javascript
import { Button } from 'tdesign-mobile-react/esm/';
import 'tdesign-mobile-react/esm/style/index.js'; // 少量公共样式
```

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

### onPreview

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/upload/upload.en-US.md

Triggered when the preview element of a file is clicked. It provides the file object, its index, and the mouse event.

```APIDOC
## onPreview

### Description
Triggered when the preview element of a file is clicked. It provides the file object, its index, and the mouse event.

### Method
Function

### Parameters
#### Function Parameters
- **options** (object) - Required - An object containing:
  - **file** (UploadFile) - The file object being previewed.
  - **index** (number) - The index of the file in the list.
  - **e** (MouseEvent) - The mouse event object.

### Typescript Definition
` (options: { file: UploadFile; index: number; e: MouseEvent }) => void`
```

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

### InputConfig

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/config-provider/config-provider.en-US.md

Configuration options for the Input component.

```APIDOC
## InputConfig

### Description

Configuration options for the Input component.

### Parameters

#### Request Body

- **placeholder** (String) - Optional
```

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

### InputConfig

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/config-provider/config-provider.md

Configuration options for the Input component.

```APIDOC
## InputConfig

### Description
Configuration options for the Input component.

### Properties
- **placeholder** (String) - Optional - Language configuration, placeholder description text for 'Please enter'.
```

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

### QRCodeConfig

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/config-provider/config-provider.en-US.md

Configuration options for the QRCode component.

```APIDOC
## QRCodeConfig

### Description

Configuration options for the QRCode component.

### Parameters

#### Request Body

- **expiredText** (String) - Optional - Language configuration, "QR code expired" description text
- **refreshText** (String) - Optional - Language configuration, "QR code refresh" description text
- **scannedText** (String) - Optional - Language configuration, "QR code scanned" description text
```

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

### QRCodeConfig

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/config-provider/config-provider.md

Configuration options for the QRCode component.

```APIDOC
## QRCodeConfig

### Description
Configuration options for the QRCode component.

### Properties
- **expiredText** (String) - Optional - Language configuration, description text for 'QR code expired'.
- **refreshText** (String) - Optional - Language configuration, description text for 'Click to refresh'.
- **scannedText** (String) - Optional - Language configuration, description text for 'Scanned'.
```

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

### Load TouchEmulator Script

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/site/mobile.html

This script dynamically loads the TouchEmulator.js library into the document's body. It ensures that the TouchEmulator functionality is available after the script has loaded.

```javascript
!function(a){var b=a.createElement("script");b.onload=function(){TouchEmulator();},b.src="https://tdesign.gtimg.com/js/touch-emulator.js",a.body.appendChild(b)}(document);
```

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

### CSS Variables

Source: https://github.com/tencent/tdesign-mobile-react/blob/develop/src/notice-bar/notice-bar.en-US.md

Customizable CSS variables for the NoticeBar component.

```APIDOC
## CSS Variables

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

### Parameters

#### CSS Variables

- **--td-notice-bar-error-bg-color** (String) - Default Value: `@error-color-1` - Description: -
- **--td-notice-bar-error-color** (String) - Default Value: `@error-color-6` - Description: -
- **--td-notice-bar-font-color** (String) - Default Value: `@text-color-primary` - Description: -
- **--td-notice-bar-info-bg-color** (String) - Default Value: `@brand-color-light` - Description: -
- **--td-notice-bar-info-color** (String) - Default Value: `@brand-color` - Description: -
- **--td-notice-bar-operation-font-color** (String) - Default Value: `@brand-color` - Description: -
- **--td-notice-bar-success-bg-color** (String) - Default Value: `@success-color-1` - Description: -
- **--td-notice-bar-success-color** (String) - Default Value: `@success-color` - Description: -
- **--td-notice-bar-suffix-icon-color** (String) - Default Value: `@text-color-placeholder` - Description: -
- **--td-notice-bar-warning-bg-color** (String) - Default Value: `@warning-color-1` - Description: -
- **--td-notice-bar-warning-color** (String) - Default Value: `@warning-color` - Description: -
```