Il pannello azioni — 6 tipi di controlli

Che cos'è una barra azioni

Mentre la prima barra di JustZix serve ad attivare e disattivare le regole, il pannello azioni è più di una serie di interruttori. È un insieme di controlli interattivi con cui guidi una pagina mentre lavori — eseguire codice su richiesta, passargli valori, cambiare modalità.

La barra è agganciata a una cartella, un gruppo o un set di regole. Quando quella cartella è attiva sulla pagina corrente, le sue azioni compaiono nel pannello flottante; quando non corrisponde, il pannello resta vuoto. Così una pagina di negozio mostra controlli diversi da un pannello di amministrazione. La barra ricorda la sua posizione, e un clic destro la nasconde per il resto della sessione.

Sei tipi di controlli

Ogni azione ha un'etichetta, un colore e una scorciatoia da tastiera opzionale. Scegli uno dei sei tipi a seconda di ciò che ti serve:

• BUTTON — un pulsante fire-and-forget; un clic esegue semplicemente codice JS.
• SELECT — un menu a tendina; opzioni statiche o generate da JS, e sceglierne una avvia l'azione.
• INPUT — un singolo campo di testo in stile barra dei comandi; digiti un valore e confermi.
• SLIDER — un cursore che controlla una variabile CSS in tempo reale, come luminosità o zoom della pagina.
• TEXTAREA — un blocco note multiriga il cui contenuto viene memorizzato separatamente per ogni dominio.
• TOGGLE3 — un controllo segmentato a tre stati, ideale per modalità come dev / staging / prod.

Dal semplice clic al valore inserito

Il tipo più semplice è BUTTON — un obiettivo, un clic. SELECT e TOGGLE3 aggiungono la scelta: invece di un pulsante per ogni variante, mantieni un solo controllo con più stati. INPUT e TEXTAREA vanno oltre e accettano il testo che fornisci sul momento — il codice dell'azione legge quel valore e ne fa ciò che hai progettato.

SLIDER fa eccezione perché funziona in modo continuo: trascini la maniglia e la variabile CSS collegata cambia all'istante, senza nulla da confermare. È la scelta naturale per le regolazioni che vuoi vedere in tempo reale.

Le azioni eseguono codice su richiesta

Dietro ogni controllo c'è un piccolo frammento di CSS o JavaScript. La differenza rispetto a una regola normale è che una regola viene eseguita automaticamente al caricamento della pagina, mentre un'azione attende — viene eseguita solo quando la usi. È perfetto per operazioni che non vuoi ogni volta: svuotare un modulo, generare dati di test, cambiare tema, inviare la pagina a un altro strumento.

Poiché il codice dell'azione viene eseguito nello stesso mondo delle regole, ha accesso al DOM della pagina e ai globali di JustZix, quindi un solo pulsante può avviare un workflow a più passaggi. Il pannello azioni trasforma un set di regole statico in una piccola consolle di comando adatta alla pagina.