Wiki

Clone wiki

pf-frontend / Tabs

Использование

Tabs это класс контроллера табов.

Open

Основной метод api. Принимает два параметра: controller, options

tabs = new Tabs
tabs.open controller, options

Опции поддерживаемые стандартным шаблоном ярлыка вкладки

  • label Текст. Текст на ярлыке. длинный текст будет автоматически обрезан.
  • closable логическое. Определяет возможность закрыть вкладку

Смена шаблона ярлыка вкладки

Возможно определить свой шаблон для ярлыка открываемой вкладки. Для этого в функцию open нужно передать следующие опции:

  • labelTmpl id шаблона для ярлыка
  • ... Любые переменные определённые вами в шаблоне
Верстка

Элемент li представляющий ярлык вкладки уже создан.

Для костомизации в шаблоне доступны внутренние строчные элементы

Внимание Не используйте в шаблоне ярлыка блочные элементы чтобы не поломать верстку.

    <span>${label}</span>
    {{if closable}}
        <a href="#" class="b-tabs__close-button btn-icon">
          <i class="b-icon-cancel-circle"></i>
        </a>
    {{/if}}

Close

Метод принимает ссылку на контроллер закрываемой табы.

Из интерфейса метод вызывается кликом на элемент с классом .b-tabs__close-button.

Обработчик клика предполагает, что у родительского DOM элемента есть свойство data-controller содержащее ссылку на контроллер табы

Updated