Componente Navbar Angular–Ignite UI for Angular

O Ignite UI for Angular IgxNavbarComponent é um componente de cabeçalho de aplicativo que informa o usuário sobre sua posição atual em um aplicativo e o ajuda a voltar (muito parecido com o botão "voltar" em um navegador). A Barra de Navegação também pode fornecer links para ações rápidas, como pesquisar ou favoritos, ajudando os usuários a navegar suavemente por um aplicativo sem tentar mover para rotas ou estados inválidos. A barra fica no topo do contêiner em que é colocada.

Para começar a usar o componente Ignite UI for Angular Navbar, 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 primeiro passo é importar o IgxNavbarModule dentro do nosso arquivo app.module.ts.

// app.module.ts

import { IgxNavbarModule } from 'igniteui-angular';
// import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxNavbarModule],
    ...
})
export class AppModule {}

Como alternativa, a partir da 16.0.0, você pode importar o IgxNavbarComponent como uma dependência autônoma ou usar o token IGX_NAVBAR_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_NAVBAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: '<igx-navbar title="Ignite UI for Angular"></igx-navbar>',
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_NAVBAR_DIRECTIVES],
  /* or imports: [IgxNavbarComponent] */
})
export class HomeComponent {}

Agora que você importou o módulo Ignite UI for Angular Navbar ou as diretivas, você pode começar a usar o componente igx-navbar.

Então, no modelo do nosso componente, podemos adicionar o seguinte código para mostrar uma barra de navegação básica com um título:

<!--navbar.component.html-->

<igx-navbar title="Ignite UI for Angular"> </igx-navbar>

Para adicionar um botão de menu, mostraremos o botão de ação usando a propriedade actionButtonIcon e faremos com que ele use um ícone de menu da seguinte maneira:

<!--navbar.component.html-->

<igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true"></igx-navbar>

Note

O actionButtonIcon usa o conjunto de fontes Material por design.

Add Icon Buttons

Podemos tornar nosso aplicativo um pouco mais funcional adicionando opções de pesquisa, favoritos e mais. Para fazer isso, vamos pegar os módulos IgxIconButton e IgxIcon e importá-los em nosso arquivo app.module.ts.

// app.module.ts

...
import { IgxNavbarModule, IgxIconButtonDirective, IgxIconModule } from 'igniteui-angular';
// import { IgxNavbarModule, IgxButtonModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxIconButtonDirective, IgxIconModule],
})
export class AppModule {}

Em seguida, precisamos atualizar nosso modelo com um botão de ícone para cada uma das opções que queremos que nosso aplicativo forneça:

<!--navbar.component.html-->

<igx-navbar title="Sample App">
  <button igxIconButton="flat">
    <igx-icon>search</igx-icon>
  </button>
  <button igxIconButton="flat">
    <igx-icon>favorite</igx-icon>
  </button>
  <button igxIconButton="flat">
    <igx-icon>more_vert</igx-icon>
  </button>
</igx-navbar>

Se tudo correr bem, você deverá ver o seguinte no seu navegador:

Add Custom Action

E se quisermos usar um modelo personalizado para a navegação do nosso aplicativo na parte mais à esquerda da barra de navegação? Podemos facilmente fazer isso usando a diretiva igx-navbar-action, que renderizará o conteúdo que fornecemos. Faremos isso usando um botão com o ícone inicial do Font Awesome.

/* navbar.component.css */

@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");

<!--navbar.component.html-->

<igx-navbar title="Sample App">
  <igx-navbar-action>
    <button igxIconButton="flat">
      <igx-icon family="fa" name="fa-home"></igx-icon>
    </button>
  </igx-navbar-action>

  <button igxIconButton="flat">
    <igx-icon>search</igx-icon>
  </button>
  <button igxIconButton="flat">
    <igx-icon>favorite</igx-icon>
  </button>
  <button igxIconButton="flat">
    <igx-icon>more_vert</igx-icon>
  </button>
</igx-navbar>

Por fim, é assim que nossa barra de navegação deve ficar com seu ícone de botão de ação personalizado:

Se quisermos criar uma barra de navegação com um ícone navegando de volta, devemos seguir alguns passos. Primeiro, podemos usar a propriedade actionButtonIcon para escolher um ícone adequado do conjunto de fontes Material. Então, podemos fazer uma verificação simples se há páginas visitadas anteriormente para voltar e passar o resultado para a propriedade isActionButtonVisible. O último passo é criar um método para navegar de volta e conectá-lo à propriedade action.

<!--navbar.component.html-->

<igx-navbar
  title="Ignite UI for Angular"
  actionButtonIcon="arrow_back"
  [isActionButtonVisible]="canGoBack()"
  (action)="navigateBack()"
>
</igx-navbar>

export class NavbarSample3Component {
  constructor(private _location: Location) {}

  public ngOnInit() {}

  public navigateBack() {
    this._location.back();
  }

  public canGoBack() {
    return window.history.length > 0;
  }
}

Se o exemplo estiver configurado corretamente, você deverá ver o seguinte no seu navegador:

Note

Se igx-navbar-action ou igxNavbarAction for fornecido, o actionButtonIcon padrão não será usado.

Add Custom Title

Se quisermos fornecer um conteúdo personalizado para o título de uma barra de navegação, podemos fazer isso usando a diretiva igx-navbar-title ou igxNavbarTitle. Elas substituirão o título padrão da barra de navegação fornecido pela propriedade de entrada title. O exemplo abaixo tem um título personalizado contendo um link com uma imagem:

<!--navbar.component.html-->

<div class="sample-column">
  <igx-navbar>
    <igx-navbar-action>
      <button igxIconButton="flat">
        <igx-icon>menu</igx-icon>
      </button>
    </igx-navbar-action>

    <div igxNavbarTitle>
      <a href="https://pt-br.infragistics.com/products/ignite-ui-angular" target="_blank">
        <img
          src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
          width="120px"
          height="50px"
          alt
          style="margin-top: 7px;"
        />
      </a>
    </div>

    <button igxIconButton="flat">
      <igx-icon>search</igx-icon>
    </button>
    <button igxIconButton="flat">
      <igx-icon>favorite</igx-icon>
    </button>
    <button igxIconButton="flat">
      <igx-icon>more_vert</igx-icon>
    </button>
  </igx-navbar>
</div>

Note

Se igx-navbar-title ou igxNavbarTitle for fornecido, o title padrão não será usado.

Estilização

Para começar a estilizar a barra de navegação, 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 navbar-theme e fornece apenas os $background parâmetros e $idle-icon-color. O tema calculará automaticamente todas as cores de fundo e primeiro plano necessárias para vários estados de interação. Se necessário, você também pode substituir manualmente propriedades específicas para um controle mais preciso sobre a aparência.

$custom-navbar-theme: navbar-theme(
  $background: #011627,
  $idle-icon-color: #ecaa53,
);

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.

O último passo é passar o tema recém-criado para o mixin css-vars:

@include css-vars($custom-navbar-theme);

Visão geral do componente da barra de navegação Angular

Angular Navbar Example

Getting Started with Ignite UI for Angular Navbar

Using the Angular Navbar

Add Menu Button

Note

Add Icon Buttons

Add Custom Action

Add Navigation Icon

Note

Add Custom Title

Note

Estilização

Note

Demo

API References

Theming Dependencies

Additional Resources

Temas