Вкладки

Вкладки (Tabs) — виджет для отображения контента, сгруппированного по вкладкам, между которыми можно переключаться.

Виджет состоит из:

• Меню вкладок (Tabs Menu) с Названиями вкладок (Tab Item)
• Контента вкладок (Tabs Content), содержащего Панели контента (Tab Pane), каждая из которых относится к одной из вкладок

В элементы Название вкладки и Панель контента можно добавить любые элементы и виджеты.

Горизонтальные и вертикальные Вкладки

По умолчанию виджет имеет горизонтальный вид. Вы можете изменить его на вертикальный с помощью вкладки Дизайн правой панели.

Для этого:

• для элемента Вкладки (Tabs) в разделе Auto Layout установите Направление (Direction) - горизонтально (стрелка вправо),
• для элемента Меню (Tabs Menu) в разделе Auto Layout установите Направление (Direction) - вертикально (стрелка вниз)

Настройки Вкладок

На вкладке Настройки (Settings) правой панели можно управлять содержимым и работой виджета.

В настройках вы можете выбрать действие, в результате которого будет происходить переход по вкладкам (Transition event). По умолчанию это Клик, можно также выбрать Наведение (Hover).

Управление элементами Вкладок

Вы можете управлять элементами вкладок:

• добавить элемент, нажав на “+”

• удалить элемент, нажав на “-”

• скопировать элемент, нажав на иконку копирования

• переместить элемент, зажав иконку с тремя полосками слева от названия элемента

Структура элементов вкладок

Элементы Названия вкладок (Tab Title) по умолчанию имеют одинаковую структуру и стили, это также относится и к элементам Панели контента (Tab Pane). Например, если вы добавите в один из элементов Название вкладки картинку (виджет Image), то такой же элемент будет добавлен и ко всем остальным Названиям вкладок.

Для Вкладок существует настройка - Применить независимую структуру. Она позволяет сделать структуру этих элементов независимой друг от друга. То есть в каждом элементе могут быть различные элементы и виджеты, с различными стилями. После включения данной настройки отменить ее невозможно.

Анимация

Вы можете настроить анимацию при переключении Вкладок.

Настройки анимации (Animation) имеют следующие параметры:

• Тип эффекта анимации (Effect) - определяет эффект открытия вкладки

  • Нет (None)

  • Затухание (Fade) (по умолчанию)

  • Горизонтальное скольжение (Slide Horizontal)

  • Вертикальное скольжение (Slide Vertical)

• Плавность анимации и ее длительность при открытии и закрытии (Open/Close)

  • Плавность анимации описывается с помощью кривых Безье, показывая скорость анимации на разных ее этапах. Вы можете выбрать нужный тип из выпадающего списка. По умолчанию используется тип Linear.

  • Длительность анимации (в миллисекундах). Вы можете выбрать из выпадающего списка время анимации от 0 до 2000 мс. По умолчанию значение составляет 200 мс.

Редактирование контента Вкладок

Переключаться между Панелями контента (Tab Pane) Вкладок можно с помощью настроек (вкладка Настройки).

При клике на название вкладки происходит переключение на элемент Панель контента (Tab Pane) соответствующей вкладки на Холсте.

Например:

После переключения на нужную Панель контента вы можете редактировать контент данной вкладки.

Стили Вкладок

Вы можете стилизовать виджет Вкладки с помощью вкладки Дизайн правой панели. Можно стилизовать как весь виджет, так и отдельно его элементы. Например, можно установить границы и внутренние отступы для всего виджета Вкладки, а также внутренние отступы для Панелей контента.