Команда Data Driven Forms только что выпустила сопоставитель компонентов Carbon, который интегрирует компоненты IBM React Carbon в Data Driven Forms.
О формах, управляемых данными
Формы, управляемые данными — это библиотека React с открытым исходным кодом, которая использует подход, управляемый данными для создания форм React. Этот подход основан на рендеринге схем JSON в виде форм React со всей необходимой функциональностью, предоставляемой рендерером. Он включает в себя такие функции, как валидация, условные поля и многие другие. Это помогает веб-разработчикам писать формы намного быстрее, проще и достигать согласованности во всем приложении.
О мапперах
Mapper — это набор компонентов, интегрированных с Data Driven Forms API. Этот набор позволяет пользователям писать формы без необходимости реализации собственных компонентов, поэтому они могут сразу же писать полностью рабочие формы с широким набором функций (отображение ошибок, мастер форм и т. д.). Вы также можете проверить другие мапперы, включая компоненты из MaterialUI, Ant Design или BlueprintJS.
О системе углеродного дизайна
Carbon Design System — это набор шаблонов, правил и компонентов для построения современных веб-приложений. Эта система полностью открыта и поддерживается IBM.
Предоставляемые функции
- Управление состоянием формы, валидация, условия и многое другое.
- Treeshaking: выберите между пакетами CommonJS, ESM или UMD для достижения минимального размера пакета.
- Определения машинописного текста.
- Дополнительные компоненты и дополнительный реквизит:
- все компоненты поддерживают helperText,
- все компоненты отображают тексты ошибок.
- Формы мастера (см. ниже).
Предоставленные компоненты
Текстовое поле (текстовый ввод)
Текстовое поле
"Радио"
Флажки
- одиночный/множественный вариант
Выбор даты
ТаймПикер
- включая селекторы AM/PM и часового пояса
Переключить (Переключить)
Выбрать/Множественный выбор
- позволяет лениво загружать исходные данные
Подформа
- позволяет разделить формы на подгруппы
"Простой текст"
- позволяет отображать любой текст
Слайдер
Вкладки
Мастер (пользовательский компонент)
- пути разветвления
- интерактивная навигация
- отправляет только посещенные значения
DualListSelect (настраиваемый компонент)
- позволяет перемещать параметры между двумя списками
- фильтрация, сортировка
FieldArray (пользовательский компонент)
- позволяет динамически добавлять поля формы в формы
- то есть регистрация нескольких пользователей одновременно
Шаблон формы
- форма (расстояние, кнопки) разработана в соответствии с рекомендациями Carbon
"Установка"
npm install --save @data-driven-forms/carbon-component-mapper
or
yarn add @data-driven-forms/carbon-component-mapper
Для получения дополнительной информации перейдите на страницу документации.
Вклад
Data Driven Forms — это проект с открытым исходным кодом, приветствуется любой вклад сообщества. Если вы столкнулись с какой-либо проблемой, сообщите нам об этом на странице проблем GitHub или откройте PR. Вы также можете следить за проектом в Twitter @DataDrivenForms или связаться с нами на нашем Discord сервере.
