pantoken / components

components ​

เบต้า

@pantoken/components — ไลบรารีคอมโพเนนต์ CSS ที่มีลักษณะเหมือน InstUI สร้างจากโทเค็น --instui-*.

สไตล์ชีทที่แจกจ่าย:

  • Base (baseCss) — ค่าเริ่มต้นของเอกสารระดับโลกแบบเลือกใช้งานจากโทเค็น (box-sizing, การรีเซ็ต body, พื้นผิวหน้าเพจ, สี/แบบอักษรพื้นฐาน, color-scheme). ยังมีวงแหวน focus-outline ดังนั้นทุกองค์ประกอบที่รับโฟกัสจะได้รับเส้นขอบ :focus-visible ที่เข้าถึงได้โดยอัตโนมัติ โหลดเมื่อ pantoken เป็นเจ้าของเพจ
  • Prose (proseCss) — สไตล์สำหรับ HTML มาร์กดาวน์/บทความ (ตาราง, หัวเรื่อง, ลิงก์, รายการ, โค้ด) ที่จำกัดไว้ในรากเนื้อหา ทำให้หน้าดอกคมหรือพื้นที่เนื้อหาดูเหมือน InstUI โดยไม่ต้องเปลี่ยน DOM เป็นคอมโพเนนต์ ซึ่งเป็นสิ่งที่ตัวเรนเดอร์ไซต์จัดส่งเป็น components.css
  • Components (buttonCss, alertCss, badgeCss, รวบรวมโดย componentsCss) — สไตล์คอมโพเนนต์แบบใช้คลาสที่นำไปใช้กับมาร์กอัปของคุณเอง (<button class="instui-button">) เพื่อรูปลักษณ์ InstUI นอกเฟรมเวิร์กคอมโพเนนต์ แผ่นนี้ถูกนำโดยมาตราส่วนเงา --instui-elevation-* (elevationCss) เนื่องจากคอมโพเนนต์จำนวนมากลอยอยู่ ทำให้เงาเป็นคุณลักษณะการออกแบบโดยเนื้อแท้ไม่ใช่ของเสริม
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, พร้อมชุดสี/โทเค็นเชิงความหมายที่คัดสรร) — ชั้นของคลาสข้ามงานแบบเลือกใช้งาน ตัวปล่อยโทเค็น→คลาส ทั่วไป (colorUtilitiesCss, tokenUtilitiesCss) อยู่ใน @pantoken/utils; แพ็กเกจนี้ป้อนชื่อ เชิงความหมาย ที่คัดสรรไว้ให้ ในขณะที่ @pantoken/plugin-primitives ป้อนพาเลตต์ดิบ
  • Fonts (เลือกใช้ fonts.css) — กฎ @font-face สำหรับฟอนต์แบรนด์ Instructure. Base นำไปใช้ ฟอนต์; fonts.css โหลด ไฟล์ woff2 ดังนั้นข้อความจะลดทอนอย่างสวยงามหากไม่มีไฟล์เหล่านี้

ทุกอย่างเป็น CSS ล้วนที่มาจาก IR ของโทเค็น ดังนั้นจึงตาม InstUI ผ่านโทเค็นโดยไม่มีการพึ่งพาแพ็กเกจ React ของ InstUI สำหรับคอมโพเนนต์แบบโต้ตอบจริง ใช้ @pantoken/react-markdown (content) หรือ @instructure/ui-* (apps).

โมดูลนี้เป็นบาร์เรล: แต่ละเรคอร์ดที่มีเอกสารอยู่ในไฟล์ของตัวเองภายใต้ components//utilities//rules//declarations/ ซึ่งเขียนด้วย API การรวมของ lib/. รีจิสทรีส์ (COMPONENTS/UTILITIES/RULES/DECLARATIONS) ขับเคลื่อนการรวบรวม + การทดสอบความเท่าเทียม.

อินเทอร์เฟซ ​

ตัวแปร ​

ฟังก์ชัน ​