Ionico - Colori

Prima di iniziare con gli elementi reali disponibili nel framework Ionic, comprendiamo un po 'come Ionic utilizza i colori per elementi diversi.

Classi di colore ionico

Il framework ionico ci offre una serie di file nine predefined color classes. Puoi usare questi colori o sovrascriverli con il tuo stile.

La tabella seguente mostra il set predefinito di nove colori fornito da Ionic. Useremo questi colori per disegnare diversi elementi ionici in questo tutorial. Per ora, puoi controllare tutti i colori come mostrato di seguito -

Classe Descrizione Risultato
luce Da utilizzare per il colore bianco  
stabile Da utilizzare per il colore grigio chiaro  
positivo Da utilizzare per il colore blu  
calma Da utilizzare per il colore azzurro  
equilibrato Da utilizzare per il colore verde  
eccitato Da utilizzare per il colore giallo  
assertivo Da utilizzare per il colore rosso  
reale Da utilizzare per il colore viola  
buio Da utilizzare per il colore nero  

Uso del colore ionico

Ionic utilizza classi diverse per ogni elemento. Ad esempio, un elemento di intestazione avràbar class e un pulsante avranno un buttonclasse. Per semplificare l'utilizzo, utilizziamo colori diversi aggiungendo un prefisso alla classe dell'elemento nel nome di un colore.

Ad esempio, per creare un'intestazione di colore blu, useremo un file bar-calm come segue -

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

Allo stesso modo, per creare un pulsante di colore grigio, useremo button-stable classe come segue.

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

Puoi anche usare la classe di colori Ionic come qualsiasi altra classe CSS. Ora modificheremo due paragrafi con un colore equilibrato (verde) e uno energizzato (giallo).

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

Il codice precedente produrrà la seguente schermata:

Discuteremo in dettaglio nei capitoli successivi, quando creeremo elementi differenti usando classi differenti.

Personalizzazione dei colori con CSS

Quando vuoi cambiare alcuni dei colori predefiniti di Ionic usando CSS, puoi farlo modificando il file lib/css/ionic.cssfile. In alcuni casi, questo approccio non è molto produttivo perché ogni elemento (intestazione, pulsante, piè di pagina ...) utilizza le proprie classi per lo stile.

Pertanto, se si desidera modificare il colore della classe "chiara" in arancione, è necessario cercare tra tutti gli elementi che utilizzano questa classe e cambiarlo. Questo è utile quando si vuole cambiare il colore di un singolo elemento, ma non molto pratico per cambiare il colore di tutti gli elementi perché impiegherebbe troppo tempo.

Personalizzazione dei colori utilizzando SASS

SASS (che è la forma abbreviata di - Syntactically Awesome Style Sheet) fornisce un modo più semplice per cambiare il colore per tutti gli elementi contemporaneamente. Se vuoi usare SASS, apri il tuo progetto nella finestra di comando e digita -

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

Questo imposterà SASS per il tuo progetto. Ora puoi cambiare i colori predefiniti aprendo il filescss/ionic.app.scss file e quindi digitando il codice seguente prima di questa riga - @import "www/lib/ionic/scss/ionic";

Cambieremo il colore bilanciato in blu scuro e il colore energizzato in arancione. I due paragrafi che abbiamo usato sopra sono ora blu scuro e arancione.

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

Ora, se usi il seguente esempio:

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

Il codice precedente produrrà la seguente schermata:

Tutti gli elementi ionici che utilizzano queste classi cambieranno in blu scuro e arancione. Tieni presente che non è necessario utilizzare le classi di colori predefinite di Ionic. Puoi sempre modellare gli elementi nel modo che preferisci.

Nota importante

Il www/css/style.cssil file verrà rimosso dall'intestazione di index.html dopo aver installato SASS. Sarà necessario collegarlo manualmente se si desidera ancora utilizzarlo. Apri index.html e aggiungi il seguente codice nell'intestazione.

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