Ion-badge e ion-breadcrumbs
O ion-badge geralmente aparecem próximos a outro elemento. Normalmente, eles contêm um número ou outros caracteres que podem ser usados como uma notificação de que há itens adicionais ou indicam quantos itens existem daquela determinada coisa.
Já dê aquele "ionic serve" maroto e com o projeto aberto, limpe o ion-content como na imagem abaixo:
Para a implementação dele é só colocar no HTML seguindo apenas o exemplo abaixo.
E agora como ele fica no app:
Agora você consegue perceber que é necessário que ele esteja com algum outro elemento que "diga" o que é aquele dado mostrado, pois um "quadradinho" com um número colorido não nos diz nada. Bastante tranquilo este componente, vamos ao próximo...
ion-breadcrumbs
Antes de explicar este componente vamos entender seu nome breadcrumbs em uma tradução livre quer dizer "migalhas de pão" que é um nome muito convidativo ao componente onde sua função única e principal é a de mostrar ao usuário onde ele se encontra dentro de uma hierarquia de navegação.
A sua implementação é tão fácil quanto a do ion-badge, ela é realizada, por enquanto, apenas em HTML, desta forma continuando inclua o código demonstrado abaixo no seu projeto como demonstrado na imagem abaixo:
Com isso temos a seguinte saída do nosso projeto:
Perceba que o código é iniciado com a TAG ion-breadcrumbs com "s" no final e cada item fica no "singular" sem o "s" demonstrando assim um grupo. Perceba também que o último item (Profissionais), a última TAG dentro do grupo, quando renderizada, quando mostrada no navegador ela fica em destaque sozinha, por padrão, exatamente para denotar onde o usuário está na sua navegação no app, percebemos muito a utilização deste componente em sites de vendas.
Bom é isso galera, qualquer dúvida coloque nos comentários terei muita alegria em ajudá-los, grande abraço e fiquem com Deus!!!
Comentários
Postar um comentário