Visão geral do componente de navegação inferior Angular
O componente Ignite UI for Angular Bottom Navigation permite que o usuário navegue entre vários painéis de conteúdo exibidos em uma única visualização. A navegação pelos painéis é realizada com os botões de guia localizados na parte inferior do seu aplicativo.
Note
O seletor igx-tab-bar está obsoleto. Você pode usar igx-bottom-nav em vez disso. A classe IgxTabBarComponent foi renomeada para IgxBottomNavComponent. IgxTabBarModule foi renomeado para IgxBottomNavModule.
Angular Bottom Navigation Example
Getting Started with Ignite UI for Angular Bottom Navigation
Para começar a usar o componente Ignite UI for Angular Bottom Navigation, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:
ng add igniteui-angular
Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.
O próximo passo é importar o IgxBottomNavModule no seu arquivo app.module.ts.
// app.module.ts
...
import { IgxBottomNavModule } from 'igniteui-angular';
// import { IgxBottomNavModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxBottomNavModule],
...
})
export class AppModule {}
Como alternativa, a partir da 16.0.0 você pode importar o IgxBottomNavComponent como uma dependência autônoma ou usar o token IGX_BOTTOM_NAV_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.
// home.component.ts
import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
// import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_music</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>video_library</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_books</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent]
/* or imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxIconComponent] */
})
export class HomeComponent {}
Agora que você importou o módulo Ignite UI for Angular Bottom Navigation ou as diretivas, você pode começar a usar o componente igx-bottom-nav.
Using the Angular Bottom Navigation
O modelo do nosso componente inclui a Navegação Inferior e três itens. Cada item envolve um componente igx-bottom-nav-header e um igx-bottom-nav-content que representam, respectivamente, o cabeçalho e o contêiner dos dados. Os cabeçalhos geralmente consistem em um ícone e um rótulo de texto opcional. O controle Navegação Inferior é compatível com os Ícones do Material Design, então, para adotá-los em seu aplicativo, basta adicionar a importação Material+Icons em seu arquivo 'styles.css' na pasta principal do aplicativo.
Note
Se você não usou o igx-icon em seu aplicativo até agora, certifique-se de importar o IgxIconModule no app.module.ts antes de prosseguir.
// styles.css
...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_music</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>video_library</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon>library_books</igx-icon>
</igx-bottom-nav-header>
<igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
Se tudo correr bem, você deverá ver o exemplo de demonstração no seu navegador.
Customizing Bottom Navigation
Vamos modificar as abas adicionando rótulos ao lado dos ícones e garantir que os cabeçalhos estejam estilizados corretamente.
Primeiro, defina algumas matrizes de objetos para a fonte de dados no arquivo typescript do componente:
public songsList: object[] = [
{ title: 'Havana', artist: 'Camila Cabello' },
{ title: 'Meant To Be', artist: 'Bebe Rexha & Florida Georgia Line' },
{ title: 'New Rules', artist: 'Dua Lipa' },
{ title: 'Wolves', artist: 'Selena Gomez & Marshmello' }
];
public moviesList: object[] = [
{ title: 'Logan', genre: 'Action, Drama, Sci-Fi' },
{ title: 'Wonder Woman', genre: 'Action, Adventure, Fantasy' },
{ title: 'Guardians of the Galaxy Vol. 2', genre: 'Action, Adventure, Sci-Fi' },
{ title: 'Star Wars: The Last Jedi', genre: 'Action, Adventure, Fantasy' }
];
public booksList: object[] = [
{ title: 'Wonder', author: 'R. J. Palacio' },
{ title: 'Milk and Honey', author: 'Rupi Kaur' },
{ title: 'Giraffes Can\'t Dance', author: 'Jeff Kinne' },
{ title: 'The Getaway', author: 'Selena Gomez & Marshmello' }
];
Em seguida, atualize a marcação do modelo do componente da seguinte maneira:
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
<span igxBottomNavHeaderLabel>Songs</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let song of songsList">
<span class="item-line1">{{song.title}}</span><br/>
<span class="item-line2">{{song.artist}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
<span igxBottomNavHeaderLabel>Movies</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let movie of moviesList">
<span class="item-line1">{{movie.title}}</span><br/>
<span class="item-line2">{{movie.genre}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>library_books</igx-icon>
<span igxBottomNavHeaderLabel>Books</span>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<div class="item" *ngFor="let book of booksList">
<span class="item-line1">{{book.title}}</span><br/>
<span class="item-line2">{{book.author}}</span>
</div>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
Você provavelmente notou que além de colocar o ícone e o span com o rótulo entre as tags de cabeçalho do item, também anexamos as diretivas igxBottomNavHeaderIcon e igxBottomNavHeaderLabel a eles. Essas diretivas denotam os respectivos elementos e aplicam os estilos apropriados a eles.
Por fim, adicione as classes CSS usadas pelos elementos DIV e SPAN do modelo de conteúdo ao arquivo CSS do componente:
.item {
margin-bottom: 5px;
}
.item-line1 {
font-size: 14px;
color: gray;
}
.item-line2 {
font-size: 12px;
color: darkgray;
}
igx-bottom-nav-content {
padding: 10px;
}
Após essas modificações, nossa Navegação Inferior deverá ficar parecida com esta:
Se ter rótulos e ícones nos cabeçalhos não for o suficiente, você pode simplesmente adicionar seu conteúdo personalizado entre as tags de cabeçalho. Aqui está um exemplo:
<igx-bottom-nav>
<igx-bottom-nav-item>
<igx-bottom-nav-header>
<igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
<span igxBottomNavHeaderLabel>Movies</span>
<div>
<!-- your custom tab header content goes here -->
</div>
</igx-bottom-nav-header>
<igx-bottom-nav-content>
<h1>Tab content</h1>
</igx-bottom-nav-content>
</igx-bottom-nav-item>
</igx-bottom-nav>
Integration With Router Outlet Container
Apesar do uso primário do componente Bottom Navigation ser definir itens de aba com conteúdo, pode haver casos em que você precise definir itens de aba apenas com cabeçalhos. Provavelmente, o cenário principal para tal uso é a navegação entre visualizações usando o Angular Router. O exemplo a seguir demonstrará como configurar o componente Bottom Navigation para alternar entre três componentes em um único router-outlet.
Para começar, precisamos de um componente principal hospedando o componente Bottom Navigation e três componentes de visualização com algum conteúdo para fins de demonstração. Para simplificar os trechos de código, os componentes de visualização terão um modelo muito curto, mas sinta-se à vontade para torná-los mais distinguíveis se precisar. Importe também esses componentes de visualização no seu arquivo app.module.ts.
// bottomnav-routing.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-bottomnav-routing',
styleUrls: ['bottomnav-routing.component.scss'],
templateUrl: 'bottomnav-routing.component.html'
})
export class BottomNavRoutingComponent { }
@Component({
template: '<p>Item 1 Content</p>'
})
export class BottomNavRoutingView1Component { }
@Component({
template: '<p>Item 2 Content</p>'
})
export class BottomNavRoutingView2Component { }
@Component({
template: '<p>Item 3 Content</p>'
})
export class BottomNavRoutingView3Component { }
O próximo passo é criar os mapeamentos de navegação apropriados no arquivo app-routing.module.ts:
import { RouterModule, Routes } from '@angular/router';
import {
TabbarRoutingComponent,
TabbarRoutingView1Component,
TabbarRoutingView2Component,
TabbarRoutingView3Component,
} from './tabbar-routing.component';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: '/tabbar-routing'
},
{
path: 'tabbar-routing',
component: TabbarRoutingComponent,
children: [
{ path: 'tabbar-view1', component: TabbarView1Component },
{ path: 'tabbar-view2', component: TabbarView2Component },
{ path: 'tabbar-view3', component: TabbarView3Component }
]
}
];
@NgModule({
exports: [ RouterModule ],
imports: [ RouterModule.forChild(routes) ]
})
export class TabbarRoutingModule { }
Agora que temos todas as rotas de navegação configuradas, precisamos declarar o componente BottomNavigation e configurá-lo para roteamento. Além disso, certifique-se de adicionar um router-outlet para renderizar a saída dos componentes de visualização.
<!-- bottomnav-routing.component.html -->
<router-outlet></router-outlet>
<igx-bottom-nav #tabs1>
<igx-bottom-nav-item
routerLinkActive
#rla1="routerLinkActive"
[selected]="rla1.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view1">
<igx-icon igxBottomNavHeaderIcon>phone</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
<igx-bottom-nav-item
routerLinkActive
#rla2="routerLinkActive"
[selected]="rla2.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view2">
<igx-icon igxBottomNavHeaderIcon>supervisor_account</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
<igx-bottom-nav-item
routerLinkActive
#rla3="routerLinkActive"
[selected]="rla3.isActive"
>
<igx-bottom-nav-header routerLink="tabbar-view3">
<igx-icon igxBottomNavHeaderIcon>format_list_bulleted</igx-icon>
</igx-bottom-nav-header>
</igx-bottom-nav-item>
</igx-bottom-nav>
O código acima cria um componente BottomNavigation com três itens de aba. Todos os itens de aba estão tendo a diretiva RouterLinkActive aplicada, que rastreia se a rota vinculada está ativa no momento. Observe que a diretiva RouterLink é aplicada no próprio elemento de cabeçalho, não no item de aba. Se qualquer um desses links se tornar ativo, o item de aba correspondente terá sua propriedade selected definida devido à vinculação à propriedade isActive da diretiva RouterLinkActive. Dessa forma, o item de aba selecionado sempre permanecerá sincronizado com o endereço do navegador atual.
A abordagem descrita acima é usada pelo exemplo a seguir para demonstrar o roteamento usando o componente BottomNavigation:
Styles
Para começar a estilizar as abas, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Seguindo a abordagem mais simples, criamos um novo tema que estende o bottom-nav-theme e aceita vários parâmetros que nos permitem estilizar os grupos de guias.
$dark-bottom-nav: bottom-nav-theme(
$background: #292826,
$icon-selected-color: #f4d45c
);
Note
Em vez de codificar os valores de cor como acabamos de fazer, podemos obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.
Se dermos uma olhada no bottom-nav-theme, perceberemos que há ainda mais parâmetros disponíveis para estilizar nosso componente de navegação inferior!
Note
Para estilizar quaisquer componentes adicionais usados como parte do conteúdo de um item, um tema adicional deve ser criado específico para o respectivo componente.
O último passo é incluir o tema do componente em nosso aplicativo.
@include css-vars($dark-bottom-nav);
Demo
API References
Theming Dependencies
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub