UI виджет Tabbar

Tabbar - это JavaScript виджет, который позволяет переключаться между вкладками в MultiView и добавлять новые.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Если вы планируете разработку большого приложения и хотите упростить навигацию по нему, вы можете разделить интерфейс на несколько частей и использовать Tabbar для доступа к ним. Каждой вкладке можно добавить название, кнопку 'Закрыть' или иконку. Tabbar можно разместить сверху или снизу от виджета MultiView. Динамический Tabbar подстраивает свою ширину под ширину окна. Например, шапки вкладок, не помещающиеся на экране, можно поместить во всплывающее окно.

Добавление и удаление вкладок

Tabbar API позволяет динамически изменять число вкладок. Пользователи могут добавлять или удалять вкладки одним нажатием.

Динамический Tabbar

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

Кнопки для закрытия вкладок

К каждой вкладке добавляется иконка с 'крестиком'. Нажав на иконки, пользователи могут закрывать вкладки.

Показывайте и скрывайте вкладки

Tabbar API включает методы для показа и удаления вкладок.

Иконки для Tabbar

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