Header

O componente Header é composto por mais dois componentes: Brand, que é responsável pelo ícone e nome do sistema presentes na tela e People Card, que carrega os dados do usuário logado e o botão de Logout.

img

Atributos da tag#

AtributoInput/OutputTipoObrigatórioValores padrões
header@InputHeaderSim-
logoutText@InputStringNãoLogout
logoutAction@OutputfunctionSim-

Class Header e subclasses#

Para construir o o header, é necessário criar uma instância da classe Header.

Os dados do usuário são registrados ao criar uma instãncia da classe People, e ela deve ser incluso ao objeto header header.people.

O menu é criado usando as classes Menu e Menu Item que também deve ser incluso ao objeto header header.menu;

O componente Header pode ter sombras, e para habilitá-la é necessário injetar o Ugla Service e, em seguida, atribuir true/false a variável:

constructor(private ugla: UglaService) {}
ngOnInit() {
this.ugla.headerShadow = true;
}

Exemplo completo#

<ugl-header
[header]='header'
(logoutAction)='logout($event)'
[logoutText]=''Logout now''>
</ugl-header>