Ant Design(ui框架)


官方文档:https://ant.design/docs/react/introduce-cn

说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架。里面的组件很完善,开发中后台系统非常方便。分别基于react、vue、angular框架,各自开发了一套 Ant Design 的UI框架。(这里主要讲react框架的 Ant Design)

一、通用组件

  1、Button 按钮

  2、Icon 图标

  3、Typography 排版: 这个是文案的排版

二、布局

  1、Grid 栅格:24 栅格系统,和  bootstrap中的12栅格系统一样的功能。

    a、<Row gutter={16}>,给Col 组件之间 添加16像素的间距【原理和bootstrap差不多】。他们之间的间距是以padding撑出来的,所以在 Col 组件上不要使用背景色,最好其它的样式都不要设置吧。

    b、两种栅格系统【基础栅格、flex栅格布局】

  2、Layout布局:这个是针对  页面级整体布局

三、导航

  1、Affix固钉:

  2、Breadcrumb面包屑:

  3、Dropdown下拉菜单:

  4、Menu导航菜单:

  5、Pagination分页:

  6、PageHeader页头:

  7、Steps步骤条:

四、数据录入          看官方文档

  1、AutoComplete自动完成

  2、Checkbox多选框

  3、Cascader级联选择 

  。。。。。。

五、反馈             看官方文档

  1、Modal对话框

  2、Drawer抽屉

  。。。。。。

六、其它           看官方文档

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM