Ant Design: de beste React UI-bibliotheek die ik ooit heb gebruikt

Een korte introductie tot Ant Design

Ant Design, ook bekend als "Antd" is een componentenbibliotheek voor ReactJS. Het is open source van een Chinese bedrijfsnaam "Ant Design" (eigendom van Alibaba Group). In de afgelopen jaren heeft Ant Design veel aandacht gekregen van de open source-community met meer dan 35.000 sterren op GitHub. Hoewel afkomstig uit China, maar dankzij de gemeenschap, is het goed gedocumenteerd Engels.

Uitstekende eigenschappen van Ant Design:
 . Ondersteuning voor bijna alle moderne browsers (inclusief IE 9+)
 . Enterprise-class designtaal voor webapplicaties
 . Een set hoogwaardige React-componenten uit de doos
 . Goed geschreven in Typescript met voltooid type systeem

Ant Design Grid + Layout-systeem

Als je al eerder met Bootstrap hebt gewerkt, voel je je meteen thuis bij het "Antd" -rastersysteem. 'Antd'-rastersysteem is gebaseerd op Rows and Cols, net als elke andere UI-bibliotheek. Maar in plaats van 12 cols, verdeelt het "Antd" -raster systeem uw schermgebied in 24 cols waardoor uw zichtbare gebied meer aanpasbaar kan worden.

Goot specificeren tussen cols is net zo eenvoudig:

Niet alleen dat, het 'Antd'-rastersysteem ondersteunt ook 6 verschillende breekpunten, zodat u uw site responsief kunt maken en er op elk apparaat goed uitziet:

Als u vindt dat het rastersysteem een ​​beetje overhead is om een ​​pagina op te maken, wordt "Antd" geleverd met een lay-outsysteem waarmee u de algemene lay-out van een pagina gemakkelijk kunt verwerken. "Antd" -lay-out biedt koptekst, Sider, Content, Footer, die slechts wrapper-componenten zijn voor uw inhoud, zodat u uw pagina kunt opmaken op elke manier die u zich kunt voorstellen.

En de code voor de bovenstaande afbeelding is:

Een set iconen van hoge kwaliteit

Bij levering wordt "Antd" geleverd met een groot aantal pictogrammen die aan al uw app-vereisten kunnen voldoen. "Antd" -pictogrammen worden geleverd met 2 hoofdopties: overzichtspictogrammen en gevulde pictogrammen. Ze werkten zelfs aan aangepaste pictogrammen op het moment van schrijven:

Het gebruik van deze pictogrammen is eenvoudig en geeft aan welk pictogram u als tekenreeks wilt gebruiken:

Krachtige ondersteuning voor formuliercomponent

Als je met internet hebt gewerkt, heb je zeker met formulier gewerkt. We weten allemaal dat vorm een ​​onmisbaar onderdeel van het web is.

"Antd" biedt ons een formulieronderdeel dat een verpakking voor uw formulieren is. Voor elk FormItem kunt u Input, TextArea, Checkbox, Radio of zelfs Date / TimePicker gebruiken.

Met "Antd" hebben we geen Controlled-Component meer nodig omdat de API dit voor ons aankan. Maar het krachtigste wapen van de "Antd" -vorm is het validatiesysteem. Het enige dat u hoeft te doen, is regels opgeven voor uw FormItem. Vb: waardetype moet string of nummer zijn, min of max waarde van een invoernummer of dit veld is verplicht of niet en voldoet zelfs aan een Regex of welke aangepaste validatieregel u ook kunt bedenken (inclusief async-validatie met server-side). Als het FormItem niet aan uw validatieregels voldeed, is er een promptbericht en een validatiestatus.

Wereldwijde feedbackcomponent

Stel je voor dat je app gebruikersacties net als op Facebook onmiddellijk kan melden wanneer iemand je tagt met een status? U kunt dit eenvoudig bereiken met Antd Notification, Message en vele andere Feedback-componenten. Zo ziet het eruit:

Naar mijn mening is Ant Design een van de beste React UI-bibliotheken die vergelijkbaar zijn met de Google Material UI-bibliotheek voor React. Lees de documentatie om er meer interessante dingen over te vinden en GELUKKIG CODEREN !!!!