Skudru noformējums: labākā React UI bibliotēka, ko jebkad esmu izmantojis

Īss ievads Ant Design

Ant dizains, pazīstams arī kā “Antd”, ir ReactJS komponentu bibliotēka. Tas ir atvērts avots ar ķīniešu uzņēmuma nosaukumu “Ant Design” (pieder Alibaba Group). Pēdējo gadu laikā Ant Design ir guvis lielu uzmanību no atvērtā koda kopienas, kurā GitHub ir vairāk nekā 35 tūkstoši zvaigžņu. Lai arī tas nāk no Ķīnas, bet, pateicoties sabiedrībai, tas ir labi dokumentēts angļu valodā.

Izcilās skudru dizaina iezīmes:
 . Atbalstiet gandrīz visu mūsdienu pārlūku (ieskaitot IE 9+)
 . Uzņēmējdarbības klases dizaina valoda tīmekļa lietojumprogrammām
 . Augstas kvalitātes komplekts Reaģējiet komponentus ārpus kastes
 . Labi uzrakstīts mašīnrakstā ar pabeigtu tipa sistēmu

Ant dizaina režģis + izkārtojuma sistēma

Ja jūs jau iepriekš esat strādājis ar Bootstrap, tad ar “Antd” režģa sistēmu jūs jutīsities kā mājās. “Antd” režģu sistēma balstās uz Rows and Cols, tāpat kā jebkura cita lietotāja saskarnes bibliotēka. Bet 12 collu vietā režģa sistēma “Antd” jūsu ekrāna laukumu sadala 24 colās, kas redzamo laukumu var padarīt pielāgojamu.

Tikpat vienkārši norādīt notekcaurules starp kolām:

Ne tikai tas, ka “Antd” režģu sistēma atbalsta arī 6 dažādus pārtraukšanas punktus, lai jūs varētu padarīt savu vietni atsaucīgu un labi izskatās jebkurā ierīcē:

Ja jūtat, ka režģu sistēma ir nedaudz pievilcīga lapas noformēšanai, “Antd” komplektācijā ir Layout sistēma, kas var palīdzēt jums viegli rīkoties ar kopējo lapas izkārtojumu. “Antd” izkārtojums nodrošina galvenes, sidra, satura un kājenes, kas ir tikai satura iesaiņojuma komponenti, lai jūs varētu izkārtot savu lapu tik un tā, kā varat iedomāties.

Augšminētā attēla kods ir:

Augstas kvalitātes ikonu komplekts

Neatkarīgi no nosaukuma “Antd” nāk milzīgs skaits ikonu, kas var izpildīt jebkuru no jūsu lietotnes prasībām. Komplektā “Antd” esošajām ikonām ir 2 galvenās iespējas: izzīmētās ikonas un aizpildītās ikonas. Rakstīšanas laikā viņi pat strādā pie pielāgotajām ikonām:

Šīs ikonas izmantot ir vienkārši, jo norādiet, kuru ikonu vēlaties izmantot kā virkni:

Jaudīgs formas komponenta atbalsts

Ja esat strādājis ar tīmekli, jūs noteikti strādājāt ar formu. Mēs visi zinām, ka forma ir neaizstājama tīmekļa sastāvdaļa.

“Antd” nodrošina mūs ar formu komponentu, kas ir iesaiņojums jūsu FormItems. Katrā FormItem varat izmantot ievades, TextArea, izvēles rūtiņu, radio vai pat Date / TimePicker.

Izmantojot “Antd”, mums vairs nav nepieciešams kontrolēts komponents, jo tā api var ar mums rīkoties. Bet visspēcīgākais “Antd” formas ierocis ir tā apstiprināšanas sistēma. Viss, kas jums jādara, ir jānorāda sava FormItem noteikumi. Piem., Vērtības tipam jābūt virknei vai skaitlim, ievades numura minimālajai vai maksimālajai vērtībai, vai arī šis lauks ir vajadzīgs vai nav, un pat ir jāizpilda Regex vai kāds kādreiz pielāgots validācijas noteikums, par kuru jūs varat domāt (ieskaitot async validāciju ar servera pusi). Ja FormItem neizpildīja nevienu no jūsu validācijas noteikumiem, tiks parādīts tūlītējs ziņojums un validācijas statuss.

Globālais atsauksmju komponents

Iedomājieties, vai jūsu lietotne var sniegt tūlītēju paziņojumu par lietotāju darbībām tāpat kā Facebook, kad kāds jūs atzīmē kā statusu? To var viegli sasniegt, izmantojot Antd paziņojumu, ziņojumu un daudzus citus atsauksmju komponentus. Tas izskatās šādi:

Ant dizains, manuprāt, ir viena no labākajām React UI bibliotēkām, ko var salīdzināt ar React Google Material UI bibliotēku. Iet lasīt dokumentus, lai uzzinātu vairāk interesantu lietu par to un LAIMĪGU KODĒŠANU !!!!