SuperAPI AI 工具集

ant-design-mobile

前端与建站

查看项目

更新于 10-16 03:15

技能介绍

用途:当需要构建 React 移动端应用、使用移动端 UI 组件(Button、Form、List、Card、Modal、Tabs 等)、实现下拉刷新与无限滚动等移动端特性、通过 CSS 变量定制主题,或用 ConfigProvider 配置国际化时,可使用本技能。

主要能力:按导航(NavBar、TabBar、Tabs、SideBar)、数据录入(Input、Form、Picker、DatePicker、Switch、Checkbox)、数据展示(List、Card、Badge、Tag、Avatar、Image)、反馈(Modal、Toast、Dialog、ActionSheet、Loading)、手势(PullToRefresh、InfiniteScroll、Swiper)等类别提供组件参考,并附 API 文档(api/components.md、api/config-provider.md)与示例文件(examples/components/ 下按组件分文件)。

使用方式:先执行 npm install antd-mobile 并引入 CSS;再按 UI 需求选择组件;每个组件在 examples/components/ 中有详细示例;主题通过 ConfigProvider 或 CSS 变量定制。快速示例为带校验的移动端表单,使用 Form.useForm、form.validateFields 与 Toast.show 等 API。

最佳实践:入口文件先引入 import 'antd-mobile/es/global';在应用根部用 ConfigProvider 设置 locale 与主题;用 CSS 变量(如 --adm-color-primary)覆盖实现品牌定制;按需导入单个组件以减小打包体积;在真机上测试,因为移动端触摸行为与桌面浏览器模拟不同。

资源:官网 https://ant-design-mobile.antgroup.com/ ,GitHub https://github.com/ant-design/ant-design-mobile 。

限制:资料未提供版本兼容范围、浏览器支持、收费与授权信息,暂未提供。