Ant Design: Det bedste React UI-bibliotek, jeg nogensinde har brugt

En kort introduktion til Ant Design

Ant Design, også kendt som “Antd”, er et komponentbibliotek til ReactJS. Det er open source med et kinesisk firmanavn “Ant Design” (Ejes af Alibaba Group). I løbet af de sidste år har Ant Design fået en masse opmærksomhed fra open source-samfundet med over 35k stjerner på GitHub. Selvom det kommer fra Kina, men takket være samfundet, er det godt dokumenteret på engelsk.

Fremragende funktioner i Ant Design:
 . Understøtt næsten hele moderne browser (inklusive IE 9+)
 . Enterprise-design designsprog til webapplikationer
 . Et sæt højde-kvalitet React-komponenter ud af boksen
 . Godt skrevet i typeskrift med afsluttet typesystem

Ant Design Grid + Layout-system

Hvis du tidligere har arbejdet med Bootstrap, vil du føle dig hjemme med "Antd" -nettet. “Antd” -gitter-system baserer sig på rækker og kolonner, ligesom ethvert andet UI-bibliotek. Men i stedet for 12 cols, opdeler “Antd” gittersystem dit skærmområde i 24 cols, hvilket kan gøre dit synlige område bliver mere tilpasset.

Det er lige så let at specificere tagrenne mellem cols:

Ikke kun det, "Antd" -nettet understøtter også 6 forskellige breakpoints, så du kan gøre dit websted responsivt og ser godt ud på enhver enhed:

Hvis du føler, at gittersystemet er en smule overhead til udlægning af en side, kommer "Antd" med et layout-system, der kan hjælpe dig med at håndtere det samlede layout på en side let. "Antd" -layout giver Header, Sider, Content, Footer, som bare er indpakningskomponenter til dit indhold, så du kan layout din side alligevel, du kan forestille dig.

Og koden for ovenstående billede er:

Et sæt ikoner af høj kvalitet

Ud af kassen kommer “Antd” med et stort antal ikoner, der kan opfylde ethvert af dine appkrav. Sæt “Antd” ikoner leveres med 2 hovedindstillinger: Skitserede ikoner og udfyldte ikoner. De arbejder endda med tilpassede ikoner på dette tidspunkt:

Brug af disse ikoner er lige så let som at specificere hvilket ikon, du vil bruge som en streng:

Kraftig support til formkomponent

Hvis du har arbejdet med nettet, har du bestemt arbejdet med formular. Vi ved alle, at form er en uundværlig del af Internettet.

“Antd” giver os en formkomponent, der er en indpakning til dine FormItems. For hvert FormItem kan du bruge Input, TextArea, Checkbox, Radio eller endda Date / TimePicker.

Med "Antd" har vi ikke brug for kontrolleret komponent mere, fordi dens api kan håndtere dette for os. Men det mest kraftfulde våben i form af "Antd" er dens valideringssystem. Alt hvad du skal gøre er at specificere regler for dit FormItem. Eks: værditype skal være streng eller nummer, min eller maks værdi for et inputnummer, eller dette felt er påkrævet eller ej og endda opfylde en Regex eller hvad nogensinde tilpasset valideringsregel du kan tænke på (Inklusive async-validering med serversiden). Hvis FormItem ikke opfyldte nogen af ​​dine valideringsregler, vil der være en hurtig meddelelse og valideringsstatus.

Global feedback-komponent

Forestil dig, om din app kan give øjeblikkelig anmeldelse til brugerhandlinger ligesom på Facebook, når nogen mærker dig med en status? Du kan nemt opnå dette med Antd Notification, Message og mange andre feedbackkomponenter. Sådan ser det ud:

Ant Design er efter min mening et af de bedste React UI-biblioteker, som kan sammenlignes med Google Material UI-bibliotek til React. Gå og læse dokumenterne for at finde ud af mere interessante ting ved det og HAPPY CODING !!!!