pantoken / visual-debug

visual-debug ​

Beta

@pantoken/plugin-visual-debug — InstUI:n withVisualDebug-propin CSS.

InstUI:n asettelun primitiivit (View, Flex, Grid, List, …) ottavat withVisualDebug, jolla piirretään laatikon ja sen lasten ääriviivat asettelua debugatessa. Tämä lisäosa tuottaa yhden väliviivalla etuliitetyn muokkaajan, -with-visual-debug, joka toimii millä tahansa elementillä (yhdisteenä minkä tahansa peruselementin kanssa, esim. .instui-view -with-visual-debug). Ääriviivan väri on --pantoken-visual-debug-color-niminen mukautettu ominaisuus (oletuksena kirkas magenta), joten sen sävyn muuttaminen on helppoa.

Esimerkki ​

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>

Rajapinnat ​

Muuttujat ​

Funktionit ​

Viittaukset ​

default ​

Nimeää uudelleen ja uudelleenvie visualDebug