26 Февраль 2017

4431

Работа с адаптивными табами


Недавно на сервис был добавлен элемент «Адаптивные табы». Данный элемент позволяет работать с горизонтальными, вертикальными табами и с аккордеоном. Также данный элемент может переключаться на аккордеон при уменьшении до определённого размера. Как его использовать можно узнать в данной статье…

Элемент «Адаптивные табы», располагается в разделе «Премиум элементы»
 Элемент "Адаптивные табы"
Нажав на данный элемент или перетащив его на форму, мы можем начать работать с ним. Изначально он представляет из себя область с тремя пустыми табами по умолчанию табы называются как «Tab 1», «Tab 2», «Tab 3»
 Табы, добавленные на рабочую форму
Для того чтобы переименовать нужную вкладку, нужно выделать сам элемент табов, перейти на нужную вкладку, затем на панели «Свойства» необходимо открыть раздел «Текст» и заполнить параметр «Текст таба», после этого нажать на кнопку «Применить», рядом со строкой ввода.
 Переименование вкладок табов
После этого открытый таб будет переименован:
 Табы после переименования
На рабочую область табов можно перетягивать элементы прямо из раздела элементов или перетягивать уже добавленные элементы на форму или из других контейнеров.
 Элементы на табах
Для переключения из одного типа табов в другой, на панели «Свойства» необходимо изменить параметр «Тип табов»
 Изменение типов табов
По умолчанию табы имеют тип «Горизонтальный»

Вертикальный тип табов имеет следующий вид:
 Вертикальные табы

Аккордеон представляет из себя следующее:
 Таб аккордеон

Если мы хотим чтобы табы адаптировались при изменении размера в аккордеон, то на панели «Свойства» в параметре «Ширина для переключение в аккордеон», необходимо записать целевую ширину в пикселях. (px писать не следует, это должно быть целое число)
 Переключение табов в аккордеон

Здесь также нужно учитывать, что ширина самой формы и ширина табов должна быть записана в процентах, а не фиксироваться в пикселях.
Адаптирование табов

Для адаптивных табов можно изменять цвета и шрифты также, как и для прочих элементов. Это позволяет сделать их внешний вид уникальным и подстроить его под целевой проект. При необходимости сложных изменений можно воспользоваться возможностью править CSS стили вручную, для этого необходимо  на панели «Свойства» в разделе «Дизайн» нажать на «Править CSS вручную»
 Править CSS стили вручную

Использование адаптивных табов позволяет упростить разработку ваших проектов. Сделать их более удобными и привлекательными для использования. Возможности адаптирования размера позволяют подстраиваться под устройства конкретных пользователей.
Удобной работы с сервисом.