Iônico - Cores

Antes de começarmos com os elementos reais disponíveis no framework Ionic, vamos entender um pouco como o Ionic faz uso de cores para diferentes elementos.

Classes de cores iônicas

A estrutura iônica nos dá um conjunto de nine predefined color classes. Você pode usar essas cores ou substituí-las por seu próprio estilo.

A tabela a seguir mostra o conjunto padrão de nove cores fornecido pela Ionic. Usaremos essas cores para definir o estilo de diferentes elementos Iônicos neste tutorial. Por enquanto, você pode verificar todas as cores conforme mostrado abaixo -

Classe Descrição Resultado
leve Para ser usado para a cor branca  
estábulo Para ser usado para cor cinza claro  
positivo Para ser usado para a cor azul  
calma Para ser usado para a cor azul claro  
equilibrado Para ser usado para a cor verde  
energizado Para ser usado para a cor amarela  
assertivo Para ser usado para a cor vermelha  
real Para ser usado para a cor violeta  
Sombrio Para ser usado na cor preta  

Uso de cor iônica

Ionic faz uso de classes diferentes para cada elemento. Por exemplo, um elemento de cabeçalho terábar classe e um botão terá um buttonclasse. Para simplificar o uso, usamos cores diferentes prefixando classe de elemento em um nome de cor.

Por exemplo, para criar um cabeçalho de cor azul, usaremos um bar-calm como segue -

<div class = "bar bar-header bar-calm">
   ...
</div>

Da mesma forma, para criar um botão de cor cinza, usaremos button-stable classe da seguinte forma.

<div class = "button button-stable">
   ...
</div>

Você também pode usar a classe de cor Ionic como qualquer outra classe CSS. Agora vamos estilizar dois parágrafos com uma cor equilibrada (verde) e uma cor energizada (amarelo).

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

O código acima irá produzir a seguinte tela -

Discutiremos em detalhes nos capítulos subsequentes, quando criarmos diferentes elementos usando diferentes classes.

Personalizando cores com CSS

Quando você quiser alterar algumas das cores padrão Ionic usando CSS, você pode fazer isso editando o lib/css/ionic.cssArquivo. Em alguns casos, essa abordagem não é muito produtiva porque cada elemento (cabeçalho, botão, rodapé ...) usa suas próprias classes para estilização.

Portanto, se você quiser alterar a cor da classe "light" para laranja, precisará pesquisar todos os elementos que usam essa classe e alterá-la. Isso é útil quando você deseja alterar a cor de um único elemento, mas não é muito prático para alterar a cor de todos os elementos porque consumiria muito tempo.

Personalização de cores usando SASS

SASS (que é a forma abreviada de - Syntactically Awesome Style Sheet) fornece uma maneira mais fácil de alterar a cor de todos os elementos de uma vez. Se você deseja usar o SASS, abra seu projeto na janela de comando e digite -

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

Isso configurará o SASS para o seu projeto. Agora você pode alterar as cores padrão abrindo oscss/ionic.app.scss arquivo e, em seguida, digitando o seguinte código antes desta linha - @import "www/lib/ionic/scss/ionic";

Vamos mudar a cor balanceada para azul escuro e a cor energizada para laranja. Os dois parágrafos que usamos acima agora são azul escuro e laranja.

$balanced: #000066 !default;
$energized: #FFA500 !default;

Agora, se você usar o seguinte exemplo -

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

O código acima irá produzir a seguinte tela -

Todos os elementos iônicos que usam essas classes mudarão para azul escuro e laranja. Leve em consideração que você não precisa usar classes de cores padrão Ionic. Você sempre pode estilizar os elementos da maneira que desejar.

Nota importante

o www/css/style.cssO arquivo será removido do cabeçalho do index.html após a instalação do SASS. Você precisará vinculá-lo manualmente se ainda quiser usá-lo. Abra index.html e adicione o seguinte código dentro do cabeçalho.

<link href = "css/style.css" rel = "stylesheet">