### Install Vant UI and Dependencies

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/use-in-react.md

Install the necessary packages for Vant UI and Taro using yarn.

```bash
yarn add @tarojs/taro @tarojs/components @antmjs/vantui
yarn add @antmjs/babel-preset --dev
```

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

### Start Development Server

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/use-in-react.md

Run the development server with the specified environment variable for H5.

```bash
TARO_ENV=h5 yarn start
```

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

### Vantui CLI Configuration

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui-cli/README.md

Configure build settings in the vant.config.mjs file. This example shows settings for source directory, named export, skipped installations, package manager, and ignored files.

```javascript
export default {
  name: 'antmjs.vantui',
  build: {
    srcDir: 'src',
    namedExport: true,
    skipInstall: ['lazyload'],
    packageManager: 'yarn',
    ignore: [/types.d.ts/],
  },
}
```

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

### Install Vantui CLI with npm

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui-cli/README.md

Install the Vantui CLI as a development dependency using npm.

```shell
npm i @antmjs/vantui-cli -D
```

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

### Basic Usage Example

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/count-down/README.md

Demonstrates the basic usage of the CountDown component with a specified time.

```APIDOC
## Basic Usage

### Description
Set the `time` prop to specify the total countdown duration in milliseconds.

### Code

```javascript
<CountDown time={100000} />
```
```

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

### Manual Control Example

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/count-down/README.md

Demonstrates how to manually control the countdown using its ref.

```APIDOC
## Manual Control

### Description
Obtain the component instance using a `ref` selector and call the `start`, `pause`, or `reset` methods.

### Code

```javascript
const countDownRef = useRef<ICountDownRef>(null);

// To start:
countDownRef.current?.start();

// To pause:
countDownRef.current?.pause();

// To reset:
countDownRef.current?.reset();
```
```

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

### Install VantUI via npm/yarn

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/quickstart.md

Install the VantUI library using either npm or yarn package managers.

```bash
# Through npm installation
npm install @antmjs/vantui

# Through yarn installation
yarn add @antmjs/vantui
```

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

### Basic Usage Example

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/pull-to-refresh/README.md

Demonstrates the basic implementation of the PullToRefresh component, including how to resolve conflicts with scroll operations.

```APIDOC
## Basic Usage

### Description

This example shows how to use the PullToRefresh component and resolve potential conflicts with scroll events.

### Code Example

```jsx
import { PullToRefresh } from '@antmjs/vantui';
import { useState } from 'react';

function Index() {
  const [scrollTop, setTop] = useState(0);

  const onscroll = (e) => {
    setTop(e.detail.scrollTop);
  };

  const onRefresh = async () => {
    // Simulate network request
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('Refresh completed!');
  };

  return (
    <PullToRefresh disable={scrollTop > 0} onRefresh={onRefresh}>
      <ScrollView onScroll={onscroll}>
        <View>Content goes here...</View>
        {/* Add more content to make the ScrollView scrollable */}
      </ScrollView>
    </PullToRefresh>
  );
}
```

### Explanation

The `disable` prop of `PullToRefresh` is set to `scrollTop > 0`. This means that pull-to-refresh will only be active when the scroll position is at the top (`scrollTop` is 0). When the user scrolls down (`scrollTop > 0`), the `disable` prop becomes `true`, effectively disabling the pull-to-refresh gesture and allowing normal scrolling behavior. The `onRefresh` function is called when the pull-to-refresh action is triggered.
```

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

### Sku Component - Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/sku/README.md

Demonstrates the basic implementation of the Sku component with example data structures for sku and goodsList.

```APIDOC
## Sku Component - Basic Usage

### Description
This section shows how to use the Sku component with example data for product specifications and available goods.

### Data Structures

**Sku Data Format:**
```js
const sku = [
  {
    id: 1,
    name: '颜色',
    items: [
      {
        name: '亮黑色',
        id: 11,
        color: '#131111'
      },
      {
        name: '釉白色',
        id: 12,
        mark: '首发',
        color: '#ffff'
      },
      {
        name: '秘银色',
        id: 13,
        color: '#d2cccc'
      },
      {
        name: '夏日胡杨',
        id: 14,
        color: '#dd5151'
      }
    ]
  },
  {
    id: 2,
    name: '版本',
    items: [
      {
        name: '8GB+128GB',
        id: 21
      },
      {
        name: '8GB+256GB',
        id: 22
      }
    ]
  }
]
```

**Goods List Data Format:**
```js
const goodsList = [
  {
    id: 1,
    skuIds: [11, 21],
    skuName: '亮黑色&8GB+128GB'
  },
  {
    id: 2,
    skuIds: [11, 22],
    skuName: '亮黑色&8GB+256GB',
    count: 0
  },
  {
    id: 3,
    skuIds: [12, 21],
    skuName: '釉白色&8GB+128GB'
  },
  {
    id: 4,
    skuIds: [12, 22],
    skuName: '釉白色&8GB+256GB'
  },
  {
    id: 4,
    skuIds: [21, 13],
    skuName: '秘银色&8GB+128GB'
  },
  {
    id: 6,
    skuIds: [13, 22],
    skuName: '秘银色&8GB+256GB',
    disabled: true
  },
  {
    id: 7,
    skuIds: [14, 22],
    skuName: '夏日胡杨&8GB+256GB'
  }
]
```

### Component Usage
```js
import { Sku } from '@antmjs/vantui'

// ... component implementation using sku and goodsList data
```
```

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

### Millisecond Rendering Example

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/count-down/README.md

Enables millisecond precision rendering for the countdown.

```APIDOC
## Millisecond Rendering

### Description
By default, the countdown renders once per second. Set the `millisecond` prop to `true` to enable millisecond rendering.

### Code

```javascript
<CountDown time={100000} millisecond />
```
```

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

### Import NoticeBar Component

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/notice-bar/README.md

Import the NoticeBar component in your Taro file. This is the initial setup required before using the component.

```javascript
import { NoticeBar } from '@antmjs/vantui'
```

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

### Install Vantui CLI with yarn

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui-cli/README.md

Install the Vantui CLI as a development dependency using yarn.

```shell
yarn add @antmjs/vantui-cli --dev
```

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

### Custom Format Example

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/count-down/README.md

Shows how to customize the display format of the countdown.

```APIDOC
## Custom Format

### Description
Use the `format` prop to customize the content of the countdown text.

### Code

```javascript
<CountDown time={100000} format="DD-DD HH:mm:ss" />
```
```

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

### Divider Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/divider/README.md

Examples demonstrating how to use the Divider component in various ways.

```APIDOC
## Divider Component Usage

### Introduction

Used to separate content into multiple areas.

### Import

Import the Divider component in your Taro file:

```javascript
import { Divider } from '@antmjs/vantui'
```

*Note: Vant Weapp version 1.0 and above supports this component. Refer to [Quick Start](#/quickstart) for upgrade instructions.*

### Basic Usage

::: $demo1 :::

### Using hairline

::: $demo2 :::

### Dashed Line

::: $demo3 :::

### Text Position

::: $demo4 :::

### Custom Props

::: $demo5 :::

### Custom Styles

::: $demo6 :::
```

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

### Icon Component Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/icon/README.md

This section covers the basic usage of the Icon component, including installation and common properties like dot, info, size, and color.

```APIDOC
## Icon Component

### Description
The Icon component provides a flexible way to display icons in your application. It supports font-based icons, image links, and custom icon fonts.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import { Icon } from '@antmjs/vantui'

// Basic usage
<Icon name="search" />

// With dot
<Icon name="chat" dot />

// With info badge
<Icon name="message" info="9" />

// Custom size and color
<Icon name="star" size="24" color="#007bff" />
```

### Response
N/A (Component Usage)

### IconProps

| Parameter | Description | Type | Default | Required |
|---|---|---|---|---|
| dot | Whether to display a small red dot on the top right of the icon | boolean | - | `false` |
| info | Text prompt on the top right of the icon | number | false | `false` |
| size | Icon size, e.g., 20px, unit is px | number | string | - | `false` |
| color | Icon color | string | - | `false` |
| style | Custom style | attr: string | CSSProperties | - | `false` |
| classPrefix | Class name prefix | string | vant-icon, empty string to remove prefix | `false` |
| name | Icon name or image link | string | - | `false` |
```

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

### Install Area Data Package

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/area/README.md

Install the official Vant area data package if you need to use the default province-city-district data.

```bash
yarn add @vant/area-data
```

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

### Basic Signature Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/signature/README.md

This is a basic example of how to use the Signature component. No additional configuration is needed for default functionality.

```jsx
<Signature />
```

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

### Install Swiper Component

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/swiper/README.md

Import the Swiper and SwiperItem components from the @antmjs/vantui library.

```js
import { Swiper, SwiperItem } from '@antmjs/vantui'
```

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

### Initialize Vant UI in Entry File

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/use-in-react.md

Import and initialize Vant UI, along with Taro components, in your application's entry point (src/index.js). This setup is crucial for Vant UI to function correctly.

```js
import { init } from '@antmjs/vantui'
import { defineCustomElements, applyPolyfills } from '@tarojs/components/loader'

init()
applyPolyfills().then(function () {
  defineCustomElements(window)
})
```

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

### Basic Loading Types

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/loading/README.md

Demonstrates the default circular loading indicator and the spinner type. No specific setup is required beyond importing the component.

```jsx
function Demo() {
  return (
    <>
      <Loading />
      <Loading type="spinner" />
    </>
  )
}
```

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

### Basic Usage of NoticeBar

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/notice-bar/README.md

Demonstrates the fundamental implementation of the NoticeBar component. No specific properties are required for basic display.

```javascript
<NoticeBar />
```

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

### Overlay Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/overlay/README.md

Demonstrates the basic implementation of the Overlay component.

```javascript
Overlay
```

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

### Basic Steps Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/steps/README.md

Demonstrates the basic implementation of the Steps component with a predefined array of steps and an active step index.

```jsx
const steps = [
  {
    text: '步骤一',
    desc: '描述信息',
  },
  {
    text: '步骤二',
    desc: '描述信息',
  },
  {
    text: '步骤三',
    desc: '描述信息',
  },
  {
    text: '步骤四',
    desc: '描述信息',
  },
]
function Demo() {
  return <Steps steps={steps} active={2} />
}
```

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

### Layout Introduction and Import

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/col/README.md

Introduces the Layout component and shows how to import the Row and Col components in Taro.

```APIDOC
## Layout Introduction

The Layout component provides `vanRow` and `vanCol` components for row and column layouts.

### Import

Import the components in your Taro file:

```javascript
import { Row, Col } from '@antmjs/vantui'
```
```

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

### Calendar CSS Variable

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/calendar/README.md

Example of setting a CSS variable for calendar height.

```css
.calendar {
  --calendarHeight: 500px;
}
```

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

### Basic Usage of Switch

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/switch/README.md

Demonstrates the basic functionality of the Switch component.

```javascript
<!-- Basic Usage -->
<Switch />
```

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

### Empty Component - Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/empty/README.md

Demonstrates the basic usage of the Empty component with a description.

```APIDOC
## POST /api/empty

### Description
Displays a placeholder prompt for an empty state.

### Method
POST

### Endpoint
/api/empty

### Parameters
#### Request Body
- **description** (string) - Required - The text description to display.

### Request Example
```json
{
  "description": "描述文字"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "success"
}
```
```

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

### Import WaterfallFlow Component

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/waterfall-flow/README.md

Import the WaterfallFlow component in your Taro files. Ensure you have @antmjs/vantui installed.

```js
import { WaterfallFlow } from '@antmjs/vantui'
```

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

### Circle Counter-Clockwise Direction

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/circle/README.md

Set the `clockwise` prop to `false` to make the progress start from the counter-clockwise direction.

```javascript
clockwise: false
```

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

### Run VantUI Documentation Sync Script

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/comments.md

Execute this command in the vantui directory to synchronize type descriptions from `vantui/types` to `vantui-docs` API props.

```bash
node ./scripts/md.js
```

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

### Button Component CSS Variables

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/config-provider/README.md

Example of CSS variables used in the Button component's primary style.

```css
.vanButton--primary {
  color: var(--buttonPrimaryColor, #fff);
  background: var(--buttonPrimaryBackgroundColor, #07c160);
  border: var(--buttonBorderWidth, 1px) solid var(
      --buttonPrimaryBorderColor,
      #07c160
    );
}
```

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

### Lazy Loading Image

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/image/README.md

Enable lazy loading for images, which start loading when they are within three screens above or below the viewport.

```javascript
<Image src="https://img.yzcdn.cn/vant/cat.jpeg" lazyLoad />
```

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

### Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/progress/README.md

Demonstrates the basic usage of the Progress component, setting the percentage.

```APIDOC
## POST /api/progress/basic

### Description
Displays the basic usage of the Progress component, setting the percentage.

### Method
POST

### Endpoint
/api/progress/basic

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **percentage** (number | string) - Required - The current progress percentage.

### Request Example
```json
{
  "percentage": "50"
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful progress update.

#### Response Example
```json
{
  "message": "Progress updated successfully"
}
```
```

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

### Basic CountUp Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/count-up/README.md

Set the start and end values for the number animation using `startVal` and `endVal` props.

```javascript
<!-- Basic usage example -->
```

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

### Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/sidebar/README.md

Demonstrates the basic usage of the Sidebar component by controlling the active item using the `activeKey` prop.

```APIDOC
## POST /api/sidebar/basic

### Description
Sets the active sidebar item.

### Method
POST

### Endpoint
/api/sidebar/basic

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **activeKey** (number) - Required - The index of the active item.

### Request Example
```json
{
  "activeKey": 0
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Active item set successfully."
}
```
```

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

### Basic Cascader Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/cascader/README.md

Demonstrates the basic usage of the Cascader component by passing an options list.

```javascript
::: $demo1 :::
```

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

### Basic Usage of DropdownMenu

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/dropdown-menu/README.md

Demonstrates the basic usage of the DropdownMenu component with two DropdownItems.

```jsx
function Demo() {
  const [state, setState] = react.useState({
    option1: [
      {
        text: '全部商品',
        value: 0,
      },
      {
        text: '新款商品',
        value: 1,
      },
      {
        text: '活动商品',
        value: 2,
      },
    ],
    option2: [
      {
        text: '默认排序',
        value: 'a',
      },
      {
        text: '好评排序',
        value: 'b',
      },
      {
        text: '销量排序',
        value: 'c',
      },
    ],
    value1: 0,
    value2: 'a',
  })
  return (
    <View>
      <DropdownMenu>
        <DropdownItem value={state.value1} options={state.option1} />
        <DropdownItem value={state.value2} options={state.option2} />
      </DropdownMenu>
    </View>
  )
}
```

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

### Grid with Spacing

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/grid/README.md

Control the spacing between grid items using the `gutter` prop. This example sets a 10px gap between items.

```jsx
function Demo() {
  return (
    <Grid gutter={10}>
      <GridItem icon="photo-o" text="文字" />
      <GridItem icon="photo-o" text="文字" />
      <GridItem icon="photo-o" text="文字" />
      <GridItem icon="photo-o" text="文字" />
    </Grid>
  )
}
```

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

### Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/swipe-cell/README.md

Demonstrates the basic implementation of the SwipeCell component.

```APIDOC
## SwipeCell - Basic Usage

### Description
This example shows how to use the SwipeCell component in its most basic form.

### Code
```js
import { SwipeCell } from '@antmjs/vantui'

// ... component implementation using SwipeCell
```

### Usage
Refer to the demo section for visual examples.
```

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

### IndexBar Component Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/index-bar/README.md

Demonstrates the basic and customized usage of the IndexBar component, including importing and integrating IndexAnchor.

```APIDOC
## IndexBar Component

### Description

Used for indexed categorization and quick positioning of lists.

### Import

Import the IndexBar and IndexAnchor components in your Taro file.

```js
import { IndexBar, IndexAnchor } from '@antmjs/vantui'
```

### Basic Usage

Clicking the index bar automatically jumps to the corresponding `IndexAnchor` position. Avoid placing IndexBar inside elements with CSS animations, as this may cause `IndexAnchor` positioning to fail.

### Customizing the Index List

You can customize the displayed index characters using the `indexList` prop.

```jsx
<View>
  <IndexBar indexList={[1,2,...]}>
    <IndexAnchor index="1">Title 1</IndexAnchor>
    <Cell title="Text" />
    <Cell title="Text" />
    <Cell title="Text" />
    <IndexAnchor index="2">Title 2</IndexAnchor>
    <Cell title="Text" />
    <Cell title="Text" />
    <Cell title="Text" />
    ...
  </IndexBar>
</View>
```

### IndexBar Props

| Parameter | Description | Type | Default | Required |
|---|---|---|---|---|
| sticky | Whether to enable automatic sticky positioning for anchors | `boolean` | `true` | `false` |
| zIndex | z-index level | `number` | `1` | `false` |
| highlightColor | Highlight color for index characters | `string` | `#07c160` | `false` |
| stickyOffsetTop | Distance from the top when anchors are automatically sticky | `number` | `0` | `false` |
| indexList | List of index characters | `string[] | number[]` | `A-Z` | `false` |
| onSelect | Triggered when a character is selected | `(event: { detail: string | number }) => void` | - | `false` |
| children | - | `ReactNode` | - | `false` |
| rectWrapper | For WeChat clients, when the element nesting level is too deep, set the className ('.xx') or id ('#xx') of a parent element that is not deeply nested, supporting the current component to obtain rect information | `string` | - | `false` |

```

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

### Define Image Data for Swiper

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/swiper/README.md

An array of image URLs to be displayed in the Swiper component. This data is commonly used for basic Swiper examples.

```common
const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-6.jpeg',
]
```

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

### Form Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/picker/README.md

Demonstrates how to integrate the Picker component within a form.

```javascript
/*
 * @Desc: Picker表单使用
 * @Date: 2023-04-19 11:10:19
 * @LastEditors: "" ""
 * @LastEditTime: "" ""
 */
import React, { useState } from 'react';
import { Picker, Cell, Toast, Form, Field } from '@antmjs/vantui';

const Index = () => {
  const [show, setshow] = useState(false);
  const [value, setvalue] = useState('');
  const [options] = useState([
    { label: '选项一', value: '1' },
    { label: '选项二', value: '2' },
    { label: '选项三', value: '3' },
  ]);

  const onConfirm = (e) => {
    setvalue(e.detail.value);
    setshow(false);
    Toast.log(e.detail.value);
  };

  const onSubmit = (e) => {
    Toast.log(e.detail);
  };

  return (
    <Form onSubmit={onSubmit}>
      <Cell
        title='选择地区'
        value={value || '请选择'}
        onClick={() => {
          setshow(true);
        }}
      />
      <Field name='area' value={value} />
      <Picker
        visible={show}
        options={options}
        value={value}
        onClose={() => {
          setshow(false);
        }}
        onConfirm={onConfirm}
      />
      <div style={{ margin: '16px' }}>
        <Button round block type='primary' nativeType='submit'>
          提交
        </Button>
      </div>
    </Form>
  );
};

export default Index;

```

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

### Badge Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/badge/README.md

Demonstrates the basic usage of the Badge component. Passing an empty string to the 'content' prop enables dot mode.

```APIDOC
## Badge Basic Usage

### Description
Displays a badge with content or a dot.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```jsx
<Badge content="5">Some Content</Badge>
<Badge content="">Some Content</Badge> // Dot mode
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

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

### Horizontal Content Alignment

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/grid/README.md

Arrange grid item content horizontally by setting the `direction` prop to 'horizontal'. This example also sets `columnNum` to 2.

```jsx
function Demo() {
  return (
    <Grid direction="horizontal" columnNum="2">
      <GridItem icon="photo-o" text="文字" />
      <GridItem icon="photo-o" text="文字" />
      <GridItem icon="photo-o" text="文字" />
      <GridItem icon="photo-o" text="文字" />
    </Grid>
  )
}
```

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

### Import Grid and GridItem Components

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/grid/README.md

Import the Grid and GridItem components in your Taro file. This component is supported starting from Vant Weapp version 1.0.

```javascript
import { Grid, GridItem } from '@antmjs/vantui'
```

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

### Custom Radio Button Icon Size

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/radio/README.md

Adjust the size of the radio button icon using the 'iconSize' prop. This example also sets the shape to square.

```jsx
function Demo() {
  const [value, setValue] = react.useState('1')
  return (
    <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>
      <Radio name="1" iconSize="24px" shape="square">
        单选框 1
      </Radio>
      <Radio name="2" iconSize="24px" shape="square">
        单选框 2
      </Radio>
    </RadioGroup>
  )
}
```

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

### Basic Image Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/image/README.md

Demonstrates the basic usage of the Image component.

```javascript
<Image src="https://img.yzcdn.cn/vant/cat.jpeg" />
```

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

### Manually Control CountUp Animation

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/count-up/README.md

Access the component instance via `ref` to manually control the animation using `start`, `pause`, `resume`, and `reset` methods.

```javascript
<!-- Example of manual control -->
```

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

### Custom Grid Content with Slots

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/grid/README.md

Utilize slots to customize the content displayed within each grid item. This example maps over an array to create multiple items with images.

```jsx
function Demo() {
  return (
    <Grid columnNum="3" border={false}>
      {[1, 2, 3].map((item, index) => (
        <GridItem key={index} forItem="index">
          <Image
            style="width: 100%; height: 90px;"
            src={`https://img.yzcdn.cn/vant/apple-${index + 1}.jpg`}
          />
        </GridItem>
      ))}
    </Grid>
  )
}
```

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

### Basic Highlight Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/highlight/README.md

Use the `keywords` and `sourceString` props to specify the text to highlight and the source text, respectively. This is the most basic way to use the Highlight component.

```javascript
Highlight({
  keywords: 'keyword',
  sourceString: 'This is the source string with a keyword.'
})
```

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

### Custom Radio Button Icons

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/radio/README.md

Replace the default radio icon with a custom component using the 'renderIcon' prop. The example dynamically changes the icon based on the selected value.

```jsx
function Demo() {
  const [value, setValue] = react.useState('1')
  return (
    <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>
      <Radio
        name="1"
        renderIcon={
          <Image
            style={{ width: '32px', height: '32px' }}
            src={
              value === '2'
                ? 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png'
                : 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
            }
          />
        }
        shape="square"
      >
        单选框 1
      </Radio>
      <Radio
        name="2"
        renderIcon={
          <Image
            style={{ width: '32px', height: '32px' }}
            src={
              value === '1'
                ? 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png'
                : 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
            }
          />
        }
        shape="square"
      >
        单选框 2
      </Radio>
    </RadioGroup>
  )
}
```

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

### Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/picker/README.md

Demonstrates the basic usage of the Picker component. As of v3.5.0, new properties like `mode` and `onInput` have been added, but the previous `mode` === `normal` flat display and usage are still supported.

```javascript
/*
 * @Desc: Picker基础用法
 * @Date: 2023-04-19 11:10:19
 * @LastEditors: "" ""
 * @LastEditTime: "" ""
 */
import React, { useState } from 'react';
import { Picker, Cell, Toast } from '@antmjs/vantui';

const Index = () => {
  const [show, setshow] = useState(false);
  const [value, setvalue] = useState('');
  const [options] = useState([
    { label: '选项一', value: '1' },
    { label: '选项二', value: '2' },
    { label: '选项三', value: '3' },
  ]);

  const onConfirm = (e) => {
    setvalue(e.detail.value);
    setshow(false);
    Toast.log(e.detail.value);
  };

  return (
    <>
      <Cell
        title="选择地区"
        value={value || '请选择'}
        onClick={() => {
          setshow(true);
        }}
      />
      <Picker
        visible={show}
        options={options}
        value={value}
        onClose={() => {
          setshow(false);
        }}
        onConfirm={onConfirm}
      />
    </>
  );
};

export default Index;

```

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

### Custom Radio Button Color

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/radio/README.md

Customize the color of the checked radio button icon using the 'checkedColor' prop. This example also uses the 'shape' prop for square radio buttons.

```jsx
function Demo() {
  const [value, setValue] = react.useState('1')
  return (
    <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>
      <Radio name="1" checkedColor="#07c160" shape="square">
        单选框 1
      </Radio>
      <Radio name="2" checkedColor="#07c160" shape="square">
        单选框 2
      </Radio>
    </RadioGroup>
  )
}
```

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

### Webpack Configuration for Modifying Less Variables

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/theme.md

Use Less's modifyVars option in your webpack configuration to override Less variables. This example shows how to set text and border colors.

```javascript
// webpack.config.js
module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        // ...other loader configurations
        {
          loader: 'less-loader',
          options: {
            // If less-loader version is less than 6.0, remove the lessOptions level and configure options directly.
            lessOptions: {
              modifyVars: {
                // Directly override variables
                'text-color': '#111',
                'border-color': '#eee',
                // Or override through a less file (file path must be absolute)
                hack: `true; @import "your-less-file-path.less";`,
              },
            },
          },
        },
      ],
    },
  ],
}
```

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

### Basic Usage of Notify

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/notify/README.md

Demonstrates the basic usage of the Notify component. Ensure the Notify component is imported before use.

```js
import { Notify } from 'vantui'
```

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

### Disable Radio Label Click

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/radio/README.md

Prevent the radio button's label text from being clickable by setting the 'labelDisabled' prop to true on the Radio component. This example also uses horizontal layout.

```jsx
function Demo() {
  const [value, setValue] = react.useState('1')
  return (
    <RadioGroup
      direction="horizontal"
      value={value}
      onChange={(e) => setValue(e.detail)}
    >
      <Radio name="1" labelDisabled>
        单选框 1
      </Radio>
      <Radio name="2" labelDisabled>
        单选框 2
      </Radio>
    </RadioGroup>
  )
}
```

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

### Build Component Library with Vantui CLI

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui-cli/README.md

Use the 'build' command to directly generate es & lib files for your component library. For development, use 'watch' to monitor source file changes.

```shell
antm-vantui-cli build
```

```shell
antm-vantui-cli watch
```

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

### Taro Configuration for VantUI Style Compatibility

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/quickstart.md

Adjust Taro's designWidth configuration dynamically to ensure VantUI component styles render correctly, especially when integrating with other libraries or custom setups.

```javascript
config = {
  designWidth(input) {
    if (input.file.replace(/\\+/g, '/').indexOf('@antmjs/vantui') > -1) {
      return 750
    }
    return 375
  },
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1,
  },
}
```

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

### Importing FormRender

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/form-render/README.md

How to import the FormRender and Form components from VantUI.

```APIDOC
## Importing Form Components

### Description
Import the necessary components for using FormRender.

### Code Example

```tsx
import { FormRender, Form } from '@antmjs/vantui'
```
```

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

### Configure Webpack for Vant UI and Taro

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/use-in-react.md

Customize your webpack.config.js to alias module paths for Taro components and React, and configure Babel presets for transpilation. This setup ensures compatibility and optimal performance.

```js
{
  resolve: {
    mainFields: [
      'main:h5',
      'browser',
      'module',
      'jsnext:main',
      'main',
    ],
    alias: {
      // 默认@tarojs/components要指向dist-h5/react，而loader和taro-components.css要直接指向@tarojs/components就行
      // 理论上还有优化的空间，慢慢来，持续迭代
      '@tarojs/components/dist/taro-components/taro-components.css': path.resolve(process.cwd(), './node_modules/@tarojs/components/dist/taro-components/taro-components.css'),
      '@tarojs/components/loader': path.resolve(process.cwd(), './node_modules/@tarojs/components/loader'),
      '@tarojs/components': path.resolve(process.cwd(), './node_modules/@tarojs/components/dist-h5/react'),
      react: path.resolve(process.cwd(), './node_modules/react'),
      'react-dom': path.resolve(process.cwd(), './node_modules/react-dom'),
    },
  },
  module: {
    rules: [
      {
        // 这里其实可以在自己的webpack内配置，核心就是匹配到test的部分不触发polyfill，仅仅更新下语法就行，否则会报错
        test: /node_modules[\\/]@tarojs(.+?)\.[tj]sx?$/i,
        loader: require.resolve('babel-loader'),
        options: {
          presets: [
            [
              '@antmjs/babel-preset',
              {
                presets: {
                  env: {
                    debug: false,

                    /**
                     * false: 不处理polyfill，自己手动引入【全量】
                     * usage: 按需加载 polyfill，且不需要手动引入【按需】
                     * entry: 必须手动引入，但会根据设置的目标环境全量导入【按环境全量】
                     * 注：在 Babel 7.4.0 之后的版本，Babel官方明确建议了不再使用 @babel/polyfill ，建议使用 core-js/stable 和 regenerator-runtime/runtime。本包已经安装了core-js、@babel/plugin-transform-runtime和@babel/runtime，所以选择false或者entry选项的只需要在主文件顶部引入core-js即可
                     */
                    useBuiltIns: false,
                    corejs: false,
                    modules: false, // 对es6的模块文件不做转译，以便使用tree shaking、sideEffects等
                  },
                  react: {
                    runtime: 'automatic',
                  },
                  typescript: {
                    isTSX: true,
                    jsxPragma: 'React',
                    allExtensions: true,
                    allowNamespaces: true,
                  },
                },
                decorators: {
                  legacy: false,
                  decoratorsBeforeExport: false,
                },
                classProperties: {
                  loose: false,
                },
                runtime: {
                  absoluteRuntime: path.dirname(
                    require.resolve(
                      '@babel/runtime-corejs3/package.json',
                    ),
                  ),
                  version: require('@babel/runtime-corejs3/package.json')
                    .version,
                  corejs: false,
                  helpers: true, // 使用到@babel/runtime
                  regenerator: true, // 使用到@babel/runtime
                  useESModules: false,
                },
                exclude: [/@babel[/|\\]runtime/, /core-js/],
              },
            ],
          ],
        },
      },
      {
        // 可以参考Taro的自适应方案
        test: /\.less$/,
        use: [
          // 这里展示的是组件核心需要的loader，其他loader请自行添加
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-pxtransform')({
                  platform: 'h5',
                  designWidth: 750,
                })
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // 为了使移动H5和Taro小程序保持同一套组件，原因在介绍有说明，所以这里需要把Taro内置的一些插件属性给加进来
    new webpack.DefinePlugin({
      ENABLE_INNER_HTML: true,
      ENABLE_ADJACENT_HTML: true,
      ENABLE_TEMPLATE_CONTENT: true,
      ENABLE_CLONE_NODE: true,
      ENABLE_SIZE_APIS: false,
    }),
    new webpack.EnvironmentPlugin({
      LIBRARY_ENV: 'react',
      TARO_ENV: 'h5',
    }),
    // const VantUIPlugin = require('@antmjs/plugin-vantui')
    // 如果用的就是750，则不需要添加该插件了
    new VantUIPlugin({
      designWidth: 750,
      deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
      },
    }),
  ],
}
```

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

### DropdownMenu Instance Methods

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/dropdown-menu/README.md

Methods available on the DropdownMenu component instance, accessible via ref.

```APIDOC
## DropdownMenu Instance Methods

### Description
Methods available through the component's ref.

### Method
`toggle`

### Endpoint
None (Instance Method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None

### Methods
- **toggle** ((show?: boolean, options?: { immediate: boolean }) => void) - Controls the opening/closing of the menu bar. `show` determines whether to open. `options.immediate` controls whether the animation is skipped.
```

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

### VantUI Unit Size Conversion Configuration

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/docs/quickstart.md

Configure designWidth and deviceRatio in Taro's config file for VantUI's unit size conversion. This example sets designWidth to 750 for VantUI components.

```json
{
  "designWidth": 750,
  "deviceRatio": {
    "640": 2.34 / 2,
    "750": 1,
    "828": 1.81 / 2
  }
}
```

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

### Basic Usage of SubmitBar

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/submit-bar/README.md

Demonstrates the basic usage of the SubmitBar component with price and button text.

```jsx
function Demo() {
  return (
    <SubmitBar
      price={3050}
      buttonText="提交订单"
      onSubmit={() => console.info('提交')}
    />
  )
}
```

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

### Programmatic Open

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/swipe-cell/README.md

Demonstrates how to programmatically open the SwipeCell component.

```APIDOC
## SwipeCell - Programmatic Open

### Description
This example shows how to programmatically control the opening of the SwipeCell.

### Methods
- **open(position: 'left' | 'right')**: Opens the SwipeCell to the specified side.

### Usage
This method is useful for triggering swipe actions through other UI elements or logic.
```

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

### Import Transition Component

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/transition/README.md

Import the Transition component from the '@antmjs/vantui' library for use in your Taro files.

```javascript
import { Transition } from '@antmjs/vantui'
```

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

### Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/rate/README.md

Demonstrates the basic usage of the Rate component.

```jsx
import React, { useState } from 'react';
import { Rate } from '@antmjs/vantui';

function Demo() {
  const [value, setValue] = useState(3);
  return <Rate value={value} onChange={(e) => setValue(e.detail)} />;
}
```

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

### Import Collapse Component

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/collapse/README.md

Import the Collapse and CollapseItem components in your Taro file.

```javascript
import { Collapse, CollapseItem } from '@antmjs/vantui'
```

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

### Notify - Basic Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/notify/README.md

Demonstrates the basic usage of the Notify component.

```APIDOC
## POST /api/notify

### Description
Displays a basic message prompt at the top of the page.

### Method
POST

### Endpoint
/api/notify

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **message** (string) - Required - The message content to display.
- **duration** (number) - Optional - The duration in milliseconds for which the notification will be displayed.

### Request Example
```json
{
  "message": "This is a basic notification.",
  "duration": 3000
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success status of the operation.

#### Response Example
```json
{
  "status": "success"
}
```
```

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

### Basic Stepper Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/stepper/README.md

Use the 'value' prop to set the initial input value and listen for changes using the 'change' event.

```jsx
function Demo() {
  return <Stepper value={1} />
}
```

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

### Basic Tab Usage

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/tab/README.md

Demonstrates the basic usage of the Tab component. Use the 'active' prop to set the initially active tab index.

```javascript
{
  data() {
    return {
      active: 0
    }
  }
}
```

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

### Basic Usage of Layout

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/col/README.md

Demonstrates the basic usage of the Layout component, utilizing a 24-column grid system with `span` and `offset` properties on the `Col` component.

```APIDOC
## Basic Usage

The Layout component uses a 24-column grid system. You can set the width of a column by adding the `span` attribute to the `Col` component. The `offset` attribute can be used to set the offset width of a column, calculated the same way as `span`.

### ColProps

| Parameter | Description | Type | Default | Required |
|---|---|---|---|---|
| span | Column width | `number` | - | `true` |
| offset | Column offset distance | `number` | - | `false` |
| children | - | `React.ReactNode` | - | `true` |
```

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

### Import Highlight Component

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/highlight/README.md

Import the Highlight component from the @antmjs/vantui package in your Taro files.

```js
import { Highlight } from '@antmjs/vantui'
```

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

### Release Configuration

Source: https://github.com/antmjs/vantui/blob/main/README.md

Configuration for the release process, including git authentication and webhook tokens. Ensure the temp.js file is created in the root directory.

```javascript
module.exports = {
  gitAuth: 'xxxx', // git token
  webhooksToken:
    'xxx', // 钉钉
}
```

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

### 引入 Progress 组件

Source: https://github.com/antmjs/vantui/blob/main/packages/vantui/src/progress/README.md

在 Taro 文件中引入 Progress 组件。

```js
import { Progress } from '@antmjs/vantui'
```