Ugla Service

O serviço Ugla Service é responsável por algumas funções da biblioteca, é nele que são feitas algumas definições e configurações. Para usar algumas das configurações, é necessário injetar o serviço:

constructor(private ugla: UglaService) {}

Theme#

Configurar Theme#

Para configurar um theme, é necessário no arquivo app.module.ts importar a lib e o enum de themes:

import { Themes, UglaModule } from 'ugla';

Após isso, é necessário adicionar na importação do módulo:

@NgModule({
declarations: [...],
imports: [
UglaModule.forRoot({ themeName: Themes.AQUAMARINE }),
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule {}

Themes#

Cada tema representa uma cor focal, essa cor é a principal no sistema e faz com que alguns componentes automáticamente mudem para a cor escolhida. O Header, por exemplo assume o background na cor do tema selecionado.

CalorCorHexadecimalRepresentação
GRAYCinza#656565img
REDVermelha#D71F3Cimg
PURPLERoxo#641E75img
AQUAMARINEAquamarine#20BEC6img
GREENVerde#20C67Bimg
YELLOWAmarelo#F2B838img
WHITEBranco nos background e Aquamarine como focal#FFFFFFimg

Funções#

O Service oferece algumas funções:

get Theme#

E para ter como o retorno do tema selecionado:

let theme = this.ugla.theme;

O retorno para as cores com exeção do branco sempre será: theme-colored-<nome da cor>, e par ao branco será theme-white;

get Color#

Para ter como retorno a cor do tema selecionadao:

let color = this.ugla.color;

O retorno sempre será: <nome da cor>.