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