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 tagAtributo | 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 subclassesPara 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:
#
Exemplo completo- HTML
- Typescript