Стилизация Формы и ее элементов
Стилизация Формы
По умолчанию Форма наследует полную ширину своего родительского элемента. Вы можете настроить стили для Формы, включая размеры, отступы, расположение элементов и т.д. Для этого выберите Форму на Холсте или на вкладке Слоев и установите нужные стили на вкладке Дизайн.
Например, можно расположить поля формы горизонтально. Для этого:
-
Поместите поля Формы в новый Div-блок.
-
Установите в стилях режим Flex и горизонтальное направление, а также параметры выравнивания
Стилизация элементов Формы
Вы можете также стилизовать отдельно все элементы Формы. Можно установить стили для всей группы элемента, например, задав ему отступы. Также можно стилизовать отдельно метку и само поле элемента.
Например, вы можете изменить шрифт заголовка Формы и меток полей, размер и фон полей ввода, цвет и размер кнопки и т.п.
Стилизация строки ввода
У Строки ввода можно заменить Метку поля на Фоновый текст внутри поля. Для этого:
- Метки полей нужно скрыть (в настройках элемента метки в разделе Display) или удалить элемент метки с Холста.
- Добавить Фоновый текст в Настройках строки ввода (для элемента Input).
Стилизация поля Select
Чтобы стилизовать текст в списке выбора, вам нужно задать стили для слоя Select.
Для этого выберите слой Select на холсте или в левой панели и настройте стили на правой панели Дизайн в разделе Текст. Вы можете настроить шрифт, начертание, размер, цвет, выравнивание текста в поле, строчные/прописные буквы.
Вы можете задать фон для поля Select на панели Дизайн в разделе Внешний вид:
- Настроить фон для выбранной опции в поле Select — с помощью свойства Фон (Fill).
Если фон для выбранной опции не нужен, его можно скрыть, нажав на «глаз» справа от значения цвета.
- Настроить фон для выпадающего списка — с помощью свойства Цвет фона (Background color).
Если задать Цвет фона и при этом скрыть Фон, то для выбранной опции и для выпадающего списка будет применяться одинаковый цвет фона.
Стили выпадающего списка можно увидеть только в режиме предварительного просмотра или после публикации проекта.
Подробнее о том, как стилизовать состояния элементов формы: выбранный элемент, состояние ошибки, фоновый текст — Стили дополнительных состояний: Формы.