react项目的组件库antd-mobile

1.antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库,这个组件库拥有很多使用的组件,下面我来介绍一下他的用法:

2.按照官网http://beta.mobile.ant.design/docs/react/introduce-cn上的操作步骤:

npm install antd-mobile@next --save
3.在你的项目中的package.json文件里会有antd-mobile的引用版本,同时它会保存到项目的node_modules目录下,如下图:

4.之前项目需要做一个日历选择时间,但是一个完整成熟的日历很麻烦,最好是选用一些已经开源,比较成熟的组件,比如这个,在官网的一个简单的时间选择器:


5.ok,我们把它放到项目中:

按照官网上http://beta.mobile.ant.design/components/date-picker-cn/ 的要求,在你的页面上import,如下:

然后在你的布局中加入:

注意:一定要根据官网!!!

6.最后我们用的是webstorm打开项目:在底部栏输入:npm start


然后在浏览器中启用你的目录,(项目开始的时候老大会告诉你的。。。)加上你自己的文件名(配置好router)

刚刚展示的是一个弹框,和日历这些组件的用法是一样的,效果如下:


(完)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
umi是一款基于React的可扩展企业级前端应用框架,它提供了一套完整的开发和构建工具链,可以帮助开发者快速搭建复杂的单页面应用和多页面应用。umi的设计理念是约定大于配置,通过约定的文件结构可以自动生成路由、动态加载页面和组件等,同时还支持插件机制,可以轻松地集成各种功能和扩展。umi还提供了一些常用的功能和工具,如国际化、权限控制、数据模拟等,方便开发者快速开发高质量的前端应用。 antd-mobile是一个基于Reactantd设计体系的移动端UI组件,它提供了一系列优雅美观的组件,如按钮、导航栏、列表、输入框等,可以帮助开发者快速构建优质的移动端用户界面。antd-mobile组件风格简约而不简单,同时还支持主题定制和样式覆盖,开发者可以根据自己的需要进行自定义。antd-mobile还提供了一些常用的功能和工具,如表单校验、图片裁剪、手势操作等,方便开发者解决一些常见的问题。 umi和antd-mobile可以很好地配合使用,umi提供了一套完整的开发框架和工具链,而antd-mobile提供了美观实用的移动端UI组件,开发者可以通过umi搭建整个项目的结构和配置,然后使用antd-mobile组件来构建用户界面。umi和antd-mobile都是社区广泛使用和维护的项目,拥有强大的生态系统和活跃的社区支持,开发者在使用过程中可以获得良好的技术支持和文档资源,提高开发效率和质量。总之,umi和antd-mobile是一对强力组合,可以帮助开发者快速构建优质的企业级移动应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值