Свойства flexberry-tab-bar, настройка flexberry-tab-bar

Доступно с версии ember-flexberry 3.8.0.

Описание

flexberry-tab-bar - компонент, позволяющий организовать и осуществить навигацию между группами контента, которые связаны и находятся на одном уровне. В нем могут быть размещены поля формы, список, детейлы и другое.

Общий вид компонента с отображением вкладок в формате с переполнением, в случае, если текущая тема оформления “Ghost”:

Вы можете посмотреть пример с реализацией на тестовом стенде.

Логика работы вкладок в формате с переполнением

Ширина вкладок зависит от длинны названия и меняется в соответствии с ним. Если выкладки не помещаются на экране, то появляется кнопка, которая предлагает пользователю выбрать любую вкладку из списка (если вкладки помещаются на экране, то кнопка скрыта). Также есть возможность прокручивать вкладки, если они не помещаются на экран.

Список свойств

Название свойства Краткое описание
items Определяет массив вкладок.
isOverflowedTabs Флаг, определяющий, отображать ли вкладки в формате с переполнением или в обычном режиме.

Пример использования

Настройка flexberry-tab-bar осуществляется в шаблоне страницы:

{{flexberry-tab-bar 
    items=items
    isOverflowedTabs=false
}}
<div class="ui bottom attached tab active segment" data-tab="tab1">
    Content
</div>
<div class="ui bottom attached tab segment" data-tab="tab2">
    Content
</div>

При загрузке страницы будет активна вкладка компонента, в которой указано свойство active: true.

Массив вкладок items:

[
    { selector: 'tab1', caption: 'Tab №1', active: true },
    { selector: 'tab2', caption: 'Tab №2' },
];