ant-design-mobile

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:

Build React mobile applications with Ant Design Mobile components
Use mobile UI components (Button, Input, Form, List, Card, Modal, etc.)
Create mobile-friendly interfaces
Customize Ant Design Mobile theme
Implement mobile-specific features (pull-to-refresh, infinite scroll, etc.)
Use Ant Design Mobile with React Native or web
Handle mobile gestures and interactions
Implement mobile navigation patterns
Use mobile form components
Create mobile data display components

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

使用Ant Design Mobile组件构建React移动端应用
使用移动端UI组件（Button、Input、Form、List、Card、Modal等）
创建适配移动端的界面
定制Ant Design Mobile主题
实现移动端专属功能（下拉刷新、无限滚动等）
在React Native或Web项目中使用Ant Design Mobile
处理移动端手势与交互
实现移动端导航模式
使用移动端表单组件
创建移动端数据展示组件

How to use this skill

如何使用本技能

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

Install and setup Ant Design Mobile:
- Load
```
examples/getting-started/installation.md
```
  for installation instructions
- Load
```
examples/getting-started/basic-usage.md
```
  for basic usage examples

Choose the component based on the user's requirements:

Button/按钮 →
```
examples/components/button.md
```
Input/输入框 →
```
examples/components/input.md
```
Form/表单 →
```
examples/components/form.md
```
List/列表 →
```
examples/components/list.md
```
Card/卡片 →
```
examples/components/card.md
```
Modal/对话框 →
```
examples/components/modal.md
```
Picker/选择器 →
```
examples/components/picker.md
```
DatePicker/日期选择器 →
```
examples/components/date-picker.md
```
Tabs/标签页 →
```
examples/components/tabs.md
```
PullToRefresh/下拉刷新 →
```
examples/components/pull-to-refresh.md
```
InfiniteScroll/无限滚动 →
```
examples/components/infinite-scroll.md
```
And many more components...

Load the appropriate example file from the

examples/

directory:

examples/getting-started/installation.md

- Installation and setup

```
examples/getting-started/basic-usage.md
```
- Basic usage examples
```
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/modal.md
```
- Modal component
```
examples/components/picker.md
```
- Picker component
```
examples/components/date-picker.md
```
- DatePicker component
```
examples/components/tabs.md
```
- Tabs component
```
examples/components/pull-to-refresh.md
```
- PullToRefresh component
```
examples/components/infinite-scroll.md
```
- InfiniteScroll component
```
examples/components/icon.md
```
- Icon component
```
examples/components/badge.md
```
- Badge component
```
examples/components/tag.md
```
- Tag component
```
examples/components/avatar.md
```
- Avatar component
```
examples/components/image.md
```
- Image component
```
examples/components/image-viewer.md
```
- ImageViewer component
```
examples/components/nav-bar.md
```
- NavBar component
```
examples/components/tab-bar.md
```
- TabBar component
```
examples/components/index-bar.md
```
- IndexBar component
```
examples/components/side-bar.md
```
- SideBar component
```
examples/components/dialog.md
```
- Dialog component
```
examples/components/toast.md
```
- Toast component
```
examples/components/action-sheet.md
```
- ActionSheet component
```
examples/components/popup.md
```
- Popup component
```
examples/components/loading.md
```
- Loading component
```
examples/components/error-block.md
```
- ErrorBlock component
```
examples/components/empty.md
```
- Empty component
```
examples/components/notice-bar.md
```
- NoticeBar component
```
examples/components/mask.md
```
- Mask component
```
examples/components/textarea.md
```
- Textarea 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/rate.md
```
- Rate component
```
examples/components/slider.md
```
- Slider component
```
examples/components/uploader.md
```
- Uploader component
```
examples/components/grid.md
```
- Grid component
```
examples/components/swiper.md
```
- Swiper component
```
examples/components/cascader.md
```
- Cascader component
```
examples/components/search-bar.md
```
- SearchBar component
```
examples/components/virtual-input.md
```
- VirtualInput component
```
examples/components/divider.md
```
- Divider component
```
examples/components/space.md
```
- Space component
```
examples/components/safe-area.md
```
- SafeArea component

examples/advanced/theme-customization.md

- Theme customization

examples/advanced/internationalization.md

- Internationalization

Follow the specific instructions in that example file for syntax, structure, and best practices
Reference the API documentation when needed:
- ```
api/components.md
```
  - Component API reference
- ```
api/config-provider.md
```
  - ConfigProvider API
Use templates for quick start:
- ```
templates/project-setup.md
```
  - Project setup templates
- ```
templates/component-template.md
```
  - Component usage templates

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

安装与配置 Ant Design Mobile:
- 加载
```
examples/getting-started/installation.md
```
  获取安装说明
- 加载
```
examples/getting-started/basic-usage.md
```
  查看基础使用示例

根据用户需求选择对应组件:

Button/按钮 →
```
examples/components/button.md
```
Input/输入框 →
```
examples/components/input.md
```
Form/表单 →
```
examples/components/form.md
```
List/列表 →
```
examples/components/list.md
```
Card/卡片 →
```
examples/components/card.md
```
Modal/对话框 →
```
examples/components/modal.md
```
Picker/选择器 →
```
examples/components/picker.md
```
DatePicker/日期选择器 →
```
examples/components/date-picker.md
```
Tabs/标签页 →
```
examples/components/tabs.md
```
PullToRefresh/下拉刷新 →
```
examples/components/pull-to-refresh.md
```
InfiniteScroll/无限滚动 →
```
examples/components/infinite-scroll.md
```
以及更多组件...

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

examples/getting-started/installation.md

- 安装与配置

```
examples/getting-started/basic-usage.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/modal.md
```
- Modal组件
```
examples/components/picker.md
```
- Picker组件
```
examples/components/date-picker.md
```
- DatePicker组件
```
examples/components/tabs.md
```
- Tabs组件
```
examples/components/pull-to-refresh.md
```
- PullToRefresh组件
```
examples/components/infinite-scroll.md
```
- InfiniteScroll组件
```
examples/components/icon.md
```
- Icon组件
```
examples/components/badge.md
```
- Badge组件
```
examples/components/tag.md
```
- Tag组件
```
examples/components/avatar.md
```
- Avatar组件
```
examples/components/image.md
```
- Image组件
```
examples/components/image-viewer.md
```
- ImageViewer组件
```
examples/components/nav-bar.md
```
- NavBar组件
```
examples/components/tab-bar.md
```
- TabBar组件
```
examples/components/index-bar.md
```
- IndexBar组件
```
examples/components/side-bar.md
```
- SideBar组件
```
examples/components/dialog.md
```
- Dialog组件
```
examples/components/toast.md
```
- Toast组件
```
examples/components/action-sheet.md
```
- ActionSheet组件
```
examples/components/popup.md
```
- Popup组件
```
examples/components/loading.md
```
- Loading组件
```
examples/components/error-block.md
```
- ErrorBlock组件
```
examples/components/empty.md
```
- Empty组件
```
examples/components/notice-bar.md
```
- NoticeBar组件
```
examples/components/mask.md
```
- Mask组件
```
examples/components/textarea.md
```
- Textarea组件
```
examples/components/switch.md
```
- Switch组件
```
examples/components/checkbox.md
```
- Checkbox组件
```
examples/components/radio.md
```
- Radio组件
```
examples/components/stepper.md
```
- Stepper组件
```
examples/components/rate.md
```
- Rate组件
```
examples/components/slider.md
```
- Slider组件
```
examples/components/uploader.md
```
- Uploader组件
```
examples/components/grid.md
```
- Grid组件
```
examples/components/swiper.md
```
- Swiper组件
```
examples/components/cascader.md
```
- Cascader组件
```
examples/components/search-bar.md
```
- SearchBar组件
```
examples/components/virtual-input.md
```
- VirtualInput组件
```
examples/components/divider.md
```
- Divider组件
```
examples/components/space.md
```
- Space组件
```
examples/components/safe-area.md
```
- SafeArea组件

examples/advanced/theme-customization.md

- 主题定制

examples/advanced/internationalization.md

- 国际化

遵循示例文件中的具体说明，包括语法、结构与最佳实践
必要时参考API文档:
- ```
api/components.md
```
  - 组件API参考
- ```
api/config-provider.md
```
  - ConfigProvider API
使用模板快速上手:
- ```
templates/project-setup.md
```
  - 项目搭建模板
- ```
templates/component-template.md
```
  - 组件使用模板

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

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

Guide (指南):

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

Components (组件):

See component files in
```
examples/components/
```
→ https://ant-design-mobile.antgroup.com/zh/components/button

指南:

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

组件:

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

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参考

Components API:
```
api/components.md
```
- All component props and APIs
ConfigProvider API:
```
api/config-provider.md
```
- ConfigProvider component API and global configuration

组件API:
```
api/components.md
```
- 所有组件的属性与API
ConfigProvider API:
```
api/config-provider.md
```
- ConfigProvider组件API及全局配置

Best Practices

最佳实践

Import styles: Import Ant Design Mobile CSS in your entry file
Use ConfigProvider: Wrap your app with ConfigProvider for global configuration
Mobile-first: Design for mobile devices first
Touch interactions: Consider touch gestures and interactions
Performance: Optimize for mobile performance
Responsive design: Test on different screen sizes
Accessibility: Follow mobile accessibility guidelines
Theme customization: Use design tokens for consistent theming
Internationalization: Use ConfigProvider with locale for i18n
Component composition: Compose components for complex UIs

导入样式: 在入口文件中导入Ant Design Mobile的CSS样式
使用ConfigProvider: 用ConfigProvider包裹应用以实现全局配置
移动端优先: 优先针对移动设备进行设计
触摸交互: 考虑移动端手势与交互体验
性能优化: 针对移动端性能进行优化
响应式设计: 在不同屏幕尺寸上进行测试
可访问性: 遵循移动端可访问性规范
主题定制: 使用设计令牌实现一致的主题风格
国际化: 结合ConfigProvider与locale实现多语言支持
组件组合: 通过组件组合构建复杂UI

Resources

资源

Official Website: https://ant-design-mobile.antgroup.com/
Getting Started: https://ant-design-mobile.antgroup.com/zh/guide/quick-start
Components: https://ant-design-mobile.antgroup.com/zh/components/button
GitHub Repository: https://github.com/ant-design/ant-design-mobile

官方网站: https://ant-design-mobile.antgroup.com/
快速开始: https://ant-design-mobile.antgroup.com/zh/guide/quick-start
组件文档: https://ant-design-mobile.antgroup.com/zh/components/button
GitHub仓库: https://github.com/ant-design/ant-design-mobile

Keywords

关键词

Ant Design Mobile, antd-mobile, mobile UI, React mobile, mobile components, Button, Input, Form, List, Card, Modal, Picker, DatePicker, Tabs, PullToRefresh, InfiniteScroll, Swiper, Toast, Dialog, ActionSheet, Popup, Loading, NavBar, TabBar, Icon, Badge, Tag, Avatar, Image, ImageViewer, Switch, Checkbox, Radio, Stepper, Rate, Slider, Uploader, Grid, Cascader, SearchBar, VirtualInput, Divider, Space, SafeArea, ErrorBlock, Empty, NoticeBar, Mask, mobile app, 移动端, 组件库, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动

Ant Design Mobile、antd-mobile、mobile UI、React mobile、mobile components、Button、Input、Form、List、Card、Modal、Picker、DatePicker、Tabs、PullToRefresh、InfiniteScroll、Swiper、Toast、Dialog、ActionSheet、Popup、Loading、NavBar、TabBar、Icon、Badge、Tag、Avatar、Image、ImageViewer、Switch、Checkbox、Radio、Stepper、Rate、Slider、Uploader、Grid、Cascader、SearchBar、VirtualInput、Divider、Space、SafeArea、ErrorBlock、Empty、NoticeBar、Mask、mobile app、移动端、组件库、按钮、输入框、表单、列表、卡片、对话框、选择器、日期选择器、标签页、下拉刷新、无限滚动