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.

Atributos da tag

Atributo	Input/Output	Tipo	Obrigatório	Valores padrões
header	@Input	Header	Sim	-
logoutText	@Input	String	Não	Logout
logoutAction	@Output	function	Sim	-

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

HTML

<ugl-header

[header]='header'

(logoutAction)='logout($event)'

[logoutText]=''Logout now''>

</ugl-header>

Typescript

import { Header, People, Menu, MenuItem, Select, Options, UglaService } from 'ugla';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

constructor(private ugla: UglaService) {}

header = new Header('Ugla', './assets/imgs/logo.png', 'home', true);

people = new People('Jack Connor', 'jack.connor@ugla.dev', './assets/imgs/people.png');

menu = new Menu([

new MenuItem('Home', '/', true),

new MenuItem('Login', '/login', true),

new MenuItem('Components', '/components', true),

new MenuItem('Directives', '/directives', true),

new MenuItem('Services', '/services', true)

]);

ngOnInit() {

this.header.people = this.people;

this.header.menu = this.menu;

this.ugla.headerShadow = true;

}

logout(status) {

console.log('Logout');

}

selectLanguage(language) {

console.log(`Language selected is ${language.description} and the code is ${language.value}`);

}

}