第一步安裝ant-design插件
第二步查看項目目錄
第三步運行項目
我們查看index.js文件
這個其實是Datepicker組件的展示效果
第四步我們按照下面的代碼代替Index.js中的內容
我們用到了兩個組件，一個是Message.info,一個是Datepicker
查看效果圖
Message.info還可以寫上消失的時間，比如50ms
Message.info(“點擊成功”,50)
react中的setState就是一個很大的狀態機，我們很多的數據都會在state中聲明出來，通過setState進行存儲狀態。
從我閱讀官網來看，我發現這種方式使用ant其實是不能夠修改主題色的，所以其實這種方式使用ant-design其實是很少的。
接下來我們就按照這種方式去將所有的react組件在我們的demo
button組件
按鈕類型
按鈕有四種類型：主按鈕、次按鈕、虛線按鈕、危險按鈕。主按鈕在同一個操作區域最多出現一次。
圖標按鈕
當需要在 Button 內嵌入 Icon 時，可以設置 icon 屬性，或者直接在 Button 內使用 Icon 組件。
如果想控制 Icon 具體的位置，只能直接使用 Icon 組件，而非 icon 屬性。
按鈕尺寸
按鈕有大、中、小三種尺寸。
通過設置 size 為 large small 分別把按鈕設為大、小尺寸。若不設置 size，則尺寸為中。
不可用狀態
添加 disabled 屬性即可讓按鈕處於不可用狀態，同時按鈕樣式也會改變。
加載中狀態
添加 loading 屬性即可讓按鈕處於加載狀態，最后兩個按鈕演示點擊后進入加載狀態。
多個按鈕組合
按鈕組合使用時，推薦使用1個主操作 + n 個次操作，3個以上操作時把更多操作放到 Dropdown.Button 中組合使用
沒有實現效果
按鈕組合
可以將多個 Button 放入 Button.Group 的容器中。
通過設置 size 為 large small 分別把按鈕組合設為大、小尺寸。若不設置 size，則尺寸為中。
幽靈按鈕
幽靈按鈕將其他按鈕的內容反色，背景變為透明，常用在有色背景上。
官網很贊，直接復制內容即可
layout
其實同bootstrap類似
總份數24份，選擇你需要的份數大小進行分配即可
基礎柵格
從堆疊到水平排列。
使用單一的一組 Row 和 Col 柵格組件，就可以創建一個基本的柵格系統，所有列（Col）必須放在 Row 內。
區塊間隔
柵格常常需要和間隔進行配合，你可以使用 Row 的 gutter 屬性，我們推薦使用 (16+8n)px 作為柵格間隔。
左右偏移
列偏移。
使用 offset 可以將列向右側偏。例如，offset={4} 將元素向右側偏移了 4 個列（column）的寬度。
柵格排序
列排序。
通過使用 push 和 pull 類就可以很容易的改變列（column）的順序。
Flex 布局
Flex 布局基礎。
使用 row-flex 定義 flex 布局，其子元素根據不同的值 start,center,end,space-between,space-around，分別定義其在父節點里面的排版方式。
Flex 對齊
Flex 子元素垂直對齊。
demo我沒有還原
Flex 排序
通過 Flex 布局的 Order 來改變元素的排序。
響應式布局
參照 Bootstrap 的 響應式設計，預設五個響應尺寸：xs sm md lg xl。
柵格配置器
可以簡單配置幾種等分柵格和間距
基本結構
典型的頁面布局。
關於tab切換頁
Tabs標簽頁,在tabpane上面改變的其實是里面的內容喲
關於禁用某一項，直接使用disabled即可
圖標
有圖標的標簽。
滑動
可以左右滑動，容納更多標簽。
代碼很簡單很朴素喲
切換頁改變方向的動態tabs切換頁
卡片式的
Affix固釘
初次見到這個我還挺驚訝的，不知道這個怎么用，不過直接上demo的話，我感覺就很形象了
固定狀態改變的回調
可以獲得是否固定的狀態。
滾動容器
用 target 設置 Affix 需要監聽其滾動事件的元素，默認為 window。
Breadcrumb面包屑
基本
最簡單的用法。
帶有圖標的
圖標放在文字前面。
未完待續。。。