pantoken-root / visual-debug

visual-debug ​

Beta

@pantoken/plugin-visual-debug — te CSS mō te prop withVisualDebug o InstUI.

Ko ngā mātāpono ā-rauemi a InstUI (View, Flex, Grid, List, …) ka whakamahi i te withVisualDebug hei whakamārama i te pouaka me ōna tamariki i te wā e wetewete ana i te tatauranga. Ka whakaputa tēnei pūtirotiro he kaiwhakatika kotahi kua tīmata ki te taraiwa (dash-prefixed), -with-visual-debug, e mahi ana ki runga i tētahi elemene (ka taea te hono ki tētahi turanga katoa, hei tauira .instui-view -with-visual-debug). Ko te tae ā-ake he rawa ritenga --pantoken-visual-debug-color (taunoa he karaka-māwhero kanapa) kia māmā ai te huri tae.

Tauira ​

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>

Ngā Atanga ​

Ngā Taipūtī ​

Ngā Mahi ​

Ngā Tohutoro ​

default ​

Huri ingoa, ka kaweake anō i te visualDebug