pantoken-root / 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