JSON Schema Form

Описание

JSON Schema Form — это инструмент, позволяющий автоматически создать форму пользовательского интерфейса на основе заданной JSON-схемы. Он используется для генерации валидных форм ввода, обеспечивая структурированный и согласованный способ работы с данным форматом. JSON Schema Form часто применяется в веб-приложениях, где требуется динамическое создание форм.

Свойства

Базовые/Basic

Название
Описание

Схема JSON / JSON Schema

Определяет структуру и правила валидации для данных, которые должны быть введены в форму

Схема Ul / UI Schema

Настраивает внешний вид и поведение полей формы, предоставленных на основе JSON схемы

Предварительно заполненные данные формы / Default Form Data

Исходные данные, которые автоматически заполняются в форму при её инициализации

Взаимодействие/Interaction

Название
Описание

Обработчики событий / Event Handlers

Функции или методы, которые привязываются к различным событиям формы, таким как изменение значения поля, отправка формы или сбой валидации. Обеспечивают динамическое управление поведением формы и позволяют реагировать на пользовательские действия

Скрыть / Hide

Указывает, должен ли компонент быть скрытым в интерфейсе

Сброс после успешной отправки формы / Reset After Successful Submit

Опция, которая определяет, должна ли форма автоматически очищаться и возвращаться в исходное состояние после успешной отправки. Установите true, чтобы включить автоматический сброс формы, и false, если предпочтительно сохранить введённые данные

Раскладка/Layout

Название
Описание

Высота / Height

Определяет высоту области:

- Auto - Высота компонента автоматически подстраивается в соответствии с объемом отображаемого JSON-дерева, расширяясь или сжимаясь по мере необходимости.

- Fixed - Высота компонента остается постоянной, фиксированной на заданном значении

Стили/Style

Настройки стилей описаны в разделе Настройка стилей компонентов

Идентификаторы компонентов/Component Identifiers

Название
Описание

Имя класса CSS / CSS Class Name

Позволяет добавить компонент в класс, чтобы стилизовать группу элементов

Индивидуальный идентификатор / Unique Identifier (ID)

Позволяет присвоить компоненту уникальный ID, чтобы стилизовать конкретный элемент

Предотвратить перезапись стилей / Prevent Style Override

Включите, чтобы запретить изменение стилей CSS, обеспечивая сохранность первоначального оформления

Название
Описание

Схема JSON

Введите JSON схему для определения структуры и полей данных, которые необходимо представить в форме

Схема UI

Введите UI схему для управления внешним видом и поведением формы в интерфейсе пользователя

Предварительно заполненные данные формы

Введите текст, который будет предварительно заполнен в полях ввода

Обработчики событий

Добавьте обработчиков событий, нажав на кнопку "Добавить"

Скрыть

Введите "true", чтобы скрыть компонент

Сброс после успешной отправки формы

Укажите нужно ли сбрасывать введенные в форму данные после отправки

Стиль

Настройте как будет выглядеть контейнер

Стиль анимации

Здесь вы можете ввести коды типов анимации. Например, отскок, раскачивание или тада. Подробнее обо всех возможных кодах читайте по ссылке: https://animate.style

Имя класса CSS

Позволяет добавить компонент в класс, чтобы стилизовать группу элементов

Индивидуальный идентификатор

Позволяет присвоить компоненту уникальный ID, чтобы стилизовать конкретный элемент

Предотвратить перезапись стилей

Включите, чтобы запретить изменение стилей CSS, обеспечивая сохранность первоначального оформления

Last updated