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

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

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

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

Документация API Спецификация Axure

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

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

// TypeScript
// массив элементов для хлебных крошек
protected data: null;
protected _beforeMount(): void {
   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()" />

// TypeScript
protected _onItemClick(e, item): void {
   alert(item.getKey());
}

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

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