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

Контрол Tabbar может принимать следующие формы:

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

Related sample:  Dynamic Tabbar in Multiview

Функционал реализуется автоматически, при изменении размера окна, вкладки минимизируются и собираются в выпадающем списке:

Tabbar по умолчанию

{ view:"tabbar", options:["First tab", "Second Tab"] }

Настройка

  • По умолчанию, минимальная ширина вкладки 100px. Это значение общее для всех вкладок, может быть изменено с помощью свойства tabMinWidth;
  • Минимальная ширина правой части Tabbar, по клику на которую вызывается список вкладок - 40px. По умолчанию используется иконка "ellipsis". Оба значения можно изменить:
    • tabMoreWidth определяет ширину зоны вызова всплывающего списка;
    • moreTemplate определяет другую иконку/текст/HTML для этой зоны. Может быть использована как функция так и строка;
  • По умолчанию, ширина попапа 200px. Значение можно изменить с помощью свойства popupWidth;
  • Количество видимых элементов списка по умолчанию равно 7. Это число можно изменить с помощью свойства yCount. Если количество элементов больше, чем отображено в списке, появляется скролл.
  • По умолчанию, для элементов списка используется темплейт #value#. Задать другой темплейт можно с помощью свойства popupTemplate.

Tabbar с пользовательскими настройками

{ 
    view:"tabbar", 
    tabMinWidth:150, 
    tabMoreWidth:80,
    moreTemplate:"Show more", 
    // или moreTemplate:function(){ return "Show more" },
    popupWidth:250,
    popupTemplate:"#text#",
    yCount:10,
    options:[
        {id:1, value:"First Tab", text:"Some text for first tab"},
        {id:2, value:"Second Tab", text:"Some text for second tab"}
        ...
    ] 
}

Обратите внимание, конфигурация options таббара должна содержать параметр value, иначе для отображения на вкладках будут использоваться значения параметра id, что будет провоцировать ошибку.

Другие свойства всплывающего списка могут использовать для настройки отображения свойство popupTemplate.

Подробнее о темплейтах данных в Webix.

Наверх