Вкладки

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

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

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

В элементы Tab Item и Tab Pane можно добавить любые элементы и виджеты.

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

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

Чтобы сделать вертикальное расположение вкладок:

• для элемента Вкладки (Tabs) на вкладке Дизайн в разделе Авто-лейаут установите Направление (Direction) - горизонтально (стрелка вправо)

• для элемента Меню (Tabs Menu) на вкладке Дизайн в разделе Авто-лейаут установите Направление (Direction) - вертикально (стрелка вниз)

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

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

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

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

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

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

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

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

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

Структура Вкладок

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

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

Анимация

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

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

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

  • Нет (None)

  • Растворение (Fade) (по умолчанию)

  • Скользящий горизонтально (Slide Horizontal)

  • Скользящий вертикально (Slide Vertical)

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

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

    

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

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

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

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

Вы также можете открыть определенную вкладку, выбрав соответствующий элемент Tab Item на холсте или в слоях, а затем в Настройках переключив UI состояние на Открыт.

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

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

Как стилизовать элемент Вкладок в открытом состоянии — Стили дополнительных состояний: Табы.