⚡

AntDesignMobile移动UI组件库技能Skill ant-design-mobile

Ant Design Mobile 是一个专为React移动应用设计的UI组件库，提供丰富的移动端组件如按钮、输入框、表单等，支持主题定制、平台适配和移动特定功能如下拉刷新、无限滚动。适用于构建移动友好界面，提升开发效率，关键词包括：Ant Design Mobile, 移动UI, React组件, 移动应用开发, UI组件库。

移动开发 0 次安装 0 次浏览 更新于 3/22/2026

name: ant-design-mobile description: 提供Ant Design Mobile组件库的全面指南，包括移动组件、主题和平台适配。当用户询问Ant Design Mobile、需要构建移动应用或实现移动UI组件时使用。 license: 完整条款在LICENSE.txt中

何时使用此技能

每当用户想要时使用此技能：

  • 使用Ant Design Mobile组件构建React移动应用
  • 使用移动UI组件（按钮、输入框、表单、列表、卡片、对话框等）
  • 创建移动友好界面
  • 自定义Ant Design Mobile主题
  • 实现移动特定功能（下拉刷新、无限滚动等）
  • 将Ant Design Mobile与React Native或Web一起使用
  • 处理移动手势和交互
  • 实现移动导航模式
  • 使用移动表单组件
  • 创建移动数据显示组件

如何使用此技能

此技能的组织结构匹配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时：

  1. 安装和设置 Ant Design Mobile：

    • 加载 examples/getting-started/installation.md 获取安装说明
    • 加载 examples/getting-started/basic-usage.md 获取基本使用示例

  2. 根据用户需求选择组件：

    • 按钮 → examples/components/button.md
    • 输入框 → examples/components/input.md
    • 表单 → examples/components/form.md
    • 列表 → examples/components/list.md
    • 卡片 → examples/components/card.md
    • 对话框 → examples/components/modal.md
    • 选择器 → examples/components/picker.md
    • 日期选择器 → examples/components/date-picker.md
    • 标签页 → examples/components/tabs.md
    • 下拉刷新 → examples/components/pull-to-refresh.md
    • 无限滚动 → examples/components/infinite-scroll.md
    • 以及更多组件…

  3. 从 examples/ 目录加载适当的示例文件：

    • examples/getting-started/installation.md - 安装和设置
    • examples/getting-started/basic-usage.md - 基本使用示例
    • examples/components/button.md - 按钮组件
    • examples/components/input.md - 输入框组件
    • examples/components/form.md - 表单组件
    • examples/components/list.md - 列表组件
    • examples/components/card.md - 卡片组件
    • examples/components/modal.md - 对话框组件
    • examples/components/picker.md - 选择器组件
    • examples/components/date-picker.md - 日期选择器组件
    • examples/components/tabs.md - 标签页组件
    • examples/components/pull-to-refresh.md - 下拉刷新组件
    • examples/components/infinite-scroll.md - 无限滚动组件
    • examples/components/icon.md - 图标组件
    • examples/components/badge.md - 徽章组件
    • examples/components/tag.md - 标签组件
    • examples/components/avatar.md - 头像组件
    • examples/components/image.md - 图片组件
    • examples/components/image-viewer.md - 图片查看器组件
    • examples/components/nav-bar.md - 导航栏组件
    • examples/components/tab-bar.md - 标签栏组件
    • examples/components/index-bar.md - 索引栏组件
    • examples/components/side-bar.md - 侧边栏组件
    • examples/components/dialog.md - 对话框组件
    • examples/components/toast.md - 吐司组件
    • examples/components/action-sheet.md - 动作面板组件
    • examples/components/popup.md - 弹出层组件
    • examples/components/loading.md - 加载组件
    • examples/components/error-block.md - 错误块组件
    • examples/components/empty.md - 空状态组件
    • examples/components/notice-bar.md - 通知栏组件
    • examples/components/mask.md - 遮罩组件
    • examples/components/textarea.md - 文本域组件
    • examples/components/switch.md - 开关组件
    • examples/components/checkbox.md - 复选框组件
    • examples/components/radio.md - 单选框组件
    • examples/components/stepper.md - 步进器组件
    • examples/components/rate.md - 评分组件
    • examples/components/slider.md - 滑块组件
    • examples/components/uploader.md - 上传组件
    • examples/components/grid.md - 网格组件
    • examples/components/swiper.md - 轮播组件
    • examples/components/cascader.md - 级联选择组件
    • examples/components/search-bar.md - 搜索栏组件
    • examples/components/virtual-input.md - 虚拟输入组件
    • examples/components/divider.md - 分割线组件
    • examples/components/space.md - 间距组件
    • examples/components/safe-area.md - 安全区域组件
    • examples/advanced/theme-customization.md - 主题定制
    • examples/advanced/internationalization.md - 国际化

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

  5. 需要时参考API文档：

    • api/components.md - 组件API参考
    • api/config-provider.md - ConfigProvider API

  6. 使用模板快速入门：

    • templates/project-setup.md - 项目设置模板
    • templates/component-template.md - 组件使用模板

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

指南：

组件：

示例和模板

此技能包括详细示例，组织结构匹配官方文档。所有示例都在 examples/ 目录中（见上映射）。

使用示例：

  • 从用户请求中识别主题
  • 从上述映射中加载适当的示例文件
  • 遵循该文件中的说明、语法和最佳实践
  • 将代码示例适配到您的特定用例

使用模板：

  • 参考 templates/ 目录中的模板以进行常见脚手架
  • 将模板适配到您的特定需求和编码风格

API参考

  • 组件API： api/components.md - 所有组件属性和API
  • ConfigProvider API： api/config-provider.md - ConfigProvider组件API和全局配置

最佳实践

  1. 导入样式：在入口文件中导入Ant Design Mobile CSS
  2. 使用ConfigProvider：用ConfigProvider包装您的应用以进行全局配置
  3. 移动优先：首先为移动设备设计
  4. 触摸交互：考虑触摸手势和交互
  5. 性能：优化移动性能
  6. 响应式设计：在不同屏幕尺寸上测试
  7. 可访问性：遵循移动可访问性指南
  8. 主题定制：使用设计令牌实现一致的主题
  9. 国际化：使用带locale的ConfigProvider进行i18n
  10. 组件组合：组合组件以构建复杂UI

资源

关键词

Ant Design Mobile, antd-mobile, 移动UI, React移动, 移动组件, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动, Swiper, 吐司, 对话框, 动作面板, 弹出层, 加载, 导航栏, 标签栏, 图标, 徽章, 标签, 头像, 图片, 图片查看器, 开关, 复选框, 单选框, 步进器, 评分, 滑块, 上传, 网格, 级联选择, 搜索栏, 虚拟输入, 分割线, 间距, 安全区域, 错误块, 空状态, 通知栏, 遮罩, 移动应用, 移动端, 组件库, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动