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, Form, List, Card, Modal, Tabs, etc.)
- Implement mobile-specific features (pull-to-refresh, infinite scroll, gestures)
- Customize the Ant Design Mobile theme with CSS variables
- Set up internationalization with ConfigProvider
How to use this skill
Workflow
- Install -
npm install antd-mobileand import CSS - Choose components - Match the UI need to the component from the reference below
- Load the example file - Each component has a detailed example in
examples/components/ - Customize theme - Use ConfigProvider or CSS variables for theming
Quick-Start Example: Mobile Form with Validation
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>
);
}Component Categories
| Category | Components | Example Files |
|---|---|---|
| Navigation | NavBar, TabBar, Tabs, SideBar | examples/components/nav-bar.md, tabs.md |
| Data Entry | Input, Form, Picker, DatePicker, Switch, Checkbox | examples/components/form.md, picker.md |
| Data Display | List, Card, Badge, Tag, Avatar, Image | examples/components/list.md, card.md |
| Feedback | Modal, Toast, Dialog, ActionSheet, Loading | examples/components/modal.md, toast.md |
| Gestures | PullToRefresh, InfiniteScroll, Swiper | examples/components/pull-to-refresh.md |
API Reference
api/components.md- All component props and APIsapi/config-provider.md- Global configuration and theming
Best Practices
- Import CSS first - Add
import 'antd-mobile/es/global'in your entry file - Wrap with ConfigProvider - Set locale and theme at the app root
- Use CSS variables for theming - Override
--adm-color-primaryetc. for custom branding - Tree-shake imports - Import individual components (
import {Button} from 'antd-mobile') for smaller bundles - Test on real devices - Mobile touch behavior differs from desktop browser emulation
Resources
- Official Website: https://ant-design-mobile.antgroup.com/
- GitHub: https://github.com/ant-design/ant-design-mobile
Keywords
antd-mobile, Ant Design Mobile, React mobile, mobile UI, 移动端, 组件库, Button, Form, List, Modal, Tabs, PullToRefresh, InfiniteScroll, Toast, NavBar, TabBar, mobile components