Skip to content

pantoken / visual-debug

visual-debug

Beta

@pantoken/plugin-visual-debug — il CSS per la proprietà withVisualDebug di InstUI.

I primitivi di layout di InstUI (View, Flex, Grid, List, …) accettano withVisualDebug per tracciare il contorno della scatola e dei suoi figli durante il debug del layout. Questo plugin emette un singolo modificatore prefissato dal trattino, -with-visual-debug, che funziona su qualsiasi elemento (componibile con qualsiasi base, p.es. .instui-view -with-visual-debug). Il colore del contorno è una proprietà personalizzata --pantoken-visual-debug-color (predefinita un magenta acceso) così è facile ritintarla.

Esempio

ts
import { toCss } from "@pantoken/css";
import { byTheme } from "@pantoken/tokens";
import { visualDebug } from "@pantoken/plugin-visual-debug";

const css = toCss(byTheme("rebrand"), { plugins: [visualDebug()] });
// <div class="instui-view -with-visual-debug">…</div>

Interfacce

Variabili

Funzioni

Riferimenti

default

Rinomina e riesporta visualDebug