Хлебные крошки

Введение

Хлебные крошки (англ. Breadcrumbs ) или навигационная цепочка — элемент интерфейса, отображающий уровень вложенности (путь от корневого до текущего уровня иерархии) страницы/документа, который в данный момент просматривает пользователь.

Клик по элементу навигационной цепочки позволяет пользователю перейти от текущей страницы/документа на любой уровень вложенности.

Функционал хлебных крошек реализован в контролах:

• Controls/breadcrumbs:Path — для работы с хлебными крошками
• Controls/breadcrumbs:HeadingPath — если требуются хлебные крошки с кнопкой назад

Хлебные крошки ничего не знают о родительских контролах. Конфигурацию для отображения навигационной цепочки родительский контрол передает через опции Controls/breadcrumbs:Path и Controls/breadcrumbs:HeadingPath.

Демонстрационный пример

Посмотрите наш интерактивный пример с контролом «Хлебные крошки», а также ознакомьтесь с его исходными файлами.

Справочные материалы и ресурсы

• Стандарт, спецификация
• API JavaScript:
  • Controls/breadcrumbs:Path
  • Controls/breadcrumbs:HeadingPath

Руководство разработчика по конфигурации контрола

Конфигурация элементов

Для конфигурации хлебных крошек предоставлены опции items и keyProperty.

// TypeScript
// массив элементов для хлебных крошек
data: null,
_beforeMount: function() {
   this.data = [
      {
         id: 1,
         title: '1 Очень длинное название папки, оно не войдет в максимальный размер'
      },
      {
         id: 2,
         title: '2 Notebooks'
      },
      {
         id: 3,
         title: '3 Smartphones'
      }
   ].map(callbackfn(item) =>{
      return new entty.Model({
         rawData: item,
         keyProperty: 'id'
      });
   });
}

<!-- WML -->
<Controls.breadcrumbs:Path items="{{ data }}" keyProperty="id" />

Обработка клика по элементу цепочки

При клике по элементу цепочки происходит событие itemClick. В обработчик события во второй аргумент приходит элемент хлебных крошек item.

<!-- WML -->
<Controls.breadcrumbs:Path on:itemClick="_onItemClick()" />

// JavaScript
_onItemClick: function(e, item) {
   alert(item.getKey());
}

Обработка клика по кнопке "Просмотр записи"

В контроле Controls/breadcrumbs:HeadingPath при клике на иконку "Просмотр записи" происходит событие arrowActivated.