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.
| Calor | Cor | Hexadecimal | Representação |
|---|---|---|---|
| GRAY | Cinza | #656565 |  |
| RED | Vermelha | #D71F3C |  |
| PURPLE | Roxo | #641E75 |  |
| AQUAMARINE | Aquamarine | #20BEC6 |  |
| GREEN | Verde | #20C67B |  |
| YELLOW | Amarelo | #F2B838 |  |
| WHITE | Branco nos background e Aquamarine como focal | #FFFFFF |  |
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>.