Skip to content

pantoken / visual-debug

visual-debug

बीटा

@pantoken/plugin-visual-debug — InstUI के withVisualDebug prop के लिए CSS।

InstUI के लेआउट प्रिमिटिव (View, Flex, Grid, List, …) लेआउट डिबग करते समय बॉक्स और उसके चाइल्ड को आउटलाइन करने के लिए withVisualDebug लेते हैं। यह प्लगइन एक डैश-प्रिफ़िक्स्ड मॉडिफ़ायर, -with-visual-debug, जारी करता है जो किसी भी एलिमेंट पर काम करता है (किसी भी बेस के साथ कंपाउंड, जैसे .instui-view -with-visual-debug)। आउटलाइन का रंग एक --pantoken-visual-debug-color कस्टम प्रॉपर्टी है (डिफ़ॉल्ट रूप से चमकदार मैजेंटा), इसलिए इसे फिर से रंगना आसान है।

उदाहरण

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>

इंटरफेस

वैरिएबल्स

फंक्शन्स

संदर्भ

default

नाम बदलता है और पुनः-निर्यात करता है visualDebug