pantoken-root / visual-debug

visual-debug ​

Beta

@pantoken/plugin-visual-debug — CSS cho thuộc tính withVisualDebug của InstUI.

Các nguyên thủy bố cục của InstUI (View, Flex, Grid, List, …) nhận withVisualDebug để phác thảo hộp và các phần tử con khi gỡ lỗi bố cục. Plugin này phát ra một modifier duy nhất bắt đầu bằng dấu gạch ngang, -with-visual-debug, hoạt động trên bất kỳ phần tử nào (kết hợp với bất kỳ base nào, ví dụ .instui-view -with-visual-debug). Màu viền là một thuộc tính tùy chỉnh --pantoken-visual-debug-color (mặc định là màu magenta sáng) nên dễ dàng thay đổi màu.

Ví dụ ​

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>

Giao diện ​

Biến ​

Hàm ​

Tham chiếu ​

default ​

Đổi tên và xuất lại visualDebug