antd 是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù),主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。Antd有如下特性:1.提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。2.開箱即用的高質(zhì)量 React 組件。3. 使用 TypeScript 開發(fā),提供完整的類型定義文件。4.全鏈路開發(fā)和設(shè)計(jì)工具體系。5.數(shù)十個(gè)國(guó)際化語(yǔ)言支持。6.深入每個(gè)細(xì)節(jié)的主題定制能力。
Antd中有幾個(gè)常用的組件,Button按鈕應(yīng)該是使用最多的組件了。
1.Button按鈕如下圖:
在 Antd中提供了五種按鈕。從上圖種可以得知類型有:主按鈕、次按鈕、虛線按鈕、文本按鈕和鏈接按鈕。主按鈕在同一個(gè)操作區(qū)域最多出現(xiàn)一次。
主按鈕:用于主行動(dòng)點(diǎn),一個(gè)操作區(qū)域只能有一個(gè)主按鈕。默認(rèn)按鈕:用于沒(méi)有主次之分的一組行動(dòng)點(diǎn)。虛線按鈕:常用于添加操作。文本按鈕:用于最次級(jí)的行動(dòng)點(diǎn)。鏈接按鈕:一般用于鏈接,即導(dǎo)航至某位置。
2.Form表單是高性能表單控件,自帶數(shù)據(jù)域管理。包含數(shù)據(jù)錄入、校驗(yàn)以及對(duì)應(yīng)樣式。
如圖:
Form表單基本的表單數(shù)據(jù)域控制展示,包含布局、初始化、驗(yàn)證、提交。Form表單提供了許多API。
colon:配置 Form.Item 的 colon 的默認(rèn)值。表示是否顯示 label 后面的冒號(hào) (只有在屬性 layout 為 horizontal 時(shí)有效)。
1.Componen:設(shè)置 Form 渲染元素,為 false 則不創(chuàng)建 DOM 節(jié)點(diǎn)。
2.Fields:通過(guò)狀態(tài)管理(如 redux)控制表單字段,如非強(qiáng)需求不推薦使用。
3.Form:經(jīng) Form.useForm() 創(chuàng)建的 form 控制實(shí)例,不提供時(shí)會(huì)自動(dòng)創(chuàng)建。
4.initialValues:表單默認(rèn)值,只有初始化以及重置時(shí)生效。
5.labelAlign:label 標(biāo)簽的文本對(duì)齊方式。
6.labelCol:label 標(biāo)簽布局,同 <Col> 組件,設(shè)置 span offset 值,如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。
7.Layout:表單布局。
8.Name:表單名稱,會(huì)作為表單字段 id 前綴使用。
9.Preserve:當(dāng)字段被刪除時(shí)保留字段值。
等等還有許多關(guān)于Form表單API在這就不多展示了,可有antd官網(wǎng)查看。
如沒(méi)特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自http://m.oulysa.com/news/6297.html