Одна из самых популярных дизайн-систем Material-UI интегрирована с Data Driven Forms, чтобы сделать создание React-форм максимально быстрым с наименьшим количеством шаблонов. Через Data Driven Forms пользователи mui-component-mapper могут начать использовать компоненты Material React, чтобы писать сложные формы всего за секунды.
О формах, управляемых данными
Data Driven Forms - это библиотека React с открытым исходным кодом, которая использует управляемый данными подход для создания форм React. Этот подход основан на рендеринге схем JSON в виде форм React со всей необходимой функциональностью, предоставляемой рендерером. Он включает в себя такие функции, как проверка, условные поля и многие другие. Это помогает веб-разработчикам писать формы намного быстрее, проще и обеспечивать единообразие во всем приложении.
О картографах
Картограф - это набор компонентов, интегрированных с Data Driven Forms API. Этот набор позволяет пользователям писать формы без необходимости реализовывать свои собственные компоненты, поэтому они могут немедленно писать полностью рабочие формы с широким спектром функций (отображение ошибок, формы мастера и т. Д.). Вы также можете проверить другие средства сопоставления, включая компоненты из Semantic UI React, Ant Design или BlueprintJS.
О Material-UI
Material-UI с более чем 61 тыс. Звезд - одна из самых популярных библиотек React, которая предоставляет десятки гибких компонентов для создания всех типов пользовательских интерфейсов в соответствии с Material Design от Google.
Предоставляемые функции
- Форма государственного управления, валидация, условия и многое другое.
- Treeshaking: выберите между пакетами CommonJS, ESM или UMD для достижения минимального размера пакета.
- Определения машинописного текста для всех компонентов.
- Дополнительные компоненты и дополнительный реквизит.
- Формы мастера (см. Ниже).
- Селектор двойного списка.
- Все входы правильно показывают ошибки.
Предоставляемые компоненты
"Текстовое поле"
Textarea
"Радио"
Флажки
- Одиночный / множественный вариант
DatePicker
TimePicker
"Выключатель"
Выбрать / Множественный выбор
SubForm
- позволяет разделить формы на подгруппы
"Простой текст"
Слайдер
Вкладки
"Волшебник"
- разветвляющиеся пути
- отправляет только посещенные значения
DualListSelect (пользовательский компонент)
- позволяет перемещать параметры между двумя списками
- фильтрация, сортировка
FieldArray (пользовательский компонент)
- позволяет динамически добавлять поля формы в формы
- т.е. регистрация нескольких пользователей одновременно
Шаблон формы
Пример ошибки
"Установка"
npm install --save @data-driven-forms/mui-component-mapper
or
yarn add @data-driven-forms/mui-component-mapper
Компоненты и значки Material-UI должны устанавливаться отдельно. Пожалуйста, следуйте их руководству.
Для получения дополнительной информации перейдите на страницу документации.
Вклад
Data Driven Forms - это проект с открытым исходным кодом, любой вклад сообщества приветствуется. Если вы столкнетесь с какой-либо проблемой, сообщите нам об этом на странице проблем GitHub или создайте PR. Вы также можете следить за проектом в Twitter @DataDrivenForms или связаться с нами на нашем сервере Discord.
Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!
