Framework7 - Temi colore

Descrizione

Framework7 fornisce diversi temi di colore per le tue applicazioni.

Un tema colore fornisce diversi tipi di colori del tema utilizzati per lavorare senza problemi con le applicazioni come specificato nella tabella seguente:

S.No Tipo e descrizione del tema
1 Colori del tema iOS

È possibile utilizzare 10 diversi temi colore iOS predefiniti per l'applicazione.

2 Colori tema materiale

Framework7 fornisce 22 diversi temi colore dei materiali predefiniti per l'applicazione.

Applicazione di temi colore

Framework7 consente di applicare temi di colore su diversi elementi come pagina, blocco elenco, barra di navigazione, riga di pulsanti ecc. Utilizzando la classe theme- [color] all'elemento genitore.

Esempio

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

Temi di layout

È possibile utilizzare il tema del layout predefinito per l'applicazione utilizzando due temi bianco e scuro . I temi possono essere applicati utilizzando la classe layout- [theme] all'elemento genitore.

Esempio

...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

Classi di aiuto

Framework7 fornisce classi di supporto aggiuntive, che possono essere utilizzate all'esterno o senza temi come elencato di seguito:

  • color-[color] - Può essere utilizzato per modificare il colore del testo del blocco o il colore del pulsante, del collegamento, dell'icona ecc.

  • bg-[color] - Imposta il colore di sfondo predefinito sul blocco o elemento.

  • border-[color] - Imposta il colore del bordo predefinito sul blocco o sull'elemento.