Breadcrumbs (web)
Função
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 principal | breadcrumb-icon | Define qual o ícone será exibido ao lado esquerdo de cada item do breadcrumb. |
Tipo de captura | type-menu | Define se os itens do breadcrumb serão inseridos através de blocos de programação ou através do menu. |
Í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 do componente | 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 Cronapp MVC 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 2, adicionamos um item denominado Aluno ao menu ADMIN. Esse item possui três subitens, sendo que um deles contém, por sua vez, mais dois subitens.
Figura 2 - Itens do menu
Na Figura 2.1, é possível visualizar, no componente Breadcrumbs, o caminho de navegação necessário para acessar a página destacada na figura anterior.
Figura 2.1 - Breadcrumb da página Segundo Semestre
Nome em inglês
breadcrumbs
Nessa página
Compatibilidade
Formulário web
Equivalente mobile
não possui
Botão do Componente
Imagem no Editor Visual