Панель Стилей и Настроек
Панель Стилей и Настроек располагается в правой части Редактора дизайна, на ней находится несколько вкладок:
- Анимации (Animations) — позволяет настроить анимацию элемента.
С помощью параметров этой вкладки можно задать стили любому элементу сайта. Выбрав элемент на вкладке Слоев или на Холсте, вы можете увидеть на вкладке Дизайн заданные ему стили и изменить их.
Классы в Taptop — это набор пользовательских стилей элемента или виджета. Они нужны для того, чтобы упростить процесс стилизации сайта.
Состояния нужны, чтобы стилизовать внешний вид элемента в зависимости от действий пользователя. Например, для установки разных стилей для кнопки при наведении на нее мыши и при клике по ней.
Существуют следующие состояния элемента:
- По умолчанию (Default) Состояние элемента по умолчанию.
- Наведение (Hover) Элемент при наведении на него курсора мыши. При этом элемент еще не активирован, то есть кнопка мыши не нажата.
- Активный (Active) Активный элемент, то есть при нажатии на нем на кнопки мыши.
- Фокус (Focus) Элемент, получивший фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
Добавляя селектор состояния, вы можете стилизовать то или иное состояние. Подробнее — Классы и состояния
Настройки отображения отвечают за визуальное отображение и расположение элементов на странице. Они определяют, как элементы располагаются по отношению друг к другу — один под другим или бок о бок.
Существуют следующие настройки отображения:
- Flex Устанавливается на родительский элемент (flex-контейнер) и влияет на размещение в нем дочерних элементов. Имеет настройки управления расположением дочерних элементов по вертикали и горизонтали - Авто-расположение (Auto layout).
Подробнее — Авто-расположение (в режиме flex).
- Block Элемент начинается с новой строки и по умолчанию занимает всю ширину родительского элемента.
- None Используется для того, чтобы полностью скрыть элемент, как будто его нет на холсте. Все дочерние элементы также будут скрыты.
- Inline-block Элементы размещаются бок о бок в одну строку, пока они в ней помещаются (далее они переносятся на следующую строку). Ширина элементов определяется их содержимым.
- Inline-Flex Используется для размещения нескольких flex-контейнеров в одной строке (подобно элементам Inline-block).
Подробнее о настройках отображения — Расположение элементов.
В настройках Размера можно установить ширину (W) и высоту (H) элемента.
Доступны следующие параметры для установки размеров: автоматический размер auto, пиксели px, проценты %, em, rem Viewport Width vw, Viewport Height vh.
Также в настройках Размера можно установить следующие параметры:
- Минимальная и максимальная высота и ширина элемента (Min or Max)
- Переполнение (Overflow) Управление содержимым, выходящим за границы элемента при переполнении контентом.
- Прозрачность (Opacity) Определяет прозрачность элемента и его дочерних элементов.
- Закругленные углы (Round all corners, Individual radius) Установка значения радиуса закругления всех углов элемента или индивидуальный радиус для каждого угла.
Подробнее — Размеры и отступы элементов.
Существует два типа отступов:
- Внешние отступы (Margins) Определяют пространство между границами элемента и соседними с ним элементами. На Холсте бозначаются желтым цветом.
- Внутренние отступы (Paddings) Определяют пространство между границами элемента и его содержимым. На Холсте обозначаются зеленым цветом.
Можно установить Внешние и Внутренние отступы как со всех сторон, так и выборочно. Размер отступов может быть установлен автоматичсеки auto или в px, %, em, rem, vh и vw.
Подробнее — Размеры и отступы элементов.
Стили Фона, которые можно установить для элемента:
- Цвет фона (Background color)
- Градиент (Gradient)
- Фоновое изображение (Image)
- Наложение цвета
Можно добавлять несколько фоновых изображений, градиентов и цветовых наложений для создания многоуровневых эффектов. Для каждого слоя фона можно установить значение прозрачности. Также можно менять порядок фоновых слоев, перетаскивая их мышью, скрывать их или удалять.
Настройка Фоновый цвет (Background color) отвечает за основной фон элемента. На него будут наложены остальные стили фона (Fill), например, фоновое изображение.
Задайте Фоновый цвет (Background color), если хотите настроить Переходы (Transition). Настройка Переходы (Transition) не будет работать, если фон задан через свойство Фон (Fill).
Подробнее — Фон.
Свойство Позиционирование дает возможность менять поток элементов на странице, сдвигая элементы или фиксируя их позицию. После того, как задан тип позиционирования элемента, можно настроить параметры top (сверху), bottom (снизу), left (слева) и right (справа), определяющие координаты позиции элемента.
Существуют следующие типы позиционирования:
- Статическое позиционирование (Static) — стандартная позиция элемента, без смещения.
- Относительное позиционирование (Relative) — можно сдвинуть элемент относительно его исходной позиции, указав координаты.
- Абсолютное позиционирование (Absolute) — можно сдвинуть элемент относительно родительского элемента, указав координаты.
- Фиксированное позиционирование (Fixed) —можно зафиксировать позицию элемента, которая не будет менять при прокрутке страницы.
- Липкое позиционирование (Sticky) — в зависимости от положения прокрутки окна браузера элемент будет позиционирован фиксированно или относительно.
В настройках Позиционирования также можно установить Z-индекс (Z-index), определяющий положение элемента на воображаемой оси z, проходящей внутрь и за пределы экрана вашего компьютера.
Подробнее — Позиционирование элементов.
Для форматирования Текста используются следующие параметры:
- Шрифт (Font)
- Толщина шрифта (Font weight)
- Размер шрифта (Font size)
- Цвет шрифта (Font color)
- Интерлиньяж (Line-height)
- Межсимвольное расстояние (Letter-spacing)
- Выравнивание текста (Text Align)
- Обводка (Text Stroke)
- Тени (Text Shadows)
- Дополнительные параметры (More Type Options): Оформление (Decoration), Регистр (Capitalize), Перенос (Overflow Wrap), Breaking (Прерывание).
Подробнее — Типографика.
Параметры границ элемента:
- Цвет границы
- Ширина границы
- Стиль границы
Можно установить границы элемента со всех сторон или выборочно.
Подробнее — Границы и закругленные углы.
Для повышения интерактивности элемента можно применить фильтры, тени, трансформацию и другие Эффекты.
Например, добавить эффекты для элемента можно для состояния наведения курсора мыши или для любого другого состояния, выбрав его в списке параметра состояний (State).
Виды эффектов:
- Тени (Shadows)
- Трансформация (Transforms)
- Фильтры (Filters)
- Переходы (Transitions)
- Контур (Outline)
- Курсор (Cursor)
Подробнее — Эффекты.
Вкладка Настройки позволяет установить для элемента дополнительные опции. Эта вкладка используется в основном для виджетов и помогает настроить их структуру и отображение при различных условиях и действиях пользователя.
Список параметров настройки зависит от типа элемента и необходимых ему опций. Например, параметры настройки для некоторых виджетов следующие:
Меню: управление типом и структурой меню, его пунктами, отображением меню на различных типах устройств.
Блоклист: управление стилем отображения Блоклиста и его элементами.
Картинка: замена изображения, настройка размеров и типа расположения, опции seo.
Всплывающее окно: опции закрытия окна.
Форма: отображение формы в разных состояниях, дополнительные настройки стилей.
Также для всех элементов на вкладке Настройки доступна установка параметра seo-индексации элемента.
