ant-design-mini

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:

Install and set up Ant Design Mini in a mini-program project
Use Ant Design Mini components in Alipay Mini Program
Use Ant Design Mini components in WeChat Mini Program
Configure Ant Design Mini (theme, i18n, etc.)
Use form components (Button, Input, Form, etc.)
Use data display components (List, Card, etc.)
Use feedback components (Toast, Modal, etc.)
Use navigation components (Tabs, NavBar, etc.)
Customize component styles
Handle component events
Understand Ant Design Mini API and methods
Troubleshoot Ant Design Mini issues

当用户有以下需求时，可使用本技能：

在小程序项目中安装和配置Ant Design Mini
在支付宝小程序中使用Ant Design Mini组件
在微信小程序中使用Ant Design Mini组件
配置Ant Design Mini（主题、国际化等）
使用表单类组件（Button、Input、Form等）
使用数据展示类组件（List、Card等）
使用反馈类组件（Toast、Modal等）
使用导航类组件（Tabs、NavBar等）
自定义组件样式
处理组件事件
了解Ant Design Mini的API与方法
排查Ant Design Mini相关问题

How to use this skill

如何使用本技能

This skill is organized to match the Ant Design Mini official documentation structure (https://ant-design-mini.antgroup.com/guide/quick-start, https://ant-design-mini.antgroup.com/components/overview). When working with Ant Design Mini:

Identify the topic from the user's request:
- Getting started/快速开始 →
```
examples/getting-started.md
```
- Components/组件 →
```
examples/components/
```
- API/API 文档 →
```
api/
```

Load the appropriate example file from the

examples/

directory:

Getting Started (快速开始):

```
examples/getting-started.md
```
- Installation and setup
```
examples/quick-start.md
```
- Quick start guide

Components (组件):

```
examples/components/overview.md
```
- Components overview
```
examples/components/button.md
```
- Button component
```
examples/components/input.md
```
- Input component
```
examples/components/form.md
```
- Form component
```
examples/components/list.md
```
- List component
```
examples/components/card.md
```
- Card component
```
examples/components/toast.md
```
- Toast component
```
examples/components/modal.md
```
- Modal component
```
examples/components/tabs.md
```
- Tabs component
```
examples/components/nav-bar.md
```
- NavBar component
```
examples/components/picker.md
```
- Picker component
```
examples/components/date-picker.md
```
- DatePicker component
```
examples/components/switch.md
```
- Switch component
```
examples/components/checkbox.md
```
- Checkbox component
```
examples/components/radio.md
```
- Radio component
```
examples/components/stepper.md
```
- Stepper component
```
examples/components/avatar.md
```
- Avatar component
```
examples/components/badge.md
```
- Badge component
```
examples/components/tag.md
```
- Tag component
```
examples/components/empty.md
```
- Empty component
```
examples/components/loading.md
```
- Loading component
```
examples/components/popup.md
```
- Popup component
```
examples/components/action-sheet.md
```
- ActionSheet component

Follow the specific instructions in that example file for syntax, structure, and best practices

Important Notes:
- Ant Design Mini is for Alipay Mini Program and WeChat Mini Program
- Components use mini-program syntax (axml/json)
- Examples include both Alipay and WeChat syntax
- Each example file includes key concepts, code examples, and key points
Reference API documentation in the
```
api/
```
directory when needed:
- ```
api/component-api.md
```
  - Component API reference
- ```
api/props-and-events.md
```
  - Props and events reference
Use templates from the
```
templates/
```
directory:
- ```
templates/installation.md
```
  - Installation templates
- ```
templates/component-usage.md
```
  - Component usage templates

本技能的结构与Ant Design Mini官方文档结构一致（https://ant-design-mini.antgroup.com/guide/quick-start，https://ant-design-mini.antgroup.com/components/overview）。使用Ant Design Mini时，请遵循以下步骤：

从用户的请求中确定主题：
- 快速开始 →
```
examples/getting-started.md
```
- 组件 →
```
examples/components/
```
- API文档 →
```
api/
```

从
examples/
目录中加载对应的示例文件：

快速开始：

```
examples/getting-started.md
```
- 安装与配置指南
```
examples/quick-start.md
```
- 快速入门指引

组件：

```
examples/components/overview.md
```
- 组件概览
```
examples/components/button.md
```
- Button组件
```
examples/components/input.md
```
- Input组件
```
examples/components/form.md
```
- Form组件
```
examples/components/list.md
```
- List组件
```
examples/components/card.md
```
- Card组件
```
examples/components/toast.md
```
- Toast组件
```
examples/components/modal.md
```
- Modal组件
```
examples/components/tabs.md
```
- Tabs组件
```
examples/components/nav-bar.md
```
- NavBar组件
```
examples/components/picker.md
```
- Picker组件
```
examples/components/date-picker.md
```
- DatePicker组件
```
examples/components/switch.md
```
- Switch组件
```
examples/components/checkbox.md
```
- Checkbox组件
```
examples/components/radio.md
```
- Radio组件
```
examples/components/stepper.md
```
- Stepper组件
```
examples/components/avatar.md
```
- Avatar组件
```
examples/components/badge.md
```
- Badge组件
```
examples/components/tag.md
```
- Tag组件
```
examples/components/empty.md
```
- Empty组件
```
examples/components/loading.md
```
- Loading组件
```
examples/components/popup.md
```
- Popup组件
```
examples/components/action-sheet.md
```
- ActionSheet组件

遵循示例文件中的具体说明，包括语法、结构与最佳实践

重要说明：
- Ant Design Mini支持支付宝小程序和微信小程序
- 组件使用小程序语法（axml/json）
- 示例包含支付宝和微信两种语法
- 每个示例文件都包含核心概念、代码示例及关键点
必要时参考
api/
目录中的API文档：
- ```
api/component-api.md
```
  - 组件API参考
- ```
api/props-and-events.md
```
  - 属性与事件参考

使用
templates/
目录中的模板：

```
templates/installation.md
```
- 安装模板
```
templates/component-usage.md
```
- 组件使用模板

1. Understanding Ant Design Mini

1. 了解Ant Design Mini

Ant Design Mini is a UI component library for Alipay Mini Program and WeChat Mini Program, following Ant Design design specifications.

Key Concepts:

Mini Program Support: Alipay and WeChat Mini Programs
Design System: Follows Ant Design design language
Rich Components: Button, Form, List, Modal, etc.
Theme Customization: Support for theme customization
i18n: Internationalization support

Ant Design Mini是一款遵循Ant Design设计规范的支付宝小程序和微信小程序UI组件库。

核心概念：

小程序支持：支付宝和微信小程序
设计系统：遵循Ant Design设计语言
丰富组件：Button、Form、List、Modal等
主题定制：支持主题自定义
国际化：支持多语言适配

2. Installation

2. 安装

Using npm:

bash

npm install antd-mini

Using yarn:

bash

yarn add antd-mini

Using pnpm:

bash

pnpm add antd-mini

使用npm安装：

bash

npm install antd-mini

使用yarn安装：

bash

yarn add antd-mini

使用pnpm安装：

bash

pnpm add antd-mini

3. Basic Setup

3. 基础配置

json

// app.json (Alipay Mini Program)
{
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index"
  }
}

xml

<!-- page.axml -->
<ant-button type="primary" onTap="handleTap">Button</ant-button>

json

// app.json（支付宝小程序）
{
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index"
  }
}

xml

<!-- page.axml -->
<ant-button type="primary" onTap="handleTap">Button</ant-button>

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

Guide (指南):

See guide files in
```
examples/guide/
```
or
```
examples/getting-started/
```
→ https://ant-design-mini.antgroup.com/guide/quick-start

Components (组件):

See component files in
```
examples/components/
```
→ https://ant-design-mini.antgroup.com/components/overview

指南：

查看
```
examples/guide/
```
或
```
examples/getting-started/
```
下的指南文件 → https://ant-design-mini.antgroup.com/guide/quick-start

组件：

查看
```
examples/components/
```
下的组件文件 → https://ant-design-mini.antgroup.com/components/overview

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the

examples/

directory (see mapping above).

To use examples:

Identify the topic from the user's request
Load the appropriate example file from the mapping above
Follow the instructions, syntax, and best practices in that file
Adapt the code examples to your specific use case

To use templates:

Reference templates in
```
templates/
```
directory for common scaffolding
Adapt templates to your specific needs and coding style

本技能包含与官方文档结构一致的详细示例，所有示例均位于

examples/

目录中（见上方映射关系）。

使用示例：

从用户的请求中确定主题
根据上方映射加载对应的示例文件
遵循文件中的说明、语法与最佳实践
根据具体需求调整代码示例

使用模板：

参考
```
templates/
```
目录中的模板进行通用脚手架搭建
根据具体需求与编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the

api/

directory, organized to match the official Ant Design Mini API documentation structure:

详细的API文档位于

api/

目录中，结构与Ant Design Mini官方API文档一致：

Component API (

api/component-api.md

)

组件API（

api/component-api.md

）

Component props and events
Component methods
Component slots

组件属性与事件
组件方法
组件插槽

Props and Events (

api/props-and-events.md

)

属性与事件（

api/props-and-events.md

）

Common props
Common events
Event handling

To use API reference:

Identify the API you need help with
Load the corresponding API file from the
```
api/
```
directory
Find the API signature, parameters, return type, and examples
Reference the linked example files for detailed usage patterns
All API files include links to relevant example files in the
```
examples/
```
directory

通用属性
通用事件
事件处理

使用API参考：

确定需要查询的API
从
```
api/
```
目录中加载对应的API文件
查找API签名、参数、返回类型及示例
参考关联的示例文件获取详细使用方式
所有API文件均包含指向
```
examples/
```
目录中相关示例文件的链接

Best Practices

最佳实践

Register components: Register components in app.json or page.json
Use correct syntax: Use axml for Alipay, wxml for WeChat
Handle events: Use onTap for Alipay, bindtap for WeChat
Customize theme: Use theme variables for customization
Follow design specs: Follow Ant Design design specifications

注册组件：在app.json或page.json中注册组件
使用正确语法：支付宝使用axml，微信使用wxml
处理事件：支付宝使用onTap，微信使用bindtap
自定义主题：使用主题变量进行定制
遵循设计规范：遵循Ant Design设计规范

Resources

资源

Official Documentation: https://ant-design-mini.antgroup.com/
Quick Start: https://ant-design-mini.antgroup.com/guide/quick-start
Components: https://ant-design-mini.antgroup.com/components/overview
GitHub Repository: https://github.com/ant-design/ant-design-mini

官方文档：https://ant-design-mini.antgroup.com/
快速开始：https://ant-design-mini.antgroup.com/guide/quick-start
组件库：https://ant-design-mini.antgroup.com/components/overview
GitHub仓库：https://github.com/ant-design/ant-design-mini

Keywords

关键词

Ant Design Mini, ant-design-mini, antd-mini, mini program, Alipay Mini Program, WeChat Mini Program, 小程序, 支付宝小程序, 微信小程序, 组件库, UI components, Button, Form, List, Modal, Toast, Tabs, NavBar, 按钮, 表单, 列表, 弹窗, 提示, 标签页, 导航栏

Ant Design Mini, ant-design-mini, antd-mini, mini program, 支付宝小程序, 微信小程序, 小程序, 组件库, UI components, Button, Form, List, Modal, Toast, Tabs, NavBar, 按钮, 表单, 列表, 弹窗, 提示, 标签页, 导航栏

ant-design-mini

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

1. Understanding Ant Design Mini

1. 了解Ant Design Mini

2. Installation

2. 安装

3. Basic Setup

3. 基础配置

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

Examples and Templates

示例与模板

API Reference

API参考

Component API (
`api/component-api.md`
)

组件API（
`api/component-api.md`
）

Props and Events (
`api/props-and-events.md`
)

属性与事件（
`api/props-and-events.md`
）

Best Practices

最佳实践

Resources

资源

Keywords

关键词

ant-design-mini

Original

Translation

When to use this skill

何时使用本技能

How to use this skill

如何使用本技能

1. Understanding Ant Design Mini

1. 了解Ant Design Mini

2. Installation

2. 安装

3. Basic Setup

3. 基础配置

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

Examples and Templates

示例与模板

API Reference

API参考

Component API (api/component-api.md)

组件API（api/component-api.md）

Props and Events (api/props-and-events.md)

属性与事件（api/props-and-events.md）

Best Practices

最佳实践

Resources

资源

Keywords

关键词

Component API (
`api/component-api.md`
)

组件API（
`api/component-api.md`
）

Props and Events (
`api/props-and-events.md`
)

属性与事件（
`api/props-and-events.md`
）