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

Breadcrumb предоставляет контекстную информацию об иерархии страниц.

С чего начать

Подключите модуль

import { BreadcrumbModule } from 'primeng/breadcrumb';

В .ts файле

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
 
@Component({
  selector: 'app-prime-breadcrumbs',
  templateUrl: './prime-breadcrumbs.component.html',
  styleUrls: ['./prime-breadcrumbs.component.scss']
})
export class PrimeBreadcrumbsComponent implements OnInit {
 
  items: MenuItem[] = [];
 
  home = { icon: 'pi pi-home', routerLink: '/' };
 
  constructor() { }
 
  ngOnInit(): void {
    this.items = [
      { label: 'Computer' },
      { label: 'Notebook' },
      { label: 'Accessories' },
      { label: 'Backpacks' },
      { label: 'Item' }
    ];
 
  }
 
}

Встройте компонент с помощью тэга p-breadcrumb.

Breadcrumb

Свойства

Name	Type	Default	Description
model	array	null	An array of menuitems.
home	MenuItem	null	MenuItem configuration for the home icon.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
homeAriaLabel	string	null	Defines a string that labels the home icon for accessibility.

События

Name	Parameters	Description
onItemClick	originalEvent: Browser event<br>item: Selected menu item	Fired when an item is selected.

Стилизация

Name	Element
p-breadcrumb	Container element.
p-menuitem	Menuitem element.
p-menuitem-text	Label of a menuitem.
p-breadcrumb-chevron	Chevron element.

Badge Button