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

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

[html] view plain copy
  1. npm install [email protected] --save  
3.在你的项目中的package.json文件里会有antd-mobile的引用版本,同时它会保存到项目的node_modules目录下,如下图:

react项目的组件库antd-mobile

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

react项目的组件库antd-mobilereact项目的组件库antd-mobile

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

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

react项目的组件库antd-mobile

然后在你的布局中加入:

react项目的组件库antd-mobile

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

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

react项目的组件库antd-mobile

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

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

react项目的组件库antd-mobilereact项目的组件库antd-mobile

相关文章:

  • 2022-12-23
  • 2021-10-03
  • 2022-12-23
  • 2018-11-19
  • 2021-10-21
  • 2022-02-09
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-24
  • 2022-12-23
  • 2021-04-24
相关资源
相似解决方案