Skip to content

pantoken / visual-debug

visual-debug

Bêta

@pantoken/plugin-visual-debug — le CSS pour la propriété withVisualDebug d'InstUI.

Les primitives de mise en page d'InstUI (View, Flex, Grid, List, …) acceptent withVisualDebug pour tracer le contour de la boîte et de ses enfants lors du débogage d'une mise en page. Ce plugin émet un seul modificateur préfixé par un tiret, -with-visual-debug, qui fonctionne sur n'importe quel élément (composé avec n'importe quelle base, p. ex. .instui-view -with-visual-debug). La couleur du contour est une propriété personnalisée --pantoken-visual-debug-color (par défaut un magenta vif) donc il est facile de la retinter.

Exemple

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>

Interfaces

Variables

Fonctions

Références

default

Renomme et réexporte visualDebug