Skip to content

pantoken / visual-debug

visual-debug

Beta

@pantoken/plugin-visual-debug — InstUI'nin withVisualDebug prop'unun CSS'i.

InstUI'nin düzen ilkeleri (View, Flex, Grid, List, …) bir düzeni ayıklarken kutuyu ve çocuklarını çerçevelemek için withVisualDebug kabul eder. Bu eklenti tek bir kısa çizgi-önekli değiştirici -with-visual-debug üretir; bu, herhangi bir öğe üzerinde (herhangi bir baz ile bileşim, örn. .instui-view -with-visual-debug) çalışır. Çerçeve rengi bir --pantoken-visual-debug-color özel özelliğidir (varsayılan olarak parlak macenta) — böylece yeniden renklendirmek kolaydır.

Örnek

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>

Arayüzler

Değişkenler

Fonksiyonlar

Başvurular

default

PTK_INLINE_CODE_0 yeniden adlandırır ve visualDebug'i yeniden dışa aktarır