pantoken / visual-debug

visual-debug ​

ベータ

@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 ​

Renames and re-exports visualDebug