Ant Design: Най-добрата библиотека React UI, която някога съм използвал

Кратко въведение към Ant Design

Ant Design, известен още като „Antd“, е библиотека с компоненти за ReactJS. Той е отворен код с име на китайска компания "Ant Design" (собствено от Alibaba Group). През последните години Ant Design спечели много внимание от страна на общността с отворен код с над 35 000 звезди на GitHub. Въпреки че идва от Китай, но благодарение на общността, той е добре документиран английски.

Изключителни характеристики на Ant Design:
 , Поддържа почти всички съвременни браузъри (включително IE 9+)
 , Език за дизайн в бизнес класа за уеб приложения
 , Комплект от висококачествени компоненти React от кутията
 , Добре написан на Typescript със завършена тип система

Ant Design Grid + Layout система

Ако сте работили с Bootstrap преди, тогава ще се почувствате като у дома си с решетка „Antd“. Системната система „Antd“ се основава на редове и Cols, както всяка друга библиотека с потребителски интерфейс. Но вместо 12 cols, решетъчната система „Antd“ разделя екрана ви на 24 cols, което може да направи видимата ви зона да стане по-персонализирана.

Посочете улука между cols е също толкова лесно:

Не само това, мрежовата система „Antd“ също поддържа 6 различни точки на прекъсване, така че можете да направите сайта си отзивчив и изглежда добре на всяко устройство:

Ако смятате, че решетъчната система е малко над главата за оформление на страница, „Antd“ идва със система за оформление, която може да ви помогне лесно да боравите с цялостното оформление на страницата. Оформлението „Antd“ предоставя Header, Sider, Content, Footer, които са просто компоненти за обвивка на вашето съдържание, за да можете да подреждате страницата си, както можете да си представите.

А кодът за горното изображение е:

Набор от висококачествени икони

„Antd“ се предлага с огромен брой икони, които могат да изпълнят всяко от вашите изисквания за приложение. Комплектът икони „Antd“ се предлага с 2 основни опции: очертани икони и запълнени икони. Те дори работят върху персонализирани икони по време на това писане:

Използването на тези икони е лесно, като посочите коя икона искате да използвате като низ:

Мощна поддръжка за компонент Form

Ако сте работили с мрежата, определено сте работили с форма. Всички знаем, че формата е неизменна част от мрежата.

„Antd“ ни предоставя компонент на Form, който е обвивка за вашите FormItems. За всеки FormItem можете да използвате Input, TextArea, Checkbox, Radio или дори Date / TimePicker.

С „Antd“ вече не се нуждаем от Controlled-Component, защото неговите api могат да се справят с това вместо нас. Но най-мощното оръжие на формуляра „Antd“ е системата за валидиране. Всичко, което трябва да направите, е да посочите правила за вашия FormItem. Например: тип стойност трябва да бъде низ или число, мин или макс стойност на въведен номер или това поле е задължително или не и дори да изпълнява Regex или каквото и да е правило за валидиране, което можете да измислите (Включително валидиране на асинхронизация със страна на сървъра). Ако FormItem не е изпълнил някое от вашите правила за валидиране, ще има бързо съобщение и статус на валидиране.

Глобален компонент за обратна връзка

Представете си, ако приложението ви може да предоставя незабавно известяване за действия на потребителите, точно както във Facebook, когато някой ви маркира на статус? Можете лесно да постигнете това с Antd Notification, Message и много други компоненти за обратна връзка. Ето как изглежда:

Ant Design, според мен, е една от най-добрите библиотеки на React UI, която може да се сравнява с библиотеката с интерфейс на Google Material за React. Отидете да прочетете документите, за да разберете още интересни неща за него и ЧЕСТИТЕ КОДИРАНЕ !!!!