O componente Breadcrumbs indica o endereço da página atual dentro de uma hierarquia de navegação. esse componente se baseia na estrutura criada no componente menu dinâmico.
Figura 1 - Componente breadcrumbs em funcionamento.
Propriedades principais
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome
Propriedade
Função
Ícone delimitador
crn-delimiter-icon
Indica o ícone utilizado para separar o caminho entre uma página e outra. Esse ícone pode ser uma seta ( > ) ou uma barra ( / ). Obs: Essa mudança só ocorre em tempo de execução.
Identificador do menu
id-menu
Identifica todos os id das diretivas do componente Menu Dinâmico. cron-dynamic-menu, é o id do menu padrão que vem na view home, caso seja adicionado outro componente menu dinâmico a propriedade irá identifica-lo também.
Identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão, um ID é gerado automaticamente e atribuído ao componente.
Estilo
style
Altera o estilo geral do componente da forma inline.
Exibir
ng-show
Propriedade Angular usada para mostrar ou oculta o componente.
Repetir
crn-repeat
Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança
cronapp-security
Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis de selecionados.
Skin
crn-skin
Permite selecionar um skin que afetará apenas o componente selecionado.
Classes CSS
class
Adiciona classes CSS que já foram criadas.
Exemplo
No exemplo da figura 1.1, adicionamos três páginas ao menu ADMIN. Acessando a página Carros, é possível ver no componente breadcrumbs e o caminho necessário para acessar essa página. Um caminho similar será exibido ao selecionar a página Abastecimentos ou Postos, tendo sempre como origem a página ADMIN.