Ant tervezés: A legjobb React felhasználói felület könyvtár, amit valaha használtam

Az Ant Design rövid bemutatása

Az AntDd, más néven „Antd” a ReactJS komponenskönyvtára. Nyílt forráskódú, egy „Ant Design” kínai cégnévvel (az Alibaba Group tulajdonosa). Az elmúlt években az Ant Design nagy figyelmet kapott a nyílt forráskódú közösségből, több mint 35 ezer csillaggal a GitHub-on. Bár Kínából érkezik, de a közösségnek köszönhetően jól dokumentált angolul.

Az Ant Design kiemelkedő tulajdonságai:
 . Támogatja szinte az összes modern böngészőt (beleértve az IE 9+ -ot is)
 . Vállalati szintű tervezési nyelv a webes alkalmazásokhoz
 . Egy sor kiváló minőségű React alkatrész a dobozból
 . Jól megírva Typcript-ben, kitöltött típusú rendszerrel

Ant Design Grid + elrendezési rendszer

Ha korábban már dolgozott a Bootstrap-szal, akkor otthon érezheti magát az „Antd” rácsrendszerrel. Az „Antd” rácsrendszer a Rows and Cols-ra épül, mint bármely más felhasználói felület könyvtárra. De 12 másodperc helyett az „Antd” rácsrendszer a képernyő területét 24 oszlopra osztja, ami a látható területet testreszabhatóbbá teszi.

Ugyanolyan egyszerű megadni a csatornák közötti ereszcsatorna beállítását:

Nemcsak hogy az „Antd” rácsrendszer 6 különféle pontot is támogat, így bármilyen eszközön jól reagálhat webhelyére, és jól néz ki:

Ha úgy érzi, hogy a rácsrendszer kissé megterheli egy oldal elrendezését, akkor az “Antd” elrendezéssel rendelkezik, amely segít az oldal általános elrendezésének kezelésében. Az „Antd” elrendezés fejlécet, oldalt, tartalmat és láblécet biztosít, amelyek csak a tartalom burkolóelemei, így az oldal elrendezését el tudja látni.

És a fenti kép kódja:

Kiváló minőségű ikonok halmaza

A dobozból az „Antd” hatalmas számú ikonnal érkezik, amelyek teljesíthetik az alkalmazás bármelyik követelményét. A „Antd” ikonok beállítása 2 fő opcióval rendelkezik: Vázolt ikonok és Töltött ikonok. Még az egyedi ikonokon is dolgoznak az írás idején:

Ezen ikonok használata egyszerű, mivel meghatározhatja, melyik ikont kívánja használni karakterláncként:

Erőteljes támogatás az űrlap-összetevőhöz

Ha már dolgozott az interneten, akkor határozottan az űrlappal is dolgozott. Mindannyian tudjuk, hogy a forma nélkülözhetetlen része az internetnek.

Az „Antd” egy űrlapkomponenst kínál nekünk, amely egy burkolólap az Ön FormItems számára. Minden FormItem-hez használhatja az Input, a TextArea, a Jelölőnégyzetet, a Rádiót vagy akár a Date / TimePicker alkalmazást.

Az „Antd” esetén nincs többé szükségünk Vezérelt komponensre, mert az api képes ezt kezelni nekünk. De az „Antd” forma legerősebb fegyvere a validációs rendszere. Csak annyit kell tennie, hogy meg kell határoznia a FormItem szabályait. Például: az érték típusának karakterláncnak vagy számnak kell lennie, a bemeneti szám minimális vagy maximális értékének, vagy erre a mezőre van szükség, vagy sem, és teljesítenie kell még egy Regex-et, vagy akármi olyan egyedi érvényesítési szabályt, amelyre gondolhat (ideértve az async érvényesítést a szerver oldali oldalról). Ha a FormItem nem tett eleget az érvényesítési szabályoknak, akkor azonnal megjelenik az üzenet és az érvényesítési állapot.

Globális visszajelzési komponens

Képzelje el, ha az alkalmazás azonnali értesítést nyújthat-e a felhasználói cselekedetekről, akárcsak a Facebookon, amikor valaki státuszt címkéz? Ezt könnyedén elérheti az Antd Notification, az Message és még sok más Feedback összetevő segítségével. Így néz ki:

Az Ant Design véleményem szerint az egyik legjobb React felhasználói felület könyvtár, amely összehasonlítható a Google Material UI könyvtárával a React számára. Olvassa el a dokumentumokat, hogy még több érdekes dolgot megtudjon róla és a HAPPY CODING !!!!