Skip to main content

Get Started

Version

version

O projeto Ugla foi desenvolvido com o objetivo de minimizar esforços no desenvolvimento FrontEnd de sistemas, trazendo consistencia e segurança para projetos que necessitam conversar entre si ou, que sejam totalmente independentes, mantendo uma identidade única e de fácil entendimento.

O que é Ugla?​

Ugla é na realidade um projeto que visa unir em seu nome tudo aquilo que se faz necessário para o desenvolvimento de um sistema.

Protótipo​

Todos seus componentes são planejados separadamente e adicionados a uma biblioteca de protótipo. Seus componentes são desenvolvidos no Figma.

Angular​

Cada componente do protótipo é desenvolvido dentro de uma biblioteca Angular que, considerando cada possibilidade, implementa de forma prática o que foi previsto no protótipo.

SCSS​

Junto a biblioteca Angular, o projeto possuí uma estrutura SCSS que contém classes que auxiliam no desenvolvimento das aplicações.

Dependências​

Tentamos desenvolver o Ugla com código 100% limpo, sem usar bibliotecas que não são de fato úteis e indispensáveis. Porém, não conseguimos uma pureza em 100% e por isso temos algumas bibliotecas inclusas.

Ícones​

Os ícones presentes no Ugla fazem parte do pacote de ícones do Material.

Instalando e Configurando​

Estando em um projeto Angular 2 ou mais, basta executar o comando abaixo no terminal, na raiz do projeto:

npm i ugla

Instale também as dependencias necessárias para o Ugla funcionar corretamente:

npm i filepond filepond-plugin-file-validate-size filepond-plugin-file-validate-type filepond-plugin-image-crop filepond-plugin-image-exif-orientation filepond-plugin-image-preview filepond-plugin-image-resize filepond-plugin-image-transform filepond-plugin-image-validate-size js-datepicker ngx-filepond moment tooltip.js

Em seguida, é necessário configurar o Ugla dentro do projeto:

path/src/app/app.module.ts
import { UglaModule, Themes } from 'ugla';
path/src/app/app.module.ts
imports: [
  BrowserModule,
  ...,
  UglaModule.forRoot({themeName: Themes.YELLOW}),
],
Themas

Você pode escolher entre um dos temas que o Ugla possuí: RED, YELLOW, AQUAMARINE, GREEN, GRAY e WHITE.

path/style.scss
@import '~ugla/sass/index';

Dentro do angular.json, no nó architect.build.options, logo abaixo do script: [] adicionar o trecho abaixo:

path/angular.json
"allowedCommonJsDependencies": [
  "lodash"
]

Com isso, seu projeto já está com Ugla e pronto para ser usado.