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