Angular Componente Navbar –Ignite UI for Angular | Infragistics

O Ignite UI for AngularIgxNavbarComponent é um componente de cabeçalho de aplicação 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 busca ou favoritos, ajudando os usuários a navegar suavemente por um aplicativo sem precisar migrar para rotas ou estados inválidos. A barra fica no topo do recipiente em que está 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 oIgxNavbarModule arquivo de app.module.ts dentro do nosso arquivo.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importarIgxNavbarComponent como uma dependência independente ou usar oIGX_NAVBAR_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular/navbar';
// 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 ou diretivas da Ignite UI for Angular Navbar, pode começar a usar oigx-navbar componente.

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, vamos mostrar o botão de ação usando aactionButtonIcon propriedade e fazer com que ele use um ícone de menu da seguinte forma:

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

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

Note

EleactionButtonIcon 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 } from 'igniteui-angular/navbar';
import { IgxIconButtonDirective } from 'igniteui-angular/directives';
import { IgxIconModule } from 'igniteui-angular/icon';
// 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 app na parte mais à esquerda da barra de navegação? Podemos facilmente alcançar isso usando aigx-navbar-action diretiva, que renderizará o conteúdo que fornecemos. Faremos isso usando um botão com o ícone inicial 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 para trás, devemos seguir alguns passos. Primeiro, podemos usar aactionButtonIcon propriedade para escolher um ícone adequado do conjunto de fontes Material. Depois, podemos fazer uma verificação simples se há páginas já visitadas para voltar e repassar o resultado para aisActionButtonVisible propriedade. O último passo é criar um método para navegar de volta e prendê-lo àaction propriedade.

<!--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

Seigx-navbar-action for fornecido ouigxNavbarAction for, o padrãoactionButtonIcon 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 conseguir isso usandoigx-navbar-title umaigxNavbarTitle diretiva de OR. Eles substituirão o título padrão da navbar fornecido pelatitle propriedade de entrada. 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

Seigx-navbar-title for fornecido ouigxNavbarTitle for, o padrãotitle não será usado.

Estilização

Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

Propriedade primária	Propriedade dependente	Descrição
$background	$text-cor	A cor do texto da barra de navegação
	$idle-cor-ícone-ícone	Cor do ícone de inatividade da barra de navegação
	$hover-cor-ícone	Cor do ícone de flutuação da barra de navegação
	$border cor (mudanças apenas para a variante índigo)	A cor da borda da barra de navegação
$idle-cor-ícone-ícone	$hover-cor-ícone	Cor do ícone de flutuação da barra de navegação

Para começar a estilizar a barra de navegação, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão vivos:

@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 onavbar-theme e fornece apenas os$background parâmetros de '.$idle-icon-color O tema calculará automaticamente todas as cores necessárias de fundo e primeiro plano para vários estados de interação. Se precisar, você também pode sobrescrever manualmente propriedades específicas para um controle mais fino 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 alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

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

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

Demo

Styling with Tailwind

Você pode estilizar a barra de navegação usando nossas classes utilitárias personalizadas do Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-navbar,dark-navbar.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema da barra de navegação. A sintaxe é a seguinte:

<igx-navbar class="!light-navbar ![--background:#7B9E89] ![--text-color:#121E17]" title="Sample App">
  ...
</igx-navbar>

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, sua barra de navegação deve ficar assim:

API References

Componentes e/ou diretivas adicionais com APIs relativas que foram usadas:

Theming Dependencies

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

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

Navbar Theme Property Map

Note

Demo

Styling with Tailwind

Note

API References

Theming Dependencies

Additional Resources

Temas