← Wszystkie wpisy

Typy akcji

TOGGLE3: 3-stanowe przełączniki w pasku akcji — Dev/Staging/Prod, Light/Dark/Auto

15 maja 2026 · autor JustZix Team

Button to "klik → wykonaj". Select to "wybierz jedną z N". A co kiedy chcesz "trzy znane stany" — bo masz Dev/Staging/Prod, albo Light/Dark/Auto, albo Off/Default/Force-on? Wtedy używasz TOGGLE3 (od v2.13.25) — 3-stanowego segmented control z własnym kolorem dla każdego state'a i kodem JS odpalanym przy zmianie.

Czemu osobny typ, a nie select / button?

3 stany się świetnie układają w pasek typu "iOS segmented control" — wszystkie 3 widoczne na raz, jeden jest active, klik na inny zmienia active state. Nie ma dropdownu, nie ma surprises. Klasyczny UX z mobilek.

Pierwsza akcja TOGGLE3 — Light / Dark / Auto

Dodaj akcję typu TOGGLE3 do action bara, z 3 stanami:

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

W polu "Code" wpisz:

// `value`, `stateIdx`, `stateLabel` są wstrzyknięte jako const przed Twoim kodem.
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})`);

Klikasz "Dark" → akcja zmienia HTML, klikasz "Light" → odpala kod znów z nową value. Active state ma pełen kolor (z action.color), nieaktywne są przygaszone (z colorInactiveText).

5 kolorów — każdy stan ma własną tożsamość wizualną

Od v2.13.32 TOGGLE3 ma 5 konfigurowalnych kolorów (więcej niż jakikolwiek inny typ akcji):

Use case: Dev/Staging/Prod gdzie każdy aktywny stan ma swój semantyczny kolor (zielony / żółty / czerwony), ale tło i nieaktywne tekstu są neutralne, żeby nie mieszać. Czerwony stan "Prod" rzuca się w oczy — to robi swoją robotę.

Use case 1 — Environment switcher Dev/Staging/Prod

Masz aplikację z 3 środowiskami pod tymi samymi paths. Dotychczas: ręczne edytowanie URL'a, albo zakładki. TOGGLE3 z kodem:

// Każdy stan ma value = subdomain
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}`;

Klik "PROD" → przeskakujesz na produkcję z zachowaniem ścieżki + query. Memory trzyma aktywny state, więc po reloadzie wracasz w to samo środowisko (bo defaultStateIdx jest tylko fallbackiem przy pierwszym entry — memory wygrywa).

Use case 2 — Feature flag tri-state

Twoja aplikacja czyta feature flag z localStorage. Trzy realistyczne stany: "Off" (force-off), "Default" (z serwera), "Force on" (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();  // Apply na reload
JUSTZIX.log(`Feature flag → ${stateLabel}`);

QA team scenario: w 2 sekundy przełącz feature flag, sprawdź widok, wróć do default. Wszystko bez devów i bez konsoli.

Use case 3 — Sterowanie z innej akcji przez JZ.setValue

Masz TOGGLE3 "Theme" (Light/Auto/Dark). I drugą akcję BUTTON "🌙 Night mode" w innym pasku, która ma być scriptem ustawiającym Dark + ukrywającym banery + zmniejszającym fontsize:

// BUTTON "Night mode" — Code:
JZ.setValue('Theme', 'dark');   // → aktywuje state idx 2 + odpala jego kod
document.body.style.fontSize = '14px';
document.querySelectorAll('.cookie-banner, .promo')
  .forEach(el => el.style.display = 'none');
JUSTZIX.log('Night mode activated.');

Działa też po value — JZ.setValue('Theme', 'dark') znajduje state z value='dark', albo po labelu — JZ.setValue('Theme', 'Dark') case-insensitive, albo numerycznie — JZ.setValue('Theme', 2). Wszystko prowadzi do tego samego state'a.

Pułapki

• states.length musi być DOKŁADNIE 3. Walidacja na isValidAction() odrzuca akcję jeśli array jest mniejszy/większy. Chcesz 2 stany? Użyj SELECT static z 2 opcjami albo BUTTON-toggle. Chcesz 4+? Użyj SELECT static.
• value w state jest opcjonalne — fallback do state.label. Polecane: użyj krótkiego symbolic value (jak 'dev'/'stg'/'prod'), bo label może mieć spacje, polskie znaki itp.
• Memory trzyma INDEX (0/1/2), nie value. Jeśli zmienisz kolejność stanów po latach — memory wcześniej zapisanych userów wskaże inny stan. Best practice: nie przestawiaj stanów w istniejącej akcji.
• defaultStateIdx tylko przy pierwszym entry. Jeśli już używałeś akcji raz, memory wygrywa — nawet jeśli zmienisz defaultStateIdx w editorze, użytkownicy z memory zobaczą swój poprzedni stan.
• label max 5 znaków w UI editora. Renderer przyjmie dłuższe, ale wąski format segmented control wymaga zwięzłości.

Co dalej

TOGGLE3 to typ akcji z najpełniejszą "tożsamością UX" — własne kolory na każdy ze stanów, persistencja, wbudowany scope dla 3-state'owych decyzji. Sprawdź też window.JZ helpers dla programmatic sterowania stanami z innych akcji oraz CSS markery DEV/STG/PROD jako visual companion dla environment switcher'a.

Zainstaluj JustZix — kompletnie za darmo, bez serwera, bez konta.