react-7 组件库 Ant Design

react-7 组件库 Ant Design_第1张图片

 1.安装组件库

npm install --save antd-mobile

常用组件
Swiper
InfiniteScroll 

SideBar
NavBar
Toast
Dialog
2. 按需导入
我们可以根据项目需要导入需要用到的组件, 该组件的样式会自动导入.

eg:

import { Button } from 'antd-mobile';

下载组件库,icon:特殊一点,导入使用

//下载
npm install --save antd-mobile-icons

//导入使用
import { AntOutline } from 'antd-mobile-icons'

常用组件:

 tabbar

react-7 组件库 Ant Design_第2张图片

 myswiper

拿到数据,通过组件传递给组件内。父向子

react-7 组件库 Ant Design_第3张图片

 接收使用

react-7 组件库 Ant Design_第4张图片

navbar顶部返回

react-7 组件库 Ant Design_第5张图片

 navbar 配合 model弹框:toast组件需要导入才能使用

 清除model弹框

react-7 组件库 Ant Design_第6张图片

 这样先clear再show,各个场合适合比如,dialog对话框react-7 组件库 Ant Design_第7张图片

 dialog弹出框,取消确定

react-7 组件库 Ant Design_第8张图片

你可能感兴趣的:(react,react.js,vue.js,前端)