前后端分離開發(fā)之React框架antd的使用

　　antd是基于AntDesign設計體系的ReactUI組件庫，主要用于研發(fā)企業(yè)級中后臺產品。Antd有如下特性：

　　1.提煉自企業(yè)級中后臺產品的交互語言和視覺風格。

　　2.開箱即用的高質量React組件。

　　3.使用TypeScript開發(fā)，提供完整的類型定義文件。

　　4.全鏈路開發(fā)和設計工具體系。

　　5.數(shù)十個國際化語言支持。

　　6.深入每個細節(jié)的主題定制能力。

　　Antd中有幾個常用的組件，Button按鈕應該是使用最多的組件了。

　　1.Button按鈕如下圖：

　　在Antd中提供了五種按鈕。從上圖種可以得知類型有：主按鈕、次按鈕、虛線按鈕、文本按鈕和鏈接按鈕。主按鈕在同一個操作區(qū)域最多出現(xiàn)一次。

　　主按鈕：用于主行動點，一個操作區(qū)域只能有一個主按鈕。默認按鈕：用于沒有主次之分的一組行動點。虛線按鈕：常用于添加操作。文本按鈕：用于最次級的行動點。鏈接按鈕：一般用于鏈接，即導航至某位置。

　　2.Form表單是高性能表單控件，自帶數(shù)據(jù)域管理。包含數(shù)據(jù)錄入、校驗以及對應樣式。

　　如圖：

　　Form表單基本的表單數(shù)據(jù)域控制展示，包含布局、初始化、驗證、提交。Form表單提供了許多API。

　　colon：配置Form.Item的colon的默認值。表示是否顯示label后面的冒號(只有在屬性layout為horizontal時有效)。

　　1.Componen：設置Form渲染元素，為false則不創(chuàng)建DOM節(jié)點。

　　2.Fields：通過狀態(tài)管理（如redux）控制表單字段，如非強需求不推薦使用。

　　3.Form：經(jīng)Form.useForm()創(chuàng)建的form控制實例，不提供時會自動創(chuàng)建。

　　4.initialValues：表單默認值，只有初始化以及重置時生效。

　　5.labelAlign：label標簽的文本對齊方式。

　　6.labelCol：label標簽布局，同Col組件，設置spanoffset值，如{span：3，offset：12}或sm：{span：3，offset：12}。

　　7.Layout：表單布局。

　　8.Name：表單名稱，會作為表單字段id前綴使用。

　　9.Preserve：當字段被刪除時保留字段值。

　　等等還有許多關于Form表單API在這就不多展示了，可有antd官網(wǎng)查看。