Новости проекта
3 февр. 2022 г.

Расширены настройки дизайна полей. Используйте встроенные инструменты сервиса или создавайте свои собственные стили оформления.

Расширенные настройки оформления дизайна полей

В обновленной версии версии были добавлены расширенные возможности по настройке дизайна полей. Во вкладке “Дизайн” установлен сайдбар с категориями полей, нажав на любую из которых, откроются виды оформления с примерами. Если вы не хотите использовать дизайны сервиса, нужно активировать свитч с надписью “Не использовать оформление QForm” в соответствующей категории и тогда активные по умолчанию стили не будут применены. Это будет приемлемо в случае, если вы хотите настроить свои стили через CSS.
Для этого нужно правильно обратиться к элементу, чтобы появилась возможность изменять его вручную. Для такого случая рядом с вкладкой “Дизайн” расположена вкладка “HTML”, которая генерирует весь html-код вашей формы.

Сайдбар содержит следующие категорий:

 

Общие настройки
Возможность выбрать тип оформления полей. 

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

  • размер элементов формы - высота поля
  • скругления - степень скругления углов поля
  • тема - выбрать светлую или темную тему

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

Заголовки для полей

  • Выбор расположения заголовков поля.
  • Плейсхолдер - показать или скрыть текст при вводе

Вид выбранной опции отображается внизу с надписью “Пример”. Можно воспользоваться функцией предварительного просмотра.

 

Иконки
Возможность расположить иконки как внутри поля, так и снаружи, в левой или правой части

Один из списка
Несколько из списка

Возможность выбора расположения radiobutton и checkbox

Загрузка файлов

  • Возможность выбрать вид для “Прикрепление файлов” через кнопку или поле
  • Вид предварительной загрузки файлов в виде списка или карточек 

Настройка полей “Дата” и “Время”
Возможность установить стиль поля даты и времени: при клике можно установить отображение в соединенном или разделенном виде. Или выключить отображение, чтобы пользователь вручную вводил данные.

Кнопка отправки
Установка основного цвета для для кнопки Отправить, а также выбор стиля при наведении курсора на кнопку

Дополнительно можно активировать свитч Использовать неактивное состояние кнопки при незаконченном заполнении для того, чтобы кнопка была неактивной до тех пор, пока вся форма не будет заполнена полностью.

Иконки об Успешной валидации
Текст ошибки с иконкой

Возможность выбора отображения места относительно поля: внутри поля, за полем, под полем, около заголовка

Успешная валидация

Ошибки

Состояние полей
Возможность включить/отключить смену цвета при наведении курсора на поле
Возможность включить/отключить смену цвета в фокусе поля

Обязательное поле
Здесь можно отметить обязательные к показу поля или отключить необязательные.

Шаги заполнения формы
Показывает прогресс заполнения формы, исходя из выбранного варианта стиля