pantoken / visual-debug

visual-debug ​

Beta（測試）

@pantoken/plugin-visual-debug — InstUI 的 withVisualDebug 屬性的 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