CSS: visual-debug ​

.-with-visual-debug — เค้าโครงสำหรับดีบั๊กเลย์เอาต์: ประกอบ .-with-visual-debug เข้ากับองค์ประกอบใดก็ได้เพื่อเน้นกล่องและลูกโดยตรง ทำให้โครงสร้างของเลย์เอาต์มองเห็นได้ในทันที.

Group: ปลั๊กอิน · Source: visual-debug.css

การใช้งาน ​

css
@import "@pantoken/plugin-visual-debug/visual-debug.css";

ตัวอย่าง ​

html
<div class="instui-view -with-visual-debug">
  <span>Outlined child.</span>
</div>

พร็อพเพอร์ตีที่กำหนดเอง ​

คุณสมบัติชนิดค่าเริ่มต้นคำอธิบาย
--pantoken-visual-debug-color——สีของเส้นขอบ (ค่าเริ่มต้นเป็นแมเจนต้าสดใส); ย้อมสีใหม่เพื่อเปลี่ยนเส้นขอบดีบั๊กทั้งหมด.

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--instui-logo-canvas-horizontal-color<url>url("data:image/svg+xml
--instui-logo-canvas-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-canvas-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-canvas-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-canvas-icon-color<url>url("data:image/svg+xml
--instui-logo-canvas-icon-current-color<url>url("data:image/svg+xml
--instui-logo-canvas-icon-dark<url>url("data:image/svg+xml
--instui-logo-canvas-icon-reversed<url>url("data:image/svg+xml
--instui-logo-canvas-stacked-color<url>url("data:image/svg+xml
--instui-logo-canvas-stacked-dark<url>url("data:image/svg+xml
--instui-logo-canvas-stacked-full-color<url>url("data:image/svg+xml
--instui-logo-canvas-stacked-reversed<url>url("data:image/svg+xml
--instui-logo-igniteai-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-igniteai-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-igniteai-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-igniteai-icon-color<url>url("data:image/svg+xml
--instui-logo-igniteai-icon-current-color<url>url("data:image/svg+xml
--instui-logo-igniteai-icon-dark<url>url("data:image/svg+xml
--instui-logo-igniteai-icon-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-instructure-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-instructure-horizontal-full-color-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-current-color<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-dark<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-full-color<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-full-color-bg<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-icon-single-dot-reversed-bg<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-current-color<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-dark<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-full-color<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-full-color-bg<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-reversed<url>url("data:image/svg+xml
--instui-logo-instructure-icon-three-dot-reversed-bg<url>url("data:image/svg+xml
--instui-logo-learnplatform-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-learnplatform-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-learnplatform-horizontal-light<url>url("data:image/svg+xml
--instui-logo-learnplatform-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-learnplatform-icon-color<url>url("data:image/svg+xml
--instui-logo-learnplatform-icon-current-color<url>url("data:image/svg+xml
--instui-logo-learnplatform-icon-dark<url>url("data:image/svg+xml
--instui-logo-learnplatform-icon-reversed<url>url("data:image/svg+xml
--instui-logo-mastery-horizontal-color<url>url("data:image/svg+xml
--instui-logo-mastery-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-mastery-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-mastery-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-mastery-icon-color<url>url("data:image/svg+xml
--instui-logo-mastery-icon-current-color<url>url("data:image/svg+xml
--instui-logo-mastery-icon-dark<url>url("data:image/svg+xml
--instui-logo-mastery-icon-reversed<url>url("data:image/svg+xml
--instui-logo-mastery-stacked-color<url>url("data:image/svg+xml
--instui-logo-mastery-stacked-dark<url>url("data:image/svg+xml
--instui-logo-mastery-stacked-full-color<url>url("data:image/svg+xml
--instui-logo-mastery-stacked-reversed<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-ar<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-el<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-fa<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-he<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-hi<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-hy<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-jp<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-ko<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-ru<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-th<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-uk<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-full-color-zh<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-ar<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-el<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-fa<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-he<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-hi<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-hy<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-jp<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-ko<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-ru<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-th<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-uk<url>url("data:image/svg+xml
--instui-logo-pantoken-horizontal-reversed-zh<url>url("data:image/svg+xml
--instui-logo-pantoken-icon-color<url>url("data:image/svg+xml
--instui-logo-pantoken-icon-current-color<url>url("data:image/svg+xml
--instui-logo-pantoken-icon-dark<url>url("data:image/svg+xml
--instui-logo-pantoken-icon-reversed<url>url("data:image/svg+xml
--instui-logo-parchment-horizontal-color<url>url("data:image/svg+xml
--instui-logo-parchment-horizontal-dark<url>url("data:image/svg+xml
--instui-logo-parchment-horizontal-full-color<url>url("data:image/svg+xml
--instui-logo-parchment-horizontal-reversed<url>url("data:image/svg+xml
--instui-logo-parchment-icon-color<url>url("data:image/svg+xml
--instui-logo-parchment-icon-current-color<url>url("data:image/svg+xml
--instui-logo-parchment-icon-dark<url>url("data:image/svg+xml
--instui-logo-parchment-icon-reversed<url>url("data:image/svg+xml
--instui-logo-parchment-stacked-color<url>url("data:image/svg+xml
--instui-logo-parchment-stacked-dark<url>url("data:image/svg+xml
--instui-logo-parchment-stacked-full-color<url>url("data:image/svg+xml
--instui-logo-parchment-stacked-reversed<url>url("data:image/svg+xml