pantoken / visual-debug

visual-debug ​

Beta

@pantoken/plugin-visual-debug — CSS för InstUI:s withVisualDebug-egenskap.

InstUI:s layoutprimitiver (View, Flex, Grid, List, …) accepterar withVisualDebug för att markera boxen och dess barn vid felsökning av layouten. Denna plugin emitterar en enda bindestrecksprefixed modifierare, -with-visual-debug, som fungerar på vilket element som helst (kombinerbar med vilken bas som helst, t.ex. .instui-view -with-visual-debug). Konturfärgen är en --pantoken-visual-debug-color-anpassad egenskap (standard är en stark magenta) så den är lätt att återfärga.

Exempel ​

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>

Gränssnitt ​

Variabler ​

Funktioner ​

Referenser ​

default ​

Byter namn på och exporterar om visualDebug