### Icon Component Examples

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Icon/index.md

Examples demonstrating how to use the Icon component.

```APIDOC
### Basic Usage

```xml
<ant-icon type="SmileOutline" />
```

### Custom Size and Color

```xml
<ant-icon type="SmileOutline" style="font-size: 20px" />
<ant-icon type="SmileOutline" style="color: red" />
```
```

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

### Install antd-mini for Alipay Applet

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/using-uni-app.en.md

Commands to create a directory, initialize npm, and install antd-mini for use in Alipay applets.

```shell
mkdir mycomponents
cd mycomponents

# 安装依赖
npm init -y
npm i antd-mini --save
```

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

### Install Project Dependencies

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/contribute.en.md

Run this command in the project root to install all necessary npm dependencies.

```bash
npm i
```

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

### Install antd-mini for WeChat Applet

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/using-uni-app.en.md

Commands to create a directory, initialize npm, and install antd-mini for use in WeChat applets.

```shell
mkdir wxcomponents
cd wxcomponents

# 安装依赖
npm init -y
npm i antd-mini --save
```

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

### Install Ant Design Mini

Source: https://github.com/ant-design/ant-design-mini/blob/master/README.md

Install Ant Design Mini using npm, yarn, pnpm, or bun.

```bash
$ npm install antd-mini
# or
$ yarn add antd-mini
# or
$ pnpm add antd-mini
# or
$ bun add antd-mini
```

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

### Install WeChat Applet Dependencies

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/contribute.en.md

Navigate to the WeChat applet directory and install its specific dependencies.

```bash
cd compiled/wechat
npm i
```

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

### Basic Use

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/Welcome/index.en.md

Example of how to use the Welcome component with basic properties.

```APIDOC
## Basic Use

### Description
Example of how to use the Welcome component with basic properties.

### Request Example
<ant-welcome title="👋🏻 你好，我是 Ant Design X" description="基于 Ant Design 的 AGI 产品界面解决方案，创造更美好的智能视界～" />
```

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

### Basic Image Uploader Setup

Source: https://context7.com/ant-design/ant-design-mini/llms.txt

A basic ImageUpload component setup using default file list and common event handlers.

```xml
<!-- Basic image uploader -->
<ant-uploader
  defaultFileList="{{defaultImages}}"
  uploadingText="Uploading..."
  uploadfailedText="Upload failed"
  onBeforeUpload="handleBeforeUpload"
  onUpload="handleUpload"
  onPreview="handlePreview"
  onChange="handleFileChange" />
```

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

### Install Ant Design Mini

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/quick-start.en.md

Use npm to install the Ant Design Mini library. This is the initial step for integrating the components.

```shell
$ npm i antd-mini --save
```

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

### Start Project Compilation

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/contribute.en.md

Execute this command to compile the source code into the 'compiled' directory.

```bash
npm run dev
```

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

### NumberKeyboard Demo Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/NumberKeyboard/index.md

A comprehensive demo showcasing various features and configurations of the Ant Design Mini NumberKeyboard component. This example serves as a reference for different use cases.

```javascript
import React from 'react';
import { View, Text, Button } from '@tarojs/components';
import AntNumberKeyboard from '@ant-design/ant-design-mini/es/NumberKeyboard';

const NumberKeyboardDemoPage = () => {
  const [visible1, setVisible1] = React.useState(false);
  const [visible2, setVisible2] = React.useState(false);
  const [visible3, setVisible3] = React.useState(false);
  const [value1, setValue1] = React.useState('');
  const [value2, setValue2] = React.useState('');

  const handleInput1 = (val) => {
    setValue1(value1 + val);
  };

  const handleDelete1 = () => {
    setValue1(value1.slice(0, -1));
  };

  const handleConfirm1 = () => {
    console.log('Confirm value 1:', value1);
    setVisible1(false);
  };

  const handleInput2 = (val) => {
    setValue2(value2 + val);
  };

  const handleDelete2 = () => {
    setValue2(value2.slice(0, -1));
  };

  const handleConfirm2 = () => {
    console.log('Confirm value 2:', value2);
    setVisible2(false);
  };

  return (
    <View>
      <View>
        <Text>Default Keyboard:</Text>
        <Button onClick={() => setVisible1(true)}>Show Keyboard</Button>
        <AntNumberKeyboard
          visible={visible1}
          onClose={() => setVisible1(false)}
          onConfirm={handleConfirm1}
          onInput={handleInput1}
          onDelete={handleDelete1}
          value={value1}
        />
      </View>

      <View style={{ marginTop: '20px' }}>
        <Text>Keyboard without Decimal:</Text>
        <Button onClick={() => setVisible2(true)}>Show Keyboard</Button>
        <AntNumberKeyboard
          visible={visible2}
          onClose={() => setVisible2(false)}
          onConfirm={handleConfirm2}
          onInput={handleInput2}
          onDelete={handleDelete2}
          value={value2}
          point={false}
        />
      </View>

      <View style={{ marginTop: '20px' }}>
        <Text>Keyboard with Custom Confirm Button:</Text>
        <Button onClick={() => setVisible3(true)}>Show Keyboard</Button>
        <AntNumberKeyboard
          visible={visible3}
          onClose={() => setVisible3(false)}
          confirmText="Done"
        >
          <View slot="confirm" style={{ padding: '10px', backgroundColor: '#f0f0f0' }}>
            Custom Confirm
          </View>
        </AntNumberKeyboard>
      </View>
    </View>
  );
};

export default NumberKeyboardDemoPage;
```

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

### Empty Component Usage Examples

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Empty/index.md

Examples demonstrating how to use the Ant Design Mini Empty component with different configurations.

```APIDOC
## Empty Component Usage Examples

### Basic Usage

```xml
<ant-empty
  size="small"
  title="Nothing Here"
  message="See Others"
/>
```

### Custom Image

```xml
<ant-empty
  title="Nothing Here"
  message="See Others"
  image="{{imageUrl}}"
/>
```

### With Action Button

```xml
<ant-empty
  title="Nothing Here"
  message="See Others"
  buttonInfo="{{horizontalButtonInfo}}"
#if ALIPAY
  onClickButton="onClickButton"
#endif
#if WECHAT
  bindclickbutton="onClickButton"
#endif
/>
```

```js
const BUTTON_LIST = [
  {
    type: 'primary',
    text: 'refresh',
  },
  {
    type: 'default',
    text: 'checkout internet',
  },
];

Page({
  data: {
    // Horizontal button layout
    horizontalButtonInfo: {
      layout: 'horizontal',
      list: BUTTON_LIST,
    },
    // Vertical button layout
    verticalButtonInfo: {
      layout: 'vertical',
      list: BUTTON_LIST,
    },
  },
});
```

### Using Slots

```xml
<ant-empty
  title="Nothing Here"
  message="See Others"
>
  <view slot="extra">
    <ant-button
      size="small"
      inline
    >
      Custom Action Button
    </ant-button>
  </view>
</ant-empty>
```
```

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

### Basic Postscript Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Postscript/index.md

This example demonstrates the basic integration and usage of the Postscript component. Ensure the component is imported correctly.

```javascript
Page({
  // ...
  onPostscriptChange(value) {
    console.log('Postscript value changed:', value);
  }
});
```

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

### Basic Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/NumberKeyboard/index.md

Examples demonstrating the basic usage of the NumberKeyboard component.

```APIDOC
## Basic Usage

### Default Keyboard
```xml
<ant-number-keyboard visible="{{visible}}" />
```

### Keyboard without Decimal Point
```xml
<ant-number-keyboard point="{{false}}" visible="{{visible}}" />
```

### Keyboard with Confirm Button
```xml
<ant-number-keyboard confirmText="confirm" visible="{{visible}}" />
```

### Keyboard with Close Arrow
```xml
<ant-number-keyboard closeable="{{true}}" visible="{{visible}}" />
```

### Random Order Keyboard
```xml
<ant-number-keyboard random="{{true}}" visible="{{visible}}" />
```

### Custom Buttons
#### Custom Header
```xml
<ant-number-keyboard visible="{{visible}}" >
  <view
      slot="header"
      class="number-keyboard-header"
    >
      Custom Title
    </view>
</ant-number-keyboard>
```

#### Custom Confirm Button
```xml
<ant-number-keyboard visible="{{visible}}" >
  <view
    slot="confirm"
    class="number-keyboard-confirm"
  >
    <!-- Custom confirm button -->
    <ant-icon type="DownOutline"></ant-icon>
  </view>
</ant-number-keyboard>
```
```

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

### Install Ant Design Mini for Alipay Mini Programs

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/using-uni-app.md

Create a 'mycomponents' directory and install antd-mini using npm. This is required for using antd-mini components in Alipay mini-programs.

```shell
mkdir mycomponents
cd mycomponents

# Install dependencies
npm init -y
npm i antd-mini --save
```

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

### Landscape Mode Examples

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/Prompts/index.en.md

Provides examples of configuring the Prompts component for landscape mode, including horizontal scrolling and line wrapping.

```APIDOC
## Landscape Mode

### Description

These examples showcase how to configure the Prompts component to display items in a landscape orientation, suitable for wider screens or specific layout requirements. Options include horizontal scrolling and automatic line wrapping.

### Horizontal Scrolling

```xml
<ant-prompts
  title="超长滑动"
  items="{{ horizontalList }}"
  vertical="{{false}}"
/>
```

### Horizontal with Line Wrap

```xml
<ant-prompts
  title="超长换行"
  items="{{ horizontalList }}"
  vertical="{{false}}"
  wrap
/>
```

### Custom Landscape Item

```xml
<ant-prompts
  title="自定义"
  items="{{ horizontalList }}"
  vertical="{{false}}"
  wrap
>
  <view slot="prompts-item" slot-scope="props">Custom:{{ props.item.label}}</view>
</ant-prompts>
```
```

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

### Basic Use Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/Prompts/index.en.md

Demonstrates the fundamental usage of the Prompts component with a list of items and a title.

```APIDOC
## Basic Use

### Description

This example shows how to integrate the Prompts component into your page, providing a list of suggested actions or questions for the user.

### Component Usage

```xml
<ant-prompts
  items="{{baseList}}"
  title="{{promptsTitle}}"
#if ALIPAY
  onItemTap="onItemTap"
#endif
#if WECHAT
  binditemtap="onItemTap"
#endif
/>
```

### JavaScript Data

```js
Page({
  data: {
    promptsTitle: '我可以帮您：',
    baseList: [
      {
        title: 'Ant Design X 全新升级了什么？',
      },
      {
        title: 'Ant Design X 组件资产内容',
      },
      {
        title: '快速实现安装和Introduction组件',
      },
    ],
  },
  onItemTap(item) {
    let item = i;
#if ALIPAY
    my.alert({
      content: `点击了 ${item.title || ''} ${item.content || ''}`,
    });
#endif
#if WECHAT
    item = i.detail;
    wx.showToast({ title: `点击了 ${item.title || ''} ${item.content || ''}` });
#endif
  },
});
```
```

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

### Tip with Arrow Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/Prompts/index.en.md

Illustrates how to configure prompts with an arrow indicator and associated images and content.

```APIDOC
## Tip with Arrow

### Description

This example demonstrates how to use the `showArrow` property to add visual cues to prompt items, making them more interactive and informative.

### Component Usage

```xml
<ant-prompts
  items="{{ arrowList }}"
  title="{{ promptsTitle }}"
/>
```

### JavaScript Data

```js
Page({
  data: {
    promptsTitle: '我可以帮您：',
    arrowList: [
      {
        showArrow: true,
        title: '热门话题:',
        image:
          'https://mdn.alipayobjects.com/huamei_upibrs/afts/img/A*wJ5aRpr2q1wAAAAAAAAAAAAADkx8AQ/original',
        content: 'Ant Design X 全新升级',
      },
      {
        showArrow: true,
        title: '组件查询:',
        image:
          'https://mdn.alipayobjects.com/huamei_upibrs/afts/img/A*R9L1RLo4x58AAAAAAAAAAAAADkx8AQ/original',
        content: '欢迎组件',
      },
      {
        showArrow: true,
        title: '新手帮助:',
        image:
          'https://mdn.alipayobjects.com/huamei_upibrs/afts/img/A*7eRqQ4JpdccAAAAAAAAAAAAADkx8AQ/original',
        content: '如何实现快速安装和Introduction',
      },
    ],
  },
});
```
```

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

### Basic Usage Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/SwipeAction/index.md

Demonstrates the basic implementation of the SwipeAction component with right-aligned buttons.

```APIDOC
## Basic Usage Example

### Description
Demonstrates the basic implementation of the SwipeAction component with right-aligned buttons.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Body Example
```xml
<ant-swipe-action
  rightButtons="{{\"[[
      {
        text: 'favor',
        bgColor: '#CCCCCC',
        color: '#fff',
        width: 200,
      },
      {
        text: 'rest',
        bgColor: '#1677FF',
        color: '#fff',
        width: 170,
      },
      {
        text: 'delete',
        bgColor: '#FF2B00',
        color: '#fff',
        width: 140,
      },
    ]]"}}"
    elasticity="{{true}}"
    swiped="{{swipeIndex === index}}"
    onSwipeEnd="onSwipeEnd"
    onSwipeStart="onSwipeStart"
    onButtonTap="onButtonTap">
  <view>Right side - three buttons</view>
</ant-swipe-action>
```

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

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

### NumberKeyboard Number Input Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/NumberKeyboard/index.md

Demonstrates integrating the NumberKeyboard with a number input field. This example likely handles input value updates and keyboard visibility.

```javascript
import React from 'react';
import { View, Text, Input, Button } from '@tarojs/components';
import AntNumberKeyboard from '@ant-design/ant-design-mini/es/NumberKeyboard';

const NumberKeyboardNumberPage = () => {
  const [visible, setVisible] = React.useState(false);
  const [value, setValue] = React.useState('');

  const handleInput = (val) => {
    setValue(value + val);
  };

  const handleDelete = () => {
    setValue(value.slice(0, -1));
  };

  const handleConfirm = () => {
    console.log('Confirm value:', value);
    setVisible(false);
  };

  return (
    <View>
      <Input
        value={value}
        onFocus={() => setVisible(true)}
        placeholder="Enter number"
      />
      <AntNumberKeyboard
        visible={visible}
        onClose={() => setVisible(false)}
        onConfirm={handleConfirm}
        onInput={handleInput}
        onDelete={handleDelete}
      />
    </View>
  );
};

export default NumberKeyboardNumberPage;
```

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

### Form Layout Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Form/index.md

Illustrates different layout options for the Form component.

```javascript
import { Form } from 'antd-mini/es/Form/form';

Page({
  onInit() {
    this.form = new Form();
  },
  handleRef(ref) {
    this.form.addItem(ref);
  },
});
```

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

### Install Ant Design Mini for WeChat Mini Programs

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/using-uni-app.md

Create a 'wxcomponents' directory and install antd-mini using npm. This is the initial step for using antd-mini components in WeChat mini-programs.

```shell
mkdir wxcomponents
cd wxcomponents

# Install dependencies
npm init -y
npm i antd-mini --save
```

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

### NumberKeyboard Code Input Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/NumberKeyboard/index.md

Illustrates using the NumberKeyboard for a code input scenario, likely for verification codes. This example manages input and display for a fixed number of digits.

```javascript
import React from 'react';
import { View, Text, Input, Button } from '@tarojs/components';
import AntNumberKeyboard from '@ant-design/ant-design-mini/es/NumberKeyboard';

const NumberKeyboardCodePage = () => {
  const [visible, setVisible] = React.useState(false);
  const [code, setCode] = React.useState('');
  const codeLength = 6;

  const handleInput = (val) => {
    if (code.length < codeLength) {
      setCode(code + val);
    }
  };

  const handleDelete = () => {
    setCode(code.slice(0, -1));
  };

  const handleConfirm = () => {
    console.log('Confirm code:', code);
    setVisible(false);
  };

  return (
    <View>
      <View>
        <Text>Please enter the verification code:</Text>
        <Input
          value={code}
          onFocus={() => setVisible(true)}
          disabled
          placeholder="- - - - - -"
        />
      </View>
      <AntNumberKeyboard
        visible={visible}
        onClose={() => setVisible(false)}
        onConfirm={handleConfirm}
        onInput={handleInput}
        onDelete={handleDelete}
        point={false} // Typically no decimal for verification codes
      />
    </View>
  );
};

export default NumberKeyboardCodePage;
```

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

### Basic Usage Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/ThoughtChain/index.md

Demonstrates the basic rendering of multiple nodes in the ThoughtChain component.

```APIDOC
## Basic Usage Example

### Description
This example renders multiple nodes.

### XML
```xml
<ant-thought-chain items="{{basicList}}" onContentTap="onContentTap" collapsible="{{true}}">
</ant-thought-chain>
```

### JavaScript
```javascript
Page({
  data: {
    basicList: [
      {
        title: '理解问题',
        content: '3A游戏',
        icon: 'CheckCircleOutline'
      },
      {
        title: '没有在本地找到结果',
        content: '当前主流显卡',
        icon: 'CheckCircleOutline'
      },
      {
        title: '在互联网上搜索问题',
        content: '黑神话悟空所需显卡',
        icon: 'MoreOutline',
      },
    ],
  },
  onContentTap(e) {
    const { content } = e.currentTarget.dataset || {};
    my.alert({
      content: `点击了内容「${content}」`,
    });
  },
});
```
```

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

### Voucher Component Setup

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Voucher/index.md

Instructions on how to import and use the Voucher component in your project's JSON configuration.

```APIDOC
## Importing the Voucher Component

In your `index.json` file, introduce the component using the following configuration:

```json
"usingComponents": {
#if ALIPAY
  "ant-voucher": "antd-mini/es/Voucher/index"
#endif
#if WECHAT
  "ant-voucher": "antd-mini/Voucher/index"
#endif
}
```
```

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

### Space Component Usage Examples

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Space/index.md

Illustrates various ways to use the Space component with different configurations.

```APIDOC
## Space Component Usage Examples

### Basic Usage

```xml
<ant-space>
  <ant-button type="primary">按钮1</ant-button>
  <ant-button>按钮2</ant-button>
  <ant-button>按钮3</ant-button>
</ant-space>
```

### Vertical Spacing

```xml
<ant-space direction="vertical">
  <ant-button type="primary">按钮1</ant-button>
  <ant-button>按钮2</ant-button>
  <ant-button>按钮3</ant-button>
</ant-space>
```

### Spacing Size

```xml
<ant-space size="small">
  <ant-button type="primary">按钮1</ant-button>
  <ant-button>按钮2</ant-button>
  <ant-button>按钮3</ant-button>
</ant-space>
```

### Alignment

```xml
<ant-space align="start">
  <ant-button type="primary">按钮1</ant-button>
  <view class="custom-box">高度不同的内容</view>
  <ant-button>按钮3</ant-button>
</ant-space>
```

### Automatic Wrapping

```xml
<ant-space wrap>
  <ant-button type="primary">按钮1</ant-button>
  <ant-button>按钮2</ant-button>
  <ant-button>按钮3</ant-button>
  <ant-button>按钮4</ant-button>
  <ant-button>按钮5</ant-button>
</ant-space>
```
```

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

### Basic Checkbox Example

Source: https://context7.com/ant-design/ant-design-mini/llms.txt

Implement a basic checkbox for user agreement, with an `onChange` handler to track its state.

```xml
<!-- Basic checkbox -->
<ant-checkbox
  checked="{{isChecked}}"
  onChange="handleCheckChange">
  Accept terms and conditions
</ant-checkbox>
```

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

### Basic Use Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/PageContainer/index.en.md

Demonstrates the basic usage of the PageContainer component with common properties.

```APIDOC
## Basic Use

### Description
Demonstrates the basic usage of the PageContainer component with common properties.

### Method
None (Component Usage)

### Endpoint
None (Component Usage)

### Request Example
```xml
<ant-page
  loading="{{loading}}"
  status="{{status}}"
  title="{{title}}"
  message="{{message}}"
  image="{{image}}"
  safeArea="{{safeArea}}"
  loadingColor="#ccc"
  loadingSize="medium"
  loadingType="spin"
  actionText="refresh"
  secondaryActionText="internet error"
  onActionTap="handleRefresh"
  onSecondaryActionTap="handleSwitchToDisconnected"
>
  <view class="content">
   minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </view>
</ant-page>
```

### Response
None (Component Usage)

### JavaScript Example
```javascript
Page({
  data: {
    loading: true,
    status: 'failed',
    safeArea: 'both',
  },
  onLoad() {
    setTimeout(() => {
      this.setData({
        loading: false,
      });
    }, 1000);
  },
  handleRefresh() {
    my.reLaunch({
      url: 'index',
      fail(e) {
        console.log(e);
      },
    });
  },
  handleSwitchToDisconnected() {
    this.setData({
      status: 'disconnected',
      title: undefined,
      message: undefined,
      image: '',
    });
  },
});
```
```

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

### Form Layout Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Form/index.en.md

Illustrates different layout options for the Form component, including label positioning and alignment.

```javascript
import React from 'react';
import {
  Form,
  FormItem,
  Input,
  Radio,
  Checkbox,
  Button,
  Toast,
} from '@alifd/next';

const FormLayout = () => {
  const [form] = Form.useForm();

  const handleSubmit = () => {
    form.submit((values) => {
      Toast.toast({
        content: 'Submit Success',
      });
      console.log('Submit values:', values);
    });
  };

  return (
    <Form form={form} labelAlign="top" labelTextAlign="left">
      <FormItem label="用户名:" name="username">
        <Input placeholder="请输入用户名" />
      </FormItem>
      <FormItem label="密码:" name="password">
        <Input.Password placeholder="请输入密码" />
      </FormItem>
      <FormItem label="性别:" name="gender">
        <Radio.Group>
          <Radio value="male">男</Radio>
          <Radio value="female">女</Radio>
        </Radio.Group>
      </FormItem>
      <FormItem label="爱好:" name="hobby">
        <Checkbox.Group>
          <Checkbox value="reading">阅读</Checkbox>
          <Checkbox value="sports">运动</Checkbox>
          <Checkbox value="music">音乐</Checkbox>
        </Checkbox.Group>
      </FormItem>
      <FormItem>
        <Button type="primary" onClick={handleSubmit}>
          提交
        </Button>
      </FormItem>
    </Form>
  );
};

export default FormLayout;
```

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

### Basic Container Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Container/index.en.md

A basic example of using the ant-container component with a simple title.

```xml
<ant-container title="Title">
  <view class="content" />
</ant-container>
```

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

### Multiple Forms Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Form/index.md

Demonstrates how to manage multiple forms within a single page.

```javascript
import { Form } from 'antd-mini/es/Form/form';

Page({
  onInit() {
    this.form1 = new Form();
    this.form2 = new Form();
  },
  handleRef1(ref) {
    this.form1.addItem(ref);
  },
  handleRef2(ref) {
    this.form2.addItem(ref);
  },
});
```

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

### Custom Prompt Item Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/Prompts/index.en.md

Illustrates how to customize the rendering of individual prompt items using a slot.

```APIDOC
## Custom Prompt Item

### Description

This example demonstrates how to customize the appearance and content of each prompt item by utilizing the `prompts-item` slot and accessing item data via `slot-scope`.

### Component Usage

```xml
<ant-prompts items="{{ baseList }}">
  <view slot="prompts-item" slot-scope="props" class="customize-prompts-item">
    Custom prompt items :{{ props.item.title}}
  </view>
</ant-prompts>
```
```

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

### Custom Content Example (Alipay Only)

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/ThoughtChain/index.md

Shows how to customize the content of each node using the 'content' slot. This feature is only supported on Alipay.

```APIDOC
## Custom Content Example (Alipay Only)

### Description
`content` slot supports custom node content. Only supported on Alipay, not on WeChat.

### XML
```xml
<ant-thought-chain items="{{basicList}}" onContentTap="onContentTap" collapsible="{{false}}">
    <view slot="content" slot-scope="module" style="color: red">
      {{module.content}}
    </view>
  </ant-thought-chain>
```
```

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

### Preview Documentation

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/contribute.en.md

Run this command to compile and preview the project's documentation.

```bash
npm run dev:doc
```

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

### Space Alignment Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Space/index.md

Aligns items to the 'start' of the cross-axis within the Space component, useful when items have different heights.

```xml
<ant-space align="start">
  <ant-button type="primary">按钮1</ant-button>
  <view class="custom-box">高度不同的内容</view>
  <ant-button>按钮3</ant-button>
</ant-space>
```

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

### NumberKeyboard with Verification Code Input Box

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/NumberKeyboard/index.en.md

Demonstrates using NumberKeyboard for verification code input. See the demo file for the complete example.

```unknown
<code src='../../demo/pages/NumberKeyboardCode/index'></code>
```

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

### Popover Placement Example

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Popover/index.en.md

Shows how to set the placement of the Popover to 'top-right'. Includes a small Ant Design button and a view in the content slot.

```xml
<popover placement="top-right">
  <ant-button size="small" inline>Point me</ant-button>
  <view slot="content" />
</popover>
```

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

### Basic Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/GuideTour/index.md

Demonstrates the basic integration and usage of the GuideTour component with default configurations.

```APIDOC
## Basic Usage

### Description
Demonstrates the basic integration and usage of the GuideTour component with default configurations.

### Component Import

In `index.json`, import the component:

```json
"usingComponents": {
#if ALIPAY
  "ant-guide-tour": "antd-mini/es/GuideTour/index"
#endif
#if WECHAT
  "ant-guide-tour": "antd-mini/GuideTour/index"
#endif
}
```

### XML Example

```xml
<ant-guide-tour
  items="{{items}}"
  visible="{{visible}}"
#if ALIPAY
  onCancel="closeTour"
  onChange="onChange"
#endif
#if WECHAT
  bindcancel="closeTour"
  bindchange="onChange"
#endif
/>
```

### JavaScript Example

```js
Page({
  data: {
    visible: true,
    items: [
      { left: 20, top: 80, imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/IV3MGP1qL/bianzu%25252013.png', imageMode: 'widthFix' },
      { left: 20, top: 160, imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/%26B6d3lBJn/bianzu%25252020.png' },
      { left: 20, top: 220, imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/lwVOkCcwb/bianzu%25252021.png' },
    ],
  },
  onChange(index) {
#if ALIPAY
    console.log('index', index);
#endif
  },
  closeTour() {
    this.setData({
      visible: false,
    });
  },
});
```
```

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

### Component Introduction

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/NumberKeyboard/index.md

Instructions on how to introduce the NumberKeyboard component into your project.

```APIDOC
## Introduction

Introduce the component in `index.json`:

```json
"usingComponents": {
#if ALIPAY
  "ant-number-keyboard": "antd-mini/es/NumberKeyboard/index"
#endif
#if WECHAT
  "ant-number-keyboard": "antd-mini/NumberKeyboard/index"
#endif
}
```
```

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

### Introduction and Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/SelectContact/index.md

Instructions on how to introduce and use the SelectContact component in your project.

```APIDOC
## Introduction

To use the SelectContact component, you need to import it in your `index.json` file.

### Installation

```json
{
  "usingComponents": {
    "ant-select-contact": "antd-mini/es/SelectContact/index" 
  }
}
```

## Basic Usage Example

This example demonstrates the basic implementation of the SelectContact component.

### Template

```xml
<SelectContact
  className="stepper"
  value="{{0}}"
  min="{{0}}"
  max="{{10}}"
  step="{{1}}"
  disabled="{{false}}"
  onChange="handleChange"
/>
```

### Script

```js
Page({
  handleChange(value) {
    console.log(value);
  },
});
```
```

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

### Component Introduction

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Space/index.md

Instructions on how to introduce the Space component into your project.

```APIDOC
## Component Introduction

In `index.json` to introduce the component:

```json
"usingComponents": {
#if ALIPAY
  "ant-space": "antd-mini/es/Space/index"
#endif
#if WECHAT
  "ant-space": "antd-mini/Space/index"
#endif
}
```
```

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

### Basic GuideTour Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/GuideTour/index.en.md

Demonstrates basic usage of the GuideTour component with items and visibility control. Includes cancel and change event handlers.

```xml
<ant-guide-tour
  items="{{items}}"
  visible="{{visible}}"
#if ALIPAY
  onCancel="closeTour"
  onChange="onChange"
#endif
#if WECHAT
  bindcancel="closeTour"
  bindchange="onChange"
#endif
/>
```

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

### Space Component Usage Examples

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Space/index.en.md

Examples demonstrating various ways to use the Ant Design Mini Space component, including basic usage, vertical spacing, size control, alignment, and auto-wrapping.

```APIDOC
## Space Component Usage Examples

### Description

Examples demonstrating various ways to use the Ant Design Mini Space component, including basic usage, vertical spacing, size control, alignment, and auto-wrapping.

### Basic Use

```xml
<ant-space>
  <ant-button type="primary">Button 1</ant-button>
  <ant-button>Button 2</ant-button>
  <ant-button>Button 3</ant-button>
</ant-space>
```

### Vertical Space

```xml
<ant-space direction="vertical">
  <ant-button type="primary">Button 1</ant-button>
  <ant-button>Button 2</ant-button>
  <ant-button>Button 3</ant-button>
</ant-space>
```

### Space Size

```xml
<ant-space size="small">
  <ant-button type="primary">Button 1</ant-button>
  <ant-button>Button 2</ant-button>
  <ant-button>Button 3</ant-button>
</ant-space>
```

### Alignment

```xml
<ant-space align="start">
  <ant-button type="primary">Button 1</ant-button>
  <view class="custom-box">Content with different height</view>
  <ant-button>Button 3</ant-button>
</ant-space>
```

### Auto Wrap

```xml
<ant-space wrap>
  <ant-button type="primary">Button 1</ant-button>
  <ant-button>Button 2</ant-button>
  <ant-button>Button 3</ant-button>
  <ant-button>Button 4</ant-button>
  <ant-button>Button 5</ant-button>
</ant-space>
```
```

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

### Install Ant Design Mini v0 with npm alias

Source: https://github.com/ant-design/ant-design-mini/blob/master/docs/guide/faq.en.md

Use npm alias to install older versions of Ant Design Mini alongside newer ones. This is useful for migrating from 0.x to 3.x.

```json
{
  "dependencies": {
    "antd-mini": "^3.0.0",
    "antd-mini-v0": "npm:antd-mini@^0.0.26"
  }
}
```

```bash
$ npm install
```

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

### NoticeBar Basic Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/NoticeBar/index.en.md

Demonstrates the basic implementation of the NoticeBar component with different types.

```APIDOC
## Basic Use

```xml
<ant-notice type="default">default</ant-notice>
<ant-notice type="info">info</ant-notice>
<ant-notice type="error">error</ant-notice>
```
```

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

### SelectContact Basic Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/SelectContact/index.en.md

Example of how to use the SelectContact component in an application.

```APIDOC
## SelectContact Basic Usage

### Introduction

To use the SelectContact component, introduce it in your `index.json` file:

```json
"usingComponents": {
#if ALIPAY
  "ant-select-contact": "antd-mini/es/SelectContact/index"
#endif
#if WECHAT
  "ant-select-contact": "antd-mini/SelectContact/index"
#endif
}
```

### Code Sample

```xml
<SelectContact
  className="stepper"
  value="{{0}}"
  min="{{0}}"
  max="{{10}}"
  step="{{1}}"
  disabled="{{false}}"
#if ALIPAY
  onChange="handleChange"
#endif
#if WECHAT
  bindchange="handleChange"
#endif
/>
```

### Event Handling

Handle the `onChange` (Alipay) or `bindchange` (WeChat) event to process selected values:

```js
Page({
  handleChange(value) {
    console.log(value);
  },
});
```
```

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

### Basic Use

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Steps/index.en.md

Demonstrates the basic usage of the Steps component with data-driven rendering.

```APIDOC
## Basic Use

### Description
Data-driven step bar rendering. `current` specifies the current step, `status` specifies the status of the current step (optional `finish` or `error`).

### XML
```xml
<ant-steps
  items="{{items}}"
  current="{{1}}"
  status="error"
/>
```

### JavaScript
```js
Page({
  data: {
    items: [
      {
        title: 'Step1',
        description: 'description',
      },
      {
        title: 'Step2',
        description: 'description',
      },
      {
        title: 'Step3',
        description: 'description',
      },
    ],
  },
});
```
```

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

### Form with Field Watching

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Form/index.md

Example of how to watch for changes in form fields.

```javascript
import { Form } from 'antd-mini/es/Form/form';

Page({
  onInit() {
    this.form = new Form({
      watch: {
        username: (value) => {
          console.log('Username changed:', value);
        },
      },
    });
  },
  handleRef(ref) {
    this.form.addItem(ref);
  },
});
```

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

### Basic GuideTour Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/GuideTour/index.md

Demonstrates the basic implementation of the GuideTour component using XML for the template and JavaScript for page logic. Includes event handlers for cancel and change events.

```xml
<ant-guide-tour
  items="{{items}}"
  visible="{{visible}}"
#if ALIPAY
  onCancel="closeTour"
  onChange="onChange"
#endif
#if WECHAT
  bindcancel="closeTour"
  bindchange="onChange"
#endif
/>
```

```js
Page({
  data: {
    visible: true,
    items: [
      { left: 20, top: 80, imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/IV3MGP1qL/bianzu%25252013.png', imageMode: 'widthFix' },
      { left: 20, top: 160, imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/%26B6d3lBJn/bianzu%25252020.png' },
      { left: 20, top: 220, imageUrl: 'https://gw.alipayobjects.com/zos/antfincdn/lwVOkCcwb/bianzu%25252021.png' },
    ],
  },
  onChange(index) {
#if ALIPAY
    console.log('index', index);
#endif
  },
  closeTour() {
    this.setData({
      visible: false,
    });
  },
});
```

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

### Avatar Component Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Avatar/index.md

Examples of how to use the Avatar component in your project.

```APIDOC
## Avatar Component Usage

### Introduction

To use the Avatar component, include it in your `index.json` file:

```json
{
  "usingComponents": {
#if ALIPAY
    "ant-avatar": "antd-mini/es/Avatar/index"
#endif
#if WECHAT
    "ant-avatar": "antd-mini/Avatar/index"
#endif
  }
}
```

### Basic Usage

```xml
<ant-avatar src="{{imagesUrl}}" className="avatar" />
<ant-avatar size="large" src="{{imagesUrl}}" className="avatar" />
<ant-avatar size="x-small" src="{{imagesUrl}}" style="width: 100rpx" />
```

### Demo Code

For a complete demo, refer to the code at `../../demo/pages/Avatar/index`.
```

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

### Sender Component Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/Sender/index.en.md

Example of how to use the Sender component in your application.

```APIDOC
## Sender Component Usage

### Description
This section provides a basic usage example for the Sender component.

### Code Sample

```jsx
<Sender />
```

### When to use
Used when user input is required and a message is sent. Support adaptive height, send status, custom slot and other functions.
```

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

### Welcome Component API

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/Welcome/index.md

Detailed API documentation for the Welcome component, including its properties and events.

```APIDOC
## Welcome Component API

### Properties

The following table describes the API properties for the Welcome component:

| Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- |
| className | Class name | string | - |
| styles | Custom styles | string | - |
| title | Title | string | - |
| description | Description | string | - |

### Events

| Event Name | Description | Type |
| ---------- | ----------- | ---- |
| onTap | Triggered when the description is tapped | (e) => void |
```

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

### Image Upload Validation

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Form/index.md

Example of validating image uploads within a form.

```javascript
import { Form } from 'antd-mini/es/Form/form';

Page({
  onInit() {
    this.form = new Form({
      rules: {
        image: [
          { required: true, message: '请上传图片' },
          // Add custom image validation rules here if needed
        ],
      },
    });
  },
  handleRef(ref) {
    this.form.addItem(ref);
  },
});
```

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

### Welcome Component Introduction and Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/copilot/Welcome/index.md

This snippet shows how to introduce and use the Welcome component in your Ant Design Mini project.

```APIDOC
## Introduction

This is a welcome prompt component based on the Ant Design system, used to display product identity and core value propositions to users.

## Installation

Import the component in `index.json`:

```json
"usingComponents": {
#if ALIPAY
  "ant-welcome": "antd-mini/es/Welcome/index"
#endif
#if WECHAT
  "ant-welcome": "antd-mini/Welcome/index"
#endif
}
```

## Basic Usage Example

```xml
<ant-welcome title="👋🏻 你好，我是 Ant Design X" description="基于 Ant Design 的 AGI 产品界面解决方案，创造更美好的智能视界～" />
```
```

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

### Bottom Popup Example

Source: https://context7.com/ant-design/ant-design-mini/llms.txt

Display a popup that slides up from the bottom, suitable for selection lists.

```xml
<!-- Bottom popup -->
<ant-popup
  visible="{{bottomPopupVisible}}"
  position="bottom"
  title="Select Option"
  height="{{300}}"
  showClose="{{true}}"
  onClose="handlePopupClose">
  <view class="popup-content">
    <ant-list>
      <ant-list-item onTap="selectOption" data-value="1">Option 1</ant-list-item>
      <ant-list-item onTap="selectOption" data-value="2">Option 2</ant-list-item>
      <ant-list-item onTap="selectOption" data-value="3">Option 3</ant-list-item>
    </ant-list>
  </view>
</ant-popup>
```

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

### Basic NoticeBar Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/NoticeBar/index.en.md

Demonstrates the basic usage of the NoticeBar component with different predefined types.

```xml
<ant-notice type="default">default</ant-notice>
<ant-notice type="info">info</ant-notice>
<ant-notice type="error">error</ant-notice>
```

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

### Basic Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Steps/index.md

Demonstrates the basic rendering of the Steps component using the `items` and `current` properties.

```APIDOC
## Basic Usage

### Description
Demonstrates the basic rendering of the Steps component using the `items` and `current` properties. The `items` array drives the rendering, and `current` specifies the active step. `status` can be set to `finish` or `error` for the current step.

### Endpoint
N/A (Component Usage)

### Parameters

#### Request Body (Implicit via `items` data)
- **items** (Array<Object>) - Required - An array of step objects, each with `title` and `description`.
  - **title** (string) - Required - The title of the step.
  - **description** (string) - Optional - The description for the step.
- **current** (number) - Optional - The index of the current active step (0-based).
- **status** (string) - Optional - The status of the current step, either `finish` or `error`.

### Request Example (XML)
```xml
<ant-steps
  items="{{items}}"
  current="{{1}}"
  status="error"
/>
```

### Request Example (JavaScript Data)
```javascript
Page({
  data: {
    items: [
      {
        title: 'Step1',
        description: 'description',
      },
      {
        title: 'Step2',
        description: 'description',
      },
      {
        title: 'Step3',
        description: 'description',
      },
    ],
  },
});
```

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

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

### Form Rules

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Form/index.md

Provides examples and explanations for defining validation rules for form fields.

```APIDOC
## Rules

**Description**: Defines the validation rules for form fields. Rules can be set globally in `new Form` or individually on `FormItem` using `required` or `message` properties.

### Example:

```javascript
{
  account: [
    {
      required: true,
      message: '需要输入用户名'
    },
  ],
  password: [
    {
      required: true,
    },
  ],
  confirm: [
    {
      required: true,
      message: '需要输入确认密码'
    },
    (form) => ({
      async validator(_, value) {
        if (!value || form.getFieldValue('password') === value) {
          return;
        }
        throw new Error('两次密码需一致');
      },
    }),
  ]
}
```

### Usage with FormItem:

```html
<form-input
  label="用户名"
  name="account"
  required
  message="请输入用户名"
  ref="handleRef"
></form-input>
```
```

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

### Dynamically Adding and Removing Form Items

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Form/index.md

Example of dynamically managing form items.

```javascript
import { Form } from 'antd-mini/es/Form/form';

Page({
  onInit() {
    this.form = new Form();
    this.form.addItem(this.selectRef);
    this.form.addItem(this.inputRef);
  },
  addInput() {
    this.form.addItem(this.newInputRef);
  },
  removeInput() {
    this.form.removeItem(this.newInputRef);
  },
});
```

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

### Basic Postscript Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Postscript/index.en.md

Demonstrates the basic implementation of the Postscript component. Ensure the component is registered before use.

```javascript
import { Postscript } from 'antd-mini';

Page({
  data: {
    postscriptValue: ''
  },
  onPostscriptChange(value) {
    this.setData({
      postscriptValue: value
    });
  }
});
```

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

### Basic Usage

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/Icon/index.en.md

Demonstrates the basic usage of the Icon component.

```APIDOC
## Basic Use

### Description
This shows how to use the Icon component with a basic type.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
```xml
<ant-icon type="SmileOutline" />
```

### Response
N/A
```

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

### DatePicker 自定义列渲染函数

Source: https://github.com/ant-design/ant-design-mini/blob/master/src/DatePicker/index.md

Example of a custom `onFormatLabel` function for DatePicker, which returns the string representation of the value.

```javascript
Page({
  data: {
#if WECHAT
    handleFormatLabel(type, value) {
      return String(value);
    },
#endif
  },
  handleFormatLabel(type, value) {
    return String(value);
  },
});
```