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

antd是基于 Ant Design 設(shè)計體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品。Antd有如下特性：1.提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格。2.開箱即用的高質(zhì)量 React 組件。3.使用 TypeScript 開發(fā)，提供完整的類型定義文件。4.全鏈路開發(fā)和設(shè)計工具體系。5.數(shù)十個國際化語言支持。6.深入每個細節(jié)的主題定制能力。
Antd中有幾個常用的組件，Button按鈕應(yīng)該是使用最多的組件了。

1.Button按鈕如下圖：
在 Antd中提供了五種按鈕。從上圖種可以得知類型有：主按鈕、次按鈕、虛線按鈕、文本按鈕和鏈接按鈕。主按鈕在同一個操作區(qū)域最多出現(xiàn)一次。
主按鈕：用于主行動點，一個操作區(qū)域只能有一個主按鈕。默認按鈕：用于沒有主次之分的一組行動點。虛線按鈕：常用于添加操作。文本按鈕：用于最次級的行動點。鏈接按鈕：一般用于鏈接，即導(dǎo)航至某位置。
2.Form表單是高性能表單控件，自帶數(shù)據(jù)域管理。包含數(shù)據(jù)錄入、校驗以及對應(yīng)樣式。
如圖：

Form表單基本的表單數(shù)據(jù)域控制展示，包含布局、初始化、驗證、提交。Form表單提供了許多API。
colon：配置 Form.Item 的colon的默認值。表示是否顯示 label 后面的冒號 (只有在屬性 layout 為 horizontal 時有效)。
1.Componen：設(shè)置 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 標(biāo)簽的文本對齊方式。
6.labelCol：label 標(biāo)簽布局，同<Col>組件，設(shè)置spanoffset值，如{span: 3, offset: 12}或sm: {span: 3, offset: 12}。
7.Layout：表單布局。
8.Name：表單名稱，會作為表單字段id前綴使用。

名稱欄目：前后端分離開發(fā)之React框架antd的使用
本文路徑：http://www.bm7419.com/news43/236543.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、搜索引擎優(yōu)化、全網(wǎng)營銷推廣、虛擬主機、企業(yè)網(wǎng)站制作、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)