pantoken / visual-debug

visual-debug ​

بتا

@pantoken/plugin-visual-debug — CSS مربوط به prop withVisualDebug در InstUI.

قالب‌های چیدمان 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