Panoramica del Design — Eredità e Sovrascrittura
Navi+ utilizza un sistema di stili a tre livelli. Comprendere questo ti consente di stilizzare il tuo menu in modo efficiente senza ripetere le impostazioni.
Tre Livelli
┌─────────────────────────────────────────────────────┐
│ LIVELLO 1 (Design → Livello 1) │
│ Si applica a tutti gli elementi di menu di primo livello │
│ Questo è il valore predefinito globale per l'intero menu │
└───────────────────┬─────────────────────────────────┘
│ Livello 2-3 eredita se vuoto
┌───────────────────▼─────────────────────────────────┐
│ LIVELLO 2-3 (Design → Livello 2-3) │
│ Si applica a sottomenu / menu a discesa │
│ Vuoto = stesso di Livello 1 │
└───────────────────┬─────────────────────────────────┘
│ Sovrascrive tutto per singolo elemento
┌───────────────────▼─────────────────────────────────┐
│ PER-ELEMENTO (Modifica Elemento → Interfaccia) │
│ Impostazioni per singolo elemento │
│ Sovrascrive completamente Livello 1 e Livello 2-3 │
└─────────────────────────────────────────────────────┘
Regole di Eredità
Livello 2-3 eredita da Livello 1 per tutti i campi vuoti:
| Campo Livello 2-3 | Eredita da Livello 1 |
|---|---|
| Colore del Testo | Colore del Testo |
| Dimensione del Font | Dimensione del Font |
| Peso del Font | Peso del Font |
| Colore dell’Icona | Colore dell’Icona |
| Dimensione dell’Icona | Dimensione dell’Icona |
| Layout di Visualizzazione | Layout di Visualizzazione |
| Allineamento | Allineamento |
| Colore del Divider | Divider (globale) |
Se configuri solo il Livello 1, i sottomenu seguono automaticamente. Vai al Livello 2-3 solo quando vuoi che i sottomenu appaiano diversi dal menu principale.
Sovrascrittura per Singolo Elemento
Le impostazioni applicate a un elemento specifico in Modifica Elemento → Interfaccia (colore del testo, dimensione dell’icona, sfondo, ecc.) sovrascrivono Livello 1 e Livello 2-3 solo per quell’elemento. Altri elementi non sono influenzati.
Per rimuovere una sovrascrittura: cancella il campo in Modifica Elemento — l’elemento torna a Livello 1/2-3.
Esempio
Obiettivo: Tutti e 5 gli elementi hanno testo bianco, tranne “Sale” che è rosso.
- Design → Livello 1 → Colore del Testo =
#FFFFFF - Modifica Elemento → “Sale” → Interfaccia → Colore del Testo =
#FF0000
Risultato: 4 elementi rimangono bianchi, “Sale” diventa rosso. Non è necessario modificare ogni elemento singolarmente.
Sintassi Mobile | Desktop
Alcuni campi di spaziatura supportano valori diversi per mobile e desktop:
8 16 8 16 → stesso valore su entrambi i dispositivi
8 8 8 8 | 12 24 12 24 → sinistra: mobile, destra: desktop
La parte prima di | si applica su mobile; la parte dopo si applica su desktop (≥768px).