UI виджет TabView

TabView - это комбинация виджетов MultiView и TabBar. Виджет TabView поможет поместить несколько виджетов в один контейнер с вкладками и таким образом сэкономить пространство экрана.

живое демо

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

Обзор

TabView отображает одновременно только одну вкладку и позволяет переключаться между ними с помощью кнопок виджета TabBar. Вкладкам можно добавить иконки или кнопки, с помощью которых их можно закрыть. Вы можете отключить анимацию или выбрать ее тип и направление. Виджет автоматически изменяет свои размеры при изменениях размера окна. Например, вкладки, которые не помещаются по ширине, перемещаются во всплывающее окно.

Анимация

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

Иконки

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

Закрываемые вкладки

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

Адаптивность

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

Настройка размера вкладок

Вы можете устанавливать высоту каждой вкладки TabView. Если у вкладок разная высота, Tabview примет размеры текущей открытой вкладки. Вы можете изменить настройки виджета так, что размеры всех вкладок станут одинакового размера и будут равны размерам самой большой из них.

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

Webix API позволяет динамически добавлять и удалять вкладки TabView, благодаря чему вы сможете разрешить пользователям добавлять и удалять вкладки в один клик.