antd是基于AntDesign設計體系的ReactUI組件庫,主要用于研發(fā)企業(yè)級中后臺產品。Antd有如下特性:
1.提煉自企業(yè)級中后臺產品的交互語言和視覺風格。
2.開箱即用的高質量React組件。
3.使用TypeScript開發(fā),提供完整的類型定義文件。
4.全鏈路開發(fā)和設計工具體系。
5.數十個國際化語言支持。
6.深入每個細節(jié)的主題定制能力。
Antd中有幾個常用的組件,Button按鈕應該是使用最多的組件了。
1.Button按鈕如下圖:
在Antd中提供了五種按鈕。從上圖種可以得知類型有:主按鈕、次按鈕、虛線按鈕、文本按鈕和鏈接按鈕。主按鈕在同一個操作區(qū)域最多出現一次。
主按鈕:用于主行動點,一個操作區(qū)域只能有一個主按鈕。默認按鈕:用于沒有主次之分的一組行動點。虛線按鈕:常用于添加操作。文本按鈕:用于最次級的行動點。鏈接按鈕:一般用于鏈接,即導航至某位置。
2.Form表單是高性能表單控件,自帶數據域管理。包含數據錄入、校驗以及對應樣式。
如圖:
Form表單基本的表單數據域控制展示,包含布局、初始化、驗證、提交。Form表單提供了許多API。
colon:配置Form.Item的colon的默認值。表示是否顯示label后面的冒號(只有在屬性layout為horizontal時有效)。
1.Componen:設置Form渲染元素,為false則不創(chuàng)建DOM節(jié)點。
2.Fields:通過狀態(tài)管理(如redux)控制表單字段,如非強需求不推薦使用。
3.Form:經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官網查看。