← Tutti gli articoli

Tipi di azioni

TOGGLE3: segmented control a 3 stati nella barra delle azioni — Dev/Staging/Prod, Light/Dark/Auto

15 maggio 2026 · di JustZix Team

Un pulsante è «clic → esegui». Una select è «scegline una tra N». E quando vuoi «tre stati noti» — perché hai Dev/Staging/Prod, o Light/Dark/Auto, o Off/Default/Force-on? Allora usi TOGGLE3 (da v2.13.25) — un segmented control a 3 stati con un proprio colore per ogni stato e codice JS che parte al cambio di stato.

Perché un tipo separato e non select / button?

Tre stati si dispongono perfettamente in un pattern «segmented control iOS» — tutti e 3 visibili contemporaneamente, uno è attivo, cliccarne un altro scambia lo stato attivo. Niente dropdown, niente sorprese. La classica UX mobile.

Prima azione TOGGLE3 — Light / Dark / Auto

Aggiungi un'azione TOGGLE3 alla barra delle azioni, con 3 stati:

states[0] = { label: 'Light', value: 'light' }
states[1] = { label: 'Auto',  value: 'auto'  }
states[2] = { label: 'Dark',  value: 'dark'  }
defaultStateIdx: 1   // Auto alla prima visita

Nel campo «Code»:

// `value`, `stateIdx`, `stateLabel` sono iniettati come const prima del tuo codice.
const html = document.documentElement;
if (value === 'light') {
  html.style.colorScheme = 'light';
  html.removeAttribute('data-theme');
} else if (value === 'dark') {
  html.style.colorScheme = 'dark';
  html.setAttribute('data-theme', 'dark');
} else {
  html.style.colorScheme = '';
  html.removeAttribute('data-theme');
}
JUSTZIX.log(`Tema → ${stateLabel} (idx ${stateIdx})`);

Clicchi «Dark» → l'azione cambia l'HTML, clicchi «Light» → il codice riparte con un nuovo valore. Lo stato attivo ha il colore pieno (da action.color), quelli inattivi sono attenuati (da colorInactiveText).

5 colori — ogni stato ha la sua identità visiva

Da v2.13.32 TOGGLE3 ha 5 colori configurabili (più di qualsiasi altro tipo di azione):

Caso d'uso: Dev/Staging/Prod dove ogni stato attivo ha il proprio colore semantico (verde / ambra / rosso), ma lo sfondo del wrap e il testo inattivo restano neutri così da non mescolarsi. Uno stato «Prod» rosso salta visivamente all'occhio — è proprio il punto.

Caso d'uso 1 — Switcher di ambiente Dev/Staging/Prod

Hai un'app con 3 ambienti sotto gli stessi path. Finora: modifica manuale dell'URL, o segnalibri. TOGGLE3 con codice:

// Ogni stato ha value = sottodominio
states[0] = { label: 'DEV',  value: 'dev.app.com' }     // color: green
states[1] = { label: 'STG',  value: 'staging.app.com' } // color: amber
states[2] = { label: 'PROD', value: 'app.com' }         // color: red

// Code:
const newHost = value;
const path = location.pathname + location.search;
location.href = `https://${newHost}${path}`;

Clic «PROD» → salti in produzione conservando path + query. La memory tiene lo stato attivo, quindi dopo il reload atterri nello stesso ambiente (defaultStateIdx agisce solo come fallback al primo accesso — vince la memory).

Caso d'uso 2 — Feature flag a tre stati

La tua app legge un feature flag dal localStorage. Tre stati realistici: «Off» (force-off), «Default» (gestito dal server), «Force on».

states[0] = { label: 'OFF',     value: 'off'     }
states[1] = { label: 'DEFAULT', value: 'default' }
states[2] = { label: 'FORCE',   value: 'force'   }

// Code:
if (value === 'default') {
  localStorage.removeItem('ff_newCheckout');
} else if (value === 'off') {
  localStorage.setItem('ff_newCheckout', 'false');
} else {
  localStorage.setItem('ff_newCheckout', 'true');
}
location.reload();  // Applica al reload
JUSTZIX.log(`Feature flag → ${stateLabel}`);

Scenario QA: in 2 secondi cambi un feature flag, verifichi la vista, torni al default. Tutto senza dev e senza la console dei DevTools.

Caso d'uso 3 — Pilotare da un'altra azione tramite JZ.setValue

Hai un TOGGLE3 «Tema» (Light/Auto/Dark). E una seconda azione BUTTON «🌙 Night mode» in un'altra barra, che dovrebbe essere uno script che imposta Dark + nasconde i banner + riduce la dimensione del font:

// BUTTON «Night mode» — Code:
JZ.setValue('Tema', 'dark');   // → attiva lo stato idx 2 + esegue il suo codice
document.body.style.fontSize = '14px';
document.querySelectorAll('.cookie-banner, .promo')
  .forEach(el => el.style.display = 'none');
JUSTZIX.log('Night mode attivata.');

Funziona per value — JZ.setValue('Tema', 'dark') trova lo stato con value='dark'; o per label — JZ.setValue('Tema', 'Dark') case-insensitive; o numericamente — JZ.setValue('Tema', 2). Tutti i percorsi convergono sullo stesso stato.

Trappole

• states.length deve essere ESATTAMENTE 3. Il controllo isValidAction() rifiuta l'azione se l'array è più piccolo/grande. Ti servono 2 stati? Usa SELECT static con 2 opzioni o un BUTTON-toggle. Ne servono 4+? Usa SELECT static.
• Il value in uno stato è opzionale — fa fallback su state.label. Consigliato: usa un value simbolico breve (come 'dev'/'stg'/'prod'), perché le label possono contenere spazi o caratteri unicode.
• La memory salva l'INDICE (0/1/2), non il value. Se riordini gli stati in seguito — gli utenti con memory precedente atterreranno su uno stato diverso. Best practice: non riordinare gli stati in un'azione esistente.
• defaultStateIdx si applica solo al primo accesso. Se l'utente ha già usato l'azione, vince la memory — anche se cambi defaultStateIdx nell'editor in seguito, gli utenti esistenti vedranno comunque il loro stato precedente.
• label max 5 caratteri nell'editor della UI. Il renderer accetta valori più lunghi, ma il formato stretto del segmented control richiede brevità.

Cosa fare dopo

TOGGLE3 è il tipo di azione con la più ricca «identità UX» — colori per stato, persistenza, scope integrato per decisioni a 3 stati. Vedi anche window.JZ helpers per il controllo programmatico degli stati da altre azioni e i marker CSS DEV/STG/PROD come complemento visivo per lo switcher di ambiente.

Installa JustZix — completamente gratuito, senza server, senza account.