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">