← Tous les articles

Types d'actions

TOGGLE3 : un contrôle segmenté à 3 états dans la barre d'actions — Dev/Staging/Prod, Clair/Sombre/Auto

15 mai 2026 · par JustZix Team

Un bouton, c'est « clic → exécuter ». Un select, c'est « choisir un parmi N ». Et « trois états connus » — parce que vous avez Dev/Staging/Prod, ou Clair/Sombre/Auto, ou Off/Défaut/Force-on ? C'est TOGGLE3 (depuis v2.13.25) — un contrôle segmenté à 3 états avec sa propre couleur pour chaque état et un code JS qui se déclenche au changement d'état.

Pourquoi un type séparé et pas select / button ?

Trois états s'inscrivent parfaitement dans le pattern « contrôle segmenté iOS » — les 3 visibles à la fois, l'un est actif, cliquer un autre échange l'état actif. Pas de liste déroulante, pas de surprises. UX mobile classique.

Première action TOGGLE3 — Clair / Sombre / Auto

Ajoutez une action TOGGLE3 à la barre d'actions, avec 3 états :

states[0] = { label: 'Clair', value: 'light' }
states[1] = { label: 'Auto',  value: 'auto'  }
states[2] = { label: 'Sombre', value: 'dark' }
defaultStateIdx: 1   // Auto à la première visite

Dans le champ Code :

// `value`, `stateIdx`, `stateLabel` sont injectés en const avant votre code.
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(`Theme → ${stateLabel} (idx ${stateIdx})`);

Clic « Sombre » → l'action change le HTML, clic « Clair » → le code se déclenche à nouveau avec une nouvelle valeur. L'état actif a la couleur pleine (depuis action.color), les inactifs sont atténués (depuis colorInactiveText).

5 couleurs — chaque état a sa propre identité visuelle

Depuis v2.13.32 TOGGLE3 a 5 couleurs configurables (plus que tout autre type d'action) :

Cas d'usage : Dev/Staging/Prod où chaque état actif a sa propre couleur sémantique (vert / ambre / rouge), mais le fond du wrap et le texte inactif restent neutres pour ne pas se mélanger. Un état « Prod » rouge ressort visuellement — c'est tout l'intérêt.

Cas d'usage 1 — sélecteur d'environnement Dev/Staging/Prod

Vous avez une appli avec 3 environnements sous les mêmes chemins. Jusqu'ici : édition manuelle d'URL, ou favoris. TOGGLE3 avec code :

// Chaque état a value = sous-domaine
states[0] = { label: 'DEV',  value: 'dev.app.com' }     // color : vert
states[1] = { label: 'STG',  value: 'staging.app.com' } // color : ambre
states[2] = { label: 'PROD', value: 'app.com' }         // color : rouge

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

Clic « PROD » → vous sautez en production en conservant chemin + query. La mémoire retient l'état actif, donc après rechargement vous atterrissez dans le même environnement (defaultStateIdx n'agit que comme fallback à la première entrée — la mémoire gagne).

Cas d'usage 2 — feature flag tri-état

Votre appli lit un feature flag depuis le localStorage. Trois états réalistes : « Off » (force-off), « Défaut » (piloté par le serveur), « Force on ».

states[0] = { label: 'OFF',     value: 'off'     }
states[1] = { label: 'DÉFAUT',  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();  // Appliquer au rechargement
JUSTZIX.log(`Feature flag → ${stateLabel}`);

Scénario QA : en 2 secondes basculer un feature flag, vérifier la vue, revenir au défaut. Tout sans devs et sans la console DevTools.

Cas d'usage 3 — piloter depuis une autre action via JZ.setValue

Vous avez TOGGLE3 « Theme » (Clair/Auto/Sombre). Et une deuxième action BUTTON « 🌙 Mode nuit » dans une autre barre, qui doit être un script qui met Sombre + masque les bannières + diminue la taille de police :

// BUTTON "Mode nuit" — Code :
JZ.setValue('Theme', 'dark');   // → active l'état idx 2 + exécute son code
document.body.style.fontSize = '14px';
document.querySelectorAll('.cookie-banner, .promo')
  .forEach(el => el.style.display = 'none');
JUSTZIX.log('Mode nuit activé.');

Fonctionne par valeur — JZ.setValue('Theme', 'dark') trouve l'état avec value='dark' ; ou par label — JZ.setValue('Theme', 'Sombre') insensible à la casse ; ou numériquement — JZ.setValue('Theme', 2). Tous les chemins convergent vers le même état.

Pièges

• states.length doit être EXACTEMENT 3. La vérification isValidAction() rejette l'action si le tableau est plus petit/grand. Besoin de 2 états ? Utilisez SELECT static avec 2 options ou un BUTTON-toggle. Besoin de 4+ ? Utilisez SELECT static.
• La valeur dans un état est optionnelle — retombe sur state.label. Recommandé : utilisez une valeur symbolique courte (comme 'dev'/'stg'/'prod'), car les labels peuvent contenir des espaces ou des caractères unicode.
• La mémoire stocke l'INDEX (0/1/2), pas la valeur. Si vous réordonnez les états plus tard — les utilisateurs avec une mémoire antérieure atterriront sur un état différent. Bonne pratique : ne réordonnez pas les états dans une action existante.
• defaultStateIdx ne s'applique qu'à la première entrée. Si l'utilisateur a déjà utilisé l'action, la mémoire gagne — même si vous changez defaultStateIdx dans l'éditeur plus tard, les utilisateurs existants verront toujours leur état précédent.
• label max 5 caractères dans l'éditeur UI. Le renderer accepte des valeurs plus longues, mais le format étroit du contrôle segmenté exige de la brièveté.

Et ensuite

TOGGLE3 est le type d'action avec la plus riche « identité UX » — couleurs par état, persistance, scope intégré pour les décisions à 3 états. Voyez aussi les helpers window.JZ pour le contrôle d'état programmatique depuis d'autres actions et les marqueurs CSS DEV/STG/PROD comme compagnon visuel du sélecteur d'environnement.

Installez JustZix — entièrement gratuit, sans serveur, sans compte.