Ant Design學(xué)習(xí)

使用,記得import { Button } from 'antd';

1,button

(1)單純的按鈕類型,按鈕有四種類型:主按鈕、次按鈕、虛線按鈕、危險(xiǎn)按鈕(根據(jù)type不同:primary,dashed,danger)

ReactDOM.render(<Button type=''primary'' ></Button> ?,mountNode);

(2)帶圖標(biāo)的按鈕類型

2.layout布局(grid layout flex)

3Affix固釘:隨著移動(dòng),可以是某些部件固定地方不隨滑動(dòng)

4,Breadcrumb面包屑:就是目錄層級(jí)導(dǎo)航,可以目錄追蹤

5,Dropdown下拉菜單:包括點(diǎn)擊,懸浮等效果展示使用,包裹需要展示的虛擬節(jié)點(diǎn),一般和Menu搭配使用,可以設(shè)置展示的上下左右位置不同

6,Menu導(dǎo)航菜單:水平的頂部導(dǎo)航菜單和垂直樹形,內(nèi)嵌/彈出菜單,菜單禁用,主題更換,動(dòng)態(tài)更換主圖和下拉形式

7,Pagination分頁,符合多種分頁需求,

8,Steps步驟條:將其分解成一系列步驟,從而簡化任務(wù),水平和垂直狀態(tài),節(jié)點(diǎn)狀態(tài)和節(jié)點(diǎn)樣式

9.AutoComplete自動(dòng)完成:類似填寫提示或者歷史填寫記錄的功能

10.Cascader級(jí)聯(lián)選擇:同框聯(lián)級(jí)和支持帶搜索功能,默認(rèn)選中

11.Checkbox多選框;滿足基本的多選,可做受控組件,多選組

12.DatePicker日期類選擇控件:可拆分年月日單獨(dú)使用,區(qū)間,周期,時(shí)間格式,樣式大小,雙時(shí)間控件,時(shí)間限制區(qū)域選擇,時(shí)間note提示等實(shí)現(xiàn)

13,F(xiàn)orm表單:水平垂直樣式布局和驗(yàn)證規(guī)則,提示

14,Input輸入框:樣式大小;基本使用;也可以配置一些固定組合,前后增加固定組件;內(nèi)置圖標(biāo)等;也可以結(jié)合?Tooltip?組件,提示信息;InputNumber數(shù)字輸入框,在基礎(chǔ)上固定輸入類型

15Mention提及:用于在輸入中提及某人或某事,常用于發(fā)布、聊天或評(píng)論功能。(不太明白這句話和這個(gè)功能)

16.Rate評(píng)分:例如:五星評(píng)分!給小心心啦

17.Radio單選框:滿足基本的多選,可做受控組件,多選組RadioGroup配置一組,

18.Select選擇器:下拉支持單選多選,聯(lián)動(dòng),搜索

19.Slider滑動(dòng)輸入條:水平/垂直滑動(dòng),區(qū)間滑動(dòng),一般使用類似聲量,溫度等

20Switch開關(guān):開關(guān)選擇器??梢钥刂埔恍┛煽亟M件組合

21.TreeSelect樹選擇:樹型選擇控件支持單選多選。

22.TimePicker時(shí)間選擇框:只針對(duì)時(shí)分秒

23.Transfer穿梭框:用直觀的方式在兩欄中移動(dòng)元素,完成選擇行為。

24.Upload上傳:文件選擇上傳和拖拽上傳控件。上傳進(jìn)度條,圖片展示(照片墻),

25.Avatar頭像:大小樣式,徽標(biāo),更換等功能

26,Badge徽標(biāo)數(shù):一般出現(xiàn)在通知圖標(biāo)或頭像的右上角,用于顯示需要處理的消息條數(shù),通過醒目視覺形式吸引用戶處理。

27.Calendar日歷:

28.Card卡片:可用于圖文展示這種類似

29.Carousel走馬燈:圖片輪轉(zhuǎn)

30,Collapse折疊面板:可以折疊/展開的內(nèi)容區(qū)域。對(duì)復(fù)雜區(qū)域進(jìn)行分組和隱藏,保持頁面的整潔。手風(fēng)琴?是一種特殊的折疊面板,只允許單個(gè)內(nèi)容區(qū)域展開。

31,常見 的應(yīng)用;list列表;table表格,tabs標(biāo)簽(頁切換),tag標(biāo)簽(展示關(guān)鍵信息),tree(樹形展示)

32.popover氣泡框:功能類似于jq氣泡插件一樣的效果,Tooltip文字提示則是用于簡單的文字提示氣泡框??捎脕泶嫦到y(tǒng)默的?title?提示

33,Table表格:功能可以類似于jquery表格插件Bootstrap Table

34.Timeline時(shí)間軸:類似里程碑展示

未完待續(xù)。。。。。。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容