domingo, 31 de janeiro de 2016

Customizando Ionic 1 com Sass


O Ionic possui diversas cores para dar vida ao nosso app, e elas podem ser utilizadas em quase tudo, como em ícones, botões, headers, footers, menus, etc, através de classes no html.

Ao criar um aplicativo do tipo “tabs” ou “sidemenu”, ele já vem com a cor padrão “stable”, que é um cinza bem clarinho. E se você quiser trocar ela por outra cor padrão do Ionic é muito fácil, é só substituir a classe “stable” no html pela de outra cor. Seguem as cores disponíveis do Ionic:


E se nenhuma destas cores for a ideal para o seu projeto a solução é bem simples: Usar Sass. Esta é, com certeza, a maneira mais fácil e rápida de estilizar o app com a cor de sua preferência.

E é bem simples mesmo: crie o aplicativo (mais informações sobre como criar um app com Ionic no post anterior clicando aqui), use o prompt de comando para navegar até a pasta do projeto e utilize o seguinte comando para configurar o Sass:

$ ionic setup sass

Agora é só abrir o aplicativo no editor de texto de sua preferência (eu uso o Sublime Text) e abrir o código “ionic.app.scss” da pasta “scss” (veja a imagem abaixo).



Agora, para alterar a cor você precisa copiar a linha correspondente a cor que está sendo utilizada no seu app (no caso da minha demonstração é a cor padrão “stable”) e colar ela abaixo do “*/”, alterando a cor do código. Eu utilizei a cor #FF69B4 no exemplo, que é um rosa pink.


Caso você tenha duvidas quanto ao código das cores, você pode dar uma olhada nesta página, que possui uma tabela de cores bem completa.
  
O resultado será este:



Espero que este post tenha lhe ajudado, bons estudos e até a próxima! ;)


Anterior
Proxima

0 comentários: