ant-design-mobile

适用场景

当用户希望进行以下操作时，请使用此技能：

• 使用 Ant Design Mobile 组件构建 React 移动应用
• 使用移动端 UI 组件（Button、Form、List、Card、Modal、Tabs 等）
• 实现移动端专属功能（下拉刷新、无限滚动、手势）
• 使用 CSS 变量自定义 Ant Design Mobile 主题
• 使用 ConfigProvider 设置国际化

如何使用此技能

工作流

1. 安装 - npm install antd-mobile 并导入 CSS
2. 选择组件 - 根据 UI 需求，从下方参考内容中选择相应组件
3. 加载示例文件 - 每个组件都在 examples/components/ 中提供了详细示例
4. 自定义主题 - 使用 ConfigProvider 或 CSS 变量设置主题

快速入门示例：带验证的移动端表单

import { Button, Form, Input, Toast } from 'antd-mobile';

function LoginForm() {
  const [form] = Form.useForm();

  const onSubmit = async () => {
    const values = await form.validateFields();
    Toast.show({ content: `Welcome, ${values.username}!` });
  };

  return (
    <Form form={form} layout="horizontal" footer={
      <Button block type="submit" color="primary" onClick={onSubmit}>
        Login
      </Button>
    }>
      <Form.Item name="username" label="Username" rules={[{ required: true }]}>
        <Input placeholder="Enter username" />
      </Form.Item>
      <Form.Item name="password" label="Password" rules={[{ required: true }]}>
        <Input type="password" placeholder="Enter password" />
      </Form.Item>
    </Form>
  );
}

组件分类

分类	组件	示例文件
导航	NavBar、TabBar、Tabs、SideBar	examples/components/nav-bar.md、tabs.md
数据录入	Input、Form、Picker、DatePicker、Switch、Checkbox	examples/components/form.md、picker.md
数据展示	List、Card、Badge、Tag、Avatar、Image	examples/components/list.md、card.md
反馈	Modal、Toast、Dialog、ActionSheet、Loading	examples/components/modal.md、toast.md
手势	PullToRefresh、InfiniteScroll、Swiper	examples/components/pull-to-refresh.md

API 参考

• api/components.md - 所有组件的属性和 API
• api/config-provider.md - 全局配置和主题设置

最佳实践

1. 先导入 CSS - 在入口文件中添加 import 'antd-mobile/es/global'
2. 使用 ConfigProvider 包裹应用 - 在应用根节点设置语言环境和主题
3. 使用 CSS 变量设置主题 - 覆盖 --adm-color-primary 等变量以自定义品牌样式
4. 使用 Tree-shaking 优化导入 - 导入单个组件（import { Button } from 'antd-mobile'）以减小打包体积
5. 在真实设备上测试 - 移动端触控行为与桌面浏览器模拟不同

资源

• 官方网站：https://ant-design-mobile.antgroup.com/
• GitHub：https://github.com/ant-design/ant-design-mobile

关键词

antd-mobile、Ant Design Mobile、React 移动端、移动端 UI、移动端、组件库、Button、Form、List、Modal、Tabs、PullToRefresh、InfiniteScroll、Toast、NavBar、TabBar、移动端组件