← Todos los artículos

Tipos de acciones

TOGGLE3: segmented control de 3 estados en la barra de acciones — Dev/Staging/Prod, Light/Dark/Auto

15 mayo 2026 · por JustZix Team

Un botón es «clic → ejecuta». Un select es «elige uno de entre N». ¿Y cuando quieres «tres estados conocidos» — porque tienes Dev/Staging/Prod, o Light/Dark/Auto, o Off/Default/Force-on? Entonces usas TOGGLE3 (desde v2.13.25) — un segmented control de 3 estados con su propio color por cada estado y código JS que arranca al cambiar de estado.

¿Por qué un tipo separado y no select / button?

Tres estados se disponen perfectamente en un patrón «segmented control iOS» — los 3 visibles a la vez, uno está activo, pulsar otro intercambia el estado activo. Sin dropdown, sin sorpresas. La clásica UX móvil.

Primera acción TOGGLE3 — Light / Dark / Auto

Añade una acción TOGGLE3 a la barra de acciones, con 3 estados:

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

En el campo «Code»:

// `value`, `stateIdx`, `stateLabel` se inyectan como const antes de tu código.
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})`);

Pulsas «Dark» → la acción cambia el HTML, pulsas «Light» → el código vuelve a arrancar con un nuevo valor. El estado activo tiene el color pleno (de action.color), los inactivos están atenuados (de colorInactiveText).

5 colores — cada estado tiene su identidad visual

Desde v2.13.32 TOGGLE3 tiene 5 colores configurables (más que cualquier otro tipo de acción):

Caso de uso: Dev/Staging/Prod donde cada estado activo tiene su propio color semántico (verde / ámbar / rojo), pero el fondo del wrap y el texto inactivo siguen siendo neutros para no mezclarse. Un estado «Prod» rojo salta visualmente a la vista — ese es justo el punto.

Caso de uso 1 — Switcher de entorno Dev/Staging/Prod

Tienes una app con 3 entornos bajo las mismas rutas. Hasta ahora: edición manual de la URL, o marcadores. TOGGLE3 con código:

// Cada estado tiene value = subdominio
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» → saltas a producción conservando ruta + query. La memory mantiene el estado activo, así que tras el reload aterrizas en el mismo entorno (defaultStateIdx actúa solo como fallback en el primer acceso — gana la memory).

Caso de uso 2 — Feature flag de tres estados

Tu app lee un feature flag del localStorage. Tres estados realistas: «Off» (force-off), «Default» (gestionado por el servidor), «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();  // Aplica al reload
JUSTZIX.log(`Feature flag → ${stateLabel}`);

Escenario QA: en 2 segundos cambias un feature flag, verificas la vista, vuelves al default. Todo sin dev y sin la consola de las DevTools.

Caso de uso 3 — Pilotar desde otra acción mediante JZ.setValue

Tienes un TOGGLE3 «Tema» (Light/Auto/Dark). Y una segunda acción BUTTON «🌙 Night mode» en otra barra, que debería ser un script que pone Dark + oculta los banners + reduce el tamaño de la fuente:

// BUTTON «Night mode» — Code:
JZ.setValue('Tema', 'dark');   // → activa el estado idx 2 + ejecuta su código
document.body.style.fontSize = '14px';
document.querySelectorAll('.cookie-banner, .promo')
  .forEach(el => el.style.display = 'none');
JUSTZIX.log('Night mode activado.');

Funciona por value — JZ.setValue('Tema', 'dark') encuentra el estado con value='dark'; o por label — JZ.setValue('Tema', 'Dark') case-insensitive; o numéricamente — JZ.setValue('Tema', 2). Todos los caminos convergen en el mismo estado.

Trampas

• states.length debe ser EXACTAMENTE 3. La comprobación isValidAction() rechaza la acción si el array es menor/mayor. ¿Te hacen falta 2 estados? Usa SELECT static con 2 opciones o un BUTTON-toggle. ¿Hacen falta 4+? Usa SELECT static.
• El value en un estado es opcional — hace fallback a state.label. Recomendado: usa un value simbólico breve (como 'dev'/'stg'/'prod'), porque las labels pueden contener espacios o caracteres unicode.
• La memory guarda el ÍNDICE (0/1/2), no el value. Si reordenas los estados más tarde — los usuarios con memory anterior aterrizarán en un estado distinto. Best practice: no reordenes los estados en una acción existente.
• defaultStateIdx se aplica solo en el primer acceso. Si el usuario ya ha usado la acción, gana la memory — aunque cambies defaultStateIdx en el editor más tarde, los usuarios existentes seguirán viendo su estado anterior.
• label máx. 5 caracteres en el editor de la UI. El renderer acepta valores más largos, pero el formato estrecho del segmented control exige brevedad.

Qué hacer después

TOGGLE3 es el tipo de acción con la «identidad UX» más rica — colores por estado, persistencia, scope integrado para decisiones de 3 estados. Mira también window.JZ helpers para el control programático de los estados desde otras acciones y los marcadores CSS DEV/STG/PROD como complemento visual del switcher de entorno.

Instala JustZix — completamente gratuito, sin servidor, sin cuenta.