Ant Design: найкраща бібліотека React UI, яку я коли-небудь використовував

Короткий вступ до Ant Design

Ant Design, також відомий як "Antd", є бібліотекою компонентів для ReactJS. Це відкритий код під назвою китайської компанії "Ant Design" (власність Alibaba Group). Протягом останніх років Ant Design привернув багато уваги з боку спільноти з відкритим кодом із понад 35 тис. Зірок на GitHub. Хоча приїжджає з Китаю, але завдяки громаді, це добре зафіксовано англійською мовою.

Видатні особливості дизайну мурашок:
 . Підтримка майже всіх сучасних веб-переглядачів (включаючи IE 9+)
 . Мова дизайну корпоративного класу для веб-додатків
 . Набір високоякісних компонентів React з коробки
 . Добре написано в Typescript із завершеною системою типів

Сітка Ant Design Grid + Layout

Якщо ви раніше працювали з Bootstrap, тоді ви будете почувати себе як вдома з мережевою системою «Antd». Сітка "Antd" базується на рядках та Cols, як і будь-яка інша бібліотека інтерфейсу користувача. Але замість 12 колод, система сітки "Antd" ділить вашу область екрану на 24 кола, що може зробити вашу видиму область більш настроюваною.

Вказати жолоб між колами так само просто:

Мало того, що сітка "Antd" також підтримує 6 різних точок прориву, щоб ви могли зробити ваш сайт чуйним і виглядає добре на будь-якому пристрої:

Якщо ви вважаєте, що система сітки є невеликою накладними витратами на розкладку сторінки, "Antd" поставляється із системою "Макет", яка допоможе вам легко обробляти загальний макет сторінки. Макет "Antd" надає заголовки, сайдер, контент, колонтитули, які є лише компонентами обгортки для вашого вмісту, щоб ви могли розташувати сторінку в будь-якому місці.

А код для наведеного зображення:

Набір піктограм високої якості

"Antd" поставляється з величезною кількістю піктограм, які можуть виконати будь-які ваші вимоги до програми. Набір іконок "Antd" має 2 основні параметри: Накреслені піктограми та Заповнені значки. Вони навіть працювали над спеціальними іконками під час написання цього запису:

Використовувати ці піктограми просто, як і вказати, який значок ви хочете використовувати як рядок:

Потужна підтримка компонента Form

Якщо ви працювали в Інтернеті, ви точно працювали з формою. Ми всі знаємо, що форма є невід’ємною частиною Інтернету.

"Antd" надає нам компонент Form, який є обгорткою для ваших FormItems. Для кожного FormItem ви можете використовувати Input, TextArea, Checkbox, Radio або навіть Date / TimePicker.

З "Antd" нам більше не потрібен Controlled-Component, оскільки його api може це зробити для нас. Але найпотужнішою зброєю форми «Антд» є її система перевірки. Все, що вам потрібно зробити - це вказати правила для свого FormItem. Наприклад: тип значення повинен бути рядок або число, мінімальне або максимальне значення вхідного номера або це поле обов'язкове чи ні, і навіть виконувати Regex або те, що коли-небудь користувацьке правило перевірки, про яке ви можете придумати (включаючи перевірку асинхронізації на стороні сервера). Якщо FormItem не виконав жодне з ваших правил перевірки, з'явиться повідомлення про швидке повідомлення та статус перевірки.

Глобальний компонент зворотного зв'язку

Уявіть, чи ваш додаток може надавати миттєве сповіщення про дії користувачів так само, як у Facebook, коли хтось тегує вас на статус? Ви можете легко досягти цього за допомогою Antd Notification, Message та багатьох інших компонентів зворотного зв'язку. Ось як це виглядає:

Ant Design, на мою думку, є однією з найкращих бібліотек React UI, яку можна порівняти з бібліотекою інтерфейсу Google Material для React. Перейдіть, прочитайте документи, щоб дізнатися більше цікавих речей про це та ЩАСКОГО КОДУВАННЯ !!!!