← Все статьи

Типы действий

TOGGLE3: трёхпозиционный сегментированный контрол на панели действий — Dev/Staging/Prod, Light/Dark/Auto

15 мая 2026 · автор JustZix Team

Кнопка — это «клик → выполни». Select — это «выбери один из N». А когда тебе нужны «три известных состояния» — потому что у тебя Dev/Staging/Prod, или Light/Dark/Auto, или Off/Default/Force-on? Тогда используй TOGGLE3 (с v2.13.25) — трёхпозиционный сегментированный контрол со своим цветом для каждого состояния и JS-кодом, запускающимся при смене состояния.

Почему отдельный тип, а не select / button?

Три состояния идеально укладываются в паттерн «iOS-сегментированный контрол» — все 3 видны одновременно, одно активно, клик по другому переключает активное состояние. Никаких dropdown, никаких сюрпризов. Классический мобильный UX.

Первое действие TOGGLE3 — Light / Dark / Auto

Добавь действие TOGGLE3 на панель действий, с 3 состояниями:

states[0] = { label: 'Light', value: 'light' }
states[1] = { label: 'Auto',  value: 'auto'  }
states[2] = { label: 'Dark',  value: 'dark'  }
defaultStateIdx: 1   // Auto при первом визите

В поле «Code»:

// `value`, `stateIdx`, `stateLabel` внедряются как const перед твоим кодом.
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(`Тема → ${stateLabel} (idx ${stateIdx})`);

Кликаешь «Dark» → действие меняет HTML, кликаешь «Light» → код перезапускается с новым значением. У активного состояния полный цвет (из action.color), у неактивных — приглушённый (из colorInactiveText).

5 цветов — у каждого состояния своя визуальная идентичность

С v2.13.32 у TOGGLE3 5 настраиваемых цветов (больше, чем у любого другого типа действия):

Сценарий: Dev/Staging/Prod, где каждое активное состояние имеет свой семантический цвет (зелёный / янтарный / красный), но фон обёртки и неактивный текст остаются нейтральными, чтобы не смешиваться. Красное состояние «Prod» визуально бросается в глаза — в этом и суть.

Сценарий 1 — переключатель окружений Dev/Staging/Prod

У тебя приложение с 3 окружениями под одними путями. До сих пор: ручное редактирование URL или закладки. TOGGLE3 с кодом:

// У каждого состояния value = поддомен
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}`;

Клик «PROD» → прыгаешь в продакшен, сохраняя path + query. Memory держит активное состояние, поэтому после перезагрузки ты попадаешь в то же окружение (defaultStateIdx действует только как фолбэк при первом доступе — выигрывает memory).

Сценарий 2 — трёхпозиционный фича-флаг

Твоё приложение читает фича-флаг из localStorage. Три реалистичных состояния: «Off» (force-off), «Default» (управляется сервером), «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();  // Применяем при перезагрузке
JUSTZIX.log(`Фича-флаг → ${stateLabel}`);

QA-сценарий: за 2 секунды меняешь фича-флаг, проверяешь вид, возвращаешься к дефолту. Всё без разработчиков и без консоли DevTools.

Сценарий 3 — управление из другого действия через JZ.setValue

У тебя есть TOGGLE3 «Тема» (Light/Auto/Dark). И второе действие BUTTON «🌙 Night mode» на другой панели, которое должно быть скриптом, устанавливающим Dark + скрывающим баннеры + уменьшающим размер шрифта:

// BUTTON «Night mode» — Code:
JZ.setValue('Тема', 'dark');   // → активирует состояние idx 2 + выполняет его код
document.body.style.fontSize = '14px';
document.querySelectorAll('.cookie-banner, .promo')
  .forEach(el => el.style.display = 'none');
JUSTZIX.log('Night mode активирован.');

Работает по value — JZ.setValue('Тема', 'dark') находит состояние с value='dark'; или по метке — JZ.setValue('Тема', 'Dark') регистронезависимо; или численно — JZ.setValue('Тема', 2). Все пути сходятся на одном состоянии.

Ловушки

• states.length должен быть РОВНО 3. Проверка isValidAction() отклоняет действие, если массив меньше/больше. Нужно 2 состояния? Используй SELECT static с 2 опциями или BUTTON-toggle. Нужно 4+? Используй SELECT static.
• value в состоянии необязателен — фолбэк на state.label. Рекомендуется: используй короткий символический value (вроде 'dev'/'stg'/'prod'), потому что метки могут содержать пробелы или unicode-символы.
• Memory сохраняет ИНДЕКС (0/1/2), не value. Если позже переупорядочить состояния — пользователи с прежней memory попадут в другое состояние. Лучшая практика: не переупорядочивай состояния в существующем действии.
• defaultStateIdx применяется только при первом доступе. Если пользователь уже использовал действие, выигрывает memory — даже если ты изменишь defaultStateIdx в редакторе позже, существующие пользователи всё равно увидят своё прежнее состояние.
• метка максимум 5 символов в редакторе UI. Рендерер принимает более длинные значения, но узкий формат сегментированного контрола требует краткости.

Что делать дальше

TOGGLE3 — тип действия с самой богатой «UX-идентичностью» — цвета по состоянию, постоянство, встроенный scope для трёхпозиционных решений. Смотри также window.JZ helpers для программного управления состояниями из других действий и CSS-маркеры DEV/STG/PROD как визуальное дополнение для переключателя окружений.

Установи JustZix — полностью бесплатно, без сервера, без аккаунта.