Skip to content

pantoken / visual-debug

visual-debug

Beta

@pantoken/plugin-visual-debug — CSS dla właściwości withVisualDebug w InstUI.

Prymitywy układu InstUI (View, Flex, Grid, List, …) przyjmują withVisualDebug, aby obrysować pole oraz jego dzieci podczas debugowania układu. Ten plugin emituje pojedynczy modyfikator z prefiksem myślnika, -with-visual-debug, który działa na dowolnym elemencie (złożony z dowolną bazą, np. .instui-view -with-visual-debug). Kolor obrysu to niestandardowa właściwość --pantoken-visual-debug-color (domyślnie jaskrawy magenta), dzięki czemu łatwo ją przefarbować.

Przykład

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>

Interfejsy

Zmienne

Funkcje

Odwołania

default

Zmienia nazwę i ponownie eksportuje visualDebug