Chumoli dizayni: Men ilgari foydalangan eng yaxshi reaktiv interfeys kutubxonasi

Chumoli dizayniga qisqacha kirish

Ant Ant Design, shuningdek "Antd" deb nomlanuvchi bu ReactJS uchun komponentlar kutubxonasidir. U "Ant Design" Xitoy kompaniyasi tomonidan ochiq manbadir (Alibaba Group egasi). So'nggi yillarda Ant Dizayni GitHub-da 35k yulduzli yulduzlarga ega ochiq manba jamoatchiligining e'tiborini qozondi. Garchi Xitoydan kelgan bo'lsa-da, ammo jamoatchilikka rahmat, ingliz tilida yaxshi hujjatlangan.

Chumoli dizaynining ajoyib xususiyatlari:
 . Deyarli barcha zamonaviy brauzerlarni qo'llab-quvvatlang (shu jumladan IE 9+)
 . Veb-ilovalar uchun korxona sinfidagi dizayn tili
 . Yuqori sifatli reaktsiya komponentlari to'plami qutidan tashqarida
 . Tizimli tugallangan Typecript tizimida yaxshi yozilgan

Chumoli Dizayn Grid + Layout tizimi

Agar siz oldin Bootstrap bilan ishlagan bo'lsangiz, unda siz o'zingizni "Antd" panjara tizimida o'zingizni yaxshi his qilasiz. "Antd" panjara tizimi, har qanday boshqa UI kutubxonasi kabi, qatorlar va ustunlarga asoslanadi. Ammo "Antd" panjara tizimi 12 ta tugun o'rniga ekranning maydonini 24 ta tugmachaga ajratadi, bu sizning ko'rinadigan hududingizni yanada moslashtirishi mumkin.

Kollar orasidagi bo'shliqni belgilash xuddi shunday oson:

Undan tashqari, "Antd" panjara tizimi 6 ta turli xil kirish nuqtalarini ham qo'llab-quvvatlaydi, shuning uchun siz saytingizni sezgir va har qanday qurilmada yaxshi ko'rinishini yaratishingiz mumkin:

Agar siz sahifani joylashtirish uchun panjara tizimining ozgina sarf-xarajati bor deb hisoblasangiz, "Antd" Layout tizimi bilan birga keladi, bu sizga sahifaning umumiy tartibini osonlikcha hal qilishga yordam beradi. "Antd" sxemasi Header, Sider, Content, Footer-larni ta'minlaydi, ular sizning tarkibingiz uchun shunchaki o'ralgan komponentlar bo'lib, o'z sahifangizni o'zingiz tasavvur qilishingiz mumkin.

Va yuqoridagi rasmning kodi:

Yuqori sifatli piktogrammalar to'plami

"Antd" qutisidan ilovalaringizning har qanday talablarini qondiradigan juda ko'p piktogramma mavjud. "Antd" piktogrammalari ikkita asosiy variant bilan birga keladi: Belgilangan ikonkalar va to'ldirilgan piktogrammalar. Ushbu yozuv paytida ular hatto Custom piktogrammalarida ishlaydilar:

Ushbu piktogramlardan foydalanish shunchaki simli sifatida qaysi belgini ishlatishni belgilash kabi oson:

Form komponentini kuchli qo'llab-quvvatlash

Agar siz Internet bilan ishlayotgan bo'lsangiz, shak-shubhasiz ishladingiz. Barchamiz bilamizki, bu shakl Internetning ajralmas qismidir.

"Antd" bizga FormItems uchun o'rash vositasi bo'lgan Form komponentini taqdim etadi. Har bir FormItem uchun siz Input, TextArea, Checkbox, Radio yoki hatto Date / TimePicker-dan foydalanishingiz mumkin.

"Antd" bilan birga, biz endi boshqariladigan komponentga muhtoj emasmiz, chunki uning api biz uchun buni hal qilishi mumkin. Ammo "Antd" shaklining eng kuchli quroli bu uni tekshirish tizimi. Buning uchun faqat FormItem uchun qoidalarni ko'rsatish kerak. Masalan: qiymat turi satr yoki sondan iborat bo'lishi kerak, kirish raqamining min yoki maksimal qiymati yoki bu maydon talab qilinadi yoki kerak emas va hatto Regex-ni yoki har doim odatiy tekshirish qoidasini (siz server tomonidan asinx-autentifikatsiyani qo'shgan holda) o'ylab topishingiz mumkin. Agar FormItem sizning biron bir qoidangizni bajarmagan bo'lsa, tezkor xabar va tekshirish holati paydo bo'ladi.

Global geribildirim komponenti

Tasavvur qiling-a, kimdir sizni maqomingizni belgilab qo'yganda, sizning ilovangiz xuddi Facebook-dagi kabi foydalanuvchilarning xatti-harakatlari haqida tezkor xabar bera oladimi? Bunga Antd Notification, Message va boshqa ko'plab fikr-mulohazalar yordamida osongina erishishingiz mumkin. Bu quyidagicha ko'rinadi:

Mening fikrimcha, chumoli dizayni - bu reaktsiya qilish uchun Google Material UI kutubxonasi bilan taqqoslash mumkin bo'lgan eng yaxshi reaktiv interfeys kutubxonasidir. Bu haqda ko'proq qiziqarli narsalarni bilish uchun DASTLARni o'qing va Baxtli kodlash !!!!