Tabs Roteadas com Angular Material
- Criação de tabs via componente tags
- Criação de tabs via rotas
<tab>
<tab-item *ngFor="let tab of tabsContent">
<tab-header title="{{ tab.title }}"></tab-header>
<tab-content>{{ tab.content }}</tab-content>
</tab-item>
</tab>| Nome | Valor Padrão | Tipo | Descrição |
|---|---|---|---|
| animationDuration | 0 | number | tempo de transição entre tabs |
<tab [routes]="tabRoutes" (tabIndexChange)="tabChange($event)">
</tab>| Nome | Valor Padrão | Tipo | Descrição |
|---|---|---|---|
| routes | new TabRoutes([]) | TabRoutes | lista de rotas a serem exibidas nas tabs |
| Nome | Valor Padrão | Tipo | Descrição |
|---|---|---|---|
| tabIndexChange | new EventEmitter() | EventEmitter | emite índice de tabs para navegação entre elas |
A exibição de dados é de competência do componente <tab-item></tab-item>
Presente dentro do componente <tab></tab>, que possui os seguintes atributos:
| Nome | Valor Padrão | Tipo | Descrição |
|---|---|---|---|
| disabled | false | boolean | define se a tab está ativa ou não |
| tabHeader | new TabHeaderComponent | TabHeaderComponent | referencia o component <tab-header> |
| contentTemplate | undefined | TemplateRef | referencia o componente <tab-content> |
Os components <tab-header></tab-header> e <tab-content></tab-content> apenas vão exibir os dados passados a eles,
através de suas respectivas referências presentes no componente <tab-item></tab-item>.
Dentro de cada um desses componentes, a tag <ng-content></ng-content> irá interpolar o conteúdo por eles recebido.
A exibição de dados é de competência do próprio componente <tab></tab>
através do atributo routes, o qual itera os dados em um nav bar do Angular Material.