CSS เอกสารอ้างอิง API

เอกสารอ้างอิง CSS API ครอบคลุมชั้นคอมโพเนนต์แบบคลาสของ pantoken: components, utilities, global rules และ declarations ที่สร้างขึ้นบนระบบโทเค็น

ส่วนประกอบ

ชื่อ	คลาส	สรุป
agent-shell	.instui-agent-shell	ภาชนะพื้นผิวสำหรับเอเจนต์ AI
alert	.instui-alert	ข้อความแบบอินไลน์ที่มีแถบสีสถานะและสัญลักษณ์สถานะที่ถูกมาสก์จากชุดไอคอนร่วม
avatar	.instui-avatar	อวาตาร์ผู้ใช้แสดงตัวย่อหรือรูปภาพ เป็นรูปวงกลมตามค่าเริ่มต้น
badge	.instui-badge	จุดเล็กๆ แสดงจำนวนหรือสถานะวางทับที่มุมของเป้าหมาย
banner	.instui-banner	พื้นผิวข้อความที่ปิดได้ มีไอคอนสำหรับประกาศระดับหน้า或ในบริบท
billboard	.instui-billboard	บล็อกสถานะว่างหรือเรียกร้องการกระทำขนาดใหญ่: ไอคอนฮีโร่หรือรูปภาพ หัวเรื่อง และข้อความ
breadcrumb	.instui-breadcrumb	เส้นทาง breadcrumb พร้อมตัวคั่น; เครมสุดท้ายคือหน้าปัจจุบัน
breadcrumb.link	li	เศษ (InstUI Breadcrumb.Link), เป็น <li> ใน <ol> ของพาเรนต์; อันสุดท้ายคือหน้าปัจจุบัน
button	.instui-button	คอนโทรลการกระทำที่เข้าถึงได้ ตกแต่งจากพาเลตโทเค็น; เป็นแบบ primary ตามค่าเริ่มต้น
byline	.instui-byline	สื่อวัตถุ: รูปฮีโร่เคียงข้างชื่อเรื่องและคำอธิบาย
calendar	.instui-calendar	กริดเดือนแบบคงที่พร้อมการนำทาง หัววันในสัปดาห์ และเซลล์วัน
calendar.day	.day	เซลล์ของวัน (InstUI Calendar.Day); -today, -selected และ -outside-month ระบุสถานะของมัน
card	.instui-card	ภาชนะพื้นผิวที่รับเนื้อหาใดๆ ได้ตามต้องการ
checkbox	.instui-checkbox	เช็คลิสต์เนทีฟและป้ายกำกับ หรือสวิตช์ผ่าน -variant-toggle
close-button	.instui-close-button	ปุ่มไอคอนโปร่งใสที่วาดเครื่องหมาย × เอง มีสามขนาดและแบบ on-color
context-view	.instui-context-view	คอลเอาต์ยกพื้นพร้อมหางชี้ วางตำแหน่งได้ทุกด้าน; ทำงานเป็น [popover] เนทีฟ
drawer-layout	.instui-drawer-layout	เค้าโครงแยกส่วนพร้อมถาดข้างพับได้และแผงเนื้อหาหลักที่เลื่อนดูได้
drawer-layout.content	.content	แผงเนื้อหาหลักที่เติมพื้นที่ที่เหลือข้างถาด
drawer-layout.tray	.tray	แผงข้างเคียงเนื้อหาหลัก พร้อมตัวเลือก overlay และม็อดิไฟเออร์ลักษณะถาด
file-drop	.instui-file-drop	โซนวางไฟล์ที่รองรับสถานะ hover, accepted และ rejected
form-field	.instui-form-field	ตัวห่อฟิลด์ฟอร์ม: ป้ายกำกับ คอนโทรล และเลย์เอาต์แบบอินไลน์ required หรือ readonly
form-field-group	.instui-form-field-group	กลุ่ม <fieldset> พร้อม legend เลย์เอาต์แบบคอลัมน์หรืออินไลน์ และระยะห่างปรับได้
form-field-messages	.instui-form-field-messages	ข้อความช่วยฟิลด์และข้อความตรวจสอบความถูกต้อง — hint, error, success และสำหรับเครื่องอ่านหน้าจอเท่านั้น — มีไอคอนเมื่อเป็น error และ success
heading	.instui-heading	แบบอักษรหัวเรื่องตั้งแต่ -level-h1 ถึง -level-h6
img	.instui-img	รูปภาพที่ตกแต่งด้วย <img> มีตัวปรับ display, crop และ effect ที่ซ้อนกัน
in-place-edit	.instui-in-place-edit	[contenteditable] ที่อ่านเป็นข้อความจนกว่าจะโฟกัส แล้วจะแสดงกรอบอินพุต
input-group	.instui-input-group	หน้ากากรอบอินพุตข้อความที่มีช่องไอคอนนำหน้าและต่อท้าย
link	.instui-link	ลิงก์ที่ตกแต่งด้วยขนาด แบบ inverse สำหรับพื้นหลังมืด และรูปแบบ inline หรือ unstyled
list	.instui-list	รายการที่มีระยะห่างระหว่างไอเท็มขับเคลื่อนด้วยโทเค็น
list.item	.instui-list	รายการหนึ่งรายการ (InstUI List.Item)
mask	.instui-mask	โอเวอร์เลย์ในไหล่ที่เติมพาเรนต์ที่มีการวางตำแหน่งและจัดกึ่งกลางเนื้อหา — เช่น สปินเนอร์ทับการ์ด หากเป็นโมดัล ให้ใช้ <dialog> เนทีฟ ( ::backdrop เป็นมาสก์) ม็อดิไฟเออร์เหล่านี้ยังมีให้แบบ global (เปล่า หรือเชนกับคอมโพเนนต์อื่น) — ดูยูทิลิตี้ global mask
menu	.instui-menu	พื้นผิว dropdown ของไอเท็ม กลุ่ม และตัวคั่น
menu.group	.group	หัวข้อกลุ่มที่มีป้ายกำกับ (InstUI Menu.Group/Menu.ItemGroup)
menu.item	.item	รายการเมนู (InstUI Menu.Item); เพิ่ม -disabled, -highlighted หรือ -active/[aria-checked]
menu.separator	.separator	เส้นแบ่งระหว่างไอเท็ม (InstUI Menu.Separator)
metric	.instui-metric	สถิติมีป้ายกำกับ — ค่าขนาดใหญ่เหนือคำบรรยาย
modal	.instui-modal	พื้นผิวไดอะล็อก (ทำงานบน native <dialog>); ส่วน header/body/footer
modal.body	.body	ภูมิภาคเนื้อหา (InstUI Modal.Body); <img> เพียงอย่างเดียวจะขยายเต็มความกว้าง
modal.footer	.footer	แถวการกระทำ (InstUI Modal.Footer)
modal.header	.header	แถวหัวเรื่อง (InstUI Modal.Header)
number-input	.instui-number-input	หน้ากากอินพุตตัวเลขพร้อมคอลัมน์สปินเนอร์ +/-
pagination	.instui-pagination	การนำทางหน้า: หน้าจำนวนแรก ย้อนกลับ ถัดไป สุดท้าย และลูกน้ำสำหรับช่องว่าง
pagination.page	.page	ลิงก์หน้าหรือปุ่ม (InstUI Pagination.Page); หน้าปัจจุบันมี [aria-current]
pill	.instui-pill	ป้ายสถานะแบบกะทัดรัด; เพิ่มไอคอนนำหน้าด้วยรูปแบบ -icon-<name> ร่วม
popover	.instui-popover	พื้นผิวยกสำหรับ [popover] เนทีฟ ที่วางตำแหน่งด้วยการจัดตำแหน่ง anchor ของ CSS
progress	.instui-progress	แถบความคืบหน้าที่กำหนดค่าได้ที่มีมิเตอร์สี ขนาด และป้ายค่าตัวเลือก
progress-circle	.instui-progress-circle	วงแหวนความคืบหน้าแบบวงกลมที่ขับเคลื่อนด้วยคุณสมบัติแบบกำหนดเอง --value และ --value-max
radio	.instui-radio	ปุ่มวิทยุเนทีฟและป้ายกำกับของมัน
radio-input-group	.instui-radio-input-group	กลุ่มวิทยุแบบเลือกเดียวดาย <fieldset> ธรรมดาหรือเป็น toggle แบบ segmented ที่เชื่อมต่อกัน
range-input	.instui-range-input	สไลเดอร์ช่วงที่ตกแต่งด้วยฟองค่ากลับด้าน
rating	.instui-rating	การจัดอันดับด้วยดาวที่มีไอคอนดาวที่เต็มและว่าง พร้อมป้ายตัวเลขแบบเลือกใส่ได้
side-nav-bar	.instui-side-nav-bar	แถบนำทางแนวตั้งที่มีไอคอนเหนือป้ายชื่อ พร้อมโหมดย่อเหลือแค่ไอคอน
side-nav-bar.item	.item	รายการนำทาง (InstUI SideNavBar.Item); -selected ระบุรายการที่กำลังใช้งาน
simple-select	.instui-simple-select	<select> แบบเนทีฟที่มีสไตล์พร้อม caret โดยสอดคล้องกับสถานะและขนาดของช่องกรอกข้อความ
spinner	.instui-spinner	วงโหลดที่เคลื่อนไหวได้; ใส่ role="status" และ aria-label ให้ด้วย
table	.instui-table	ตารางข้อมูลที่มีสไตล์สำหรับ th และ td พร้อมคำบรรยายแบบเลือกใส่ได้ และเลย์เอาต์แบบ hover, fixed, และ stacked-card
table.body	tbody	กลุ่มแถวข้อมูลของตาราง (InstUI Table.Body)
table.cell	td	เซลล์ข้อมูล (InstUI Table.Cell)
table.col-header	th	เซลล์หัวคอลัมน์ (InstUI Table.ColHeader); ใช้สไตล์เริ่มต้น th ซึ่งถูกแทนที่โดย table.row-header สำหรับ th[scope="row"]
table.head	thead	กลุ่มแถวหัวตาราง (InstUI Table.Head)
table.row	tr	แถวของตาราง (InstUI Table.Row)
table.row-header	th[scope="row"]	เซลล์หัวแถว (InstUI Table.RowHeader); ได้รับสไตล์จากโทเค็นหัวแถว ไม่ใช่โทเค็นหัวคอลัมน์
tabs	.instui-tabs	ชุดแผงแบบแท็บ: รายการแท็บ แท็บที่เลือกได้ และแผงของพวกมัน
tabs.panel	.panel	แผงเนื้อหาสำหรับแท็บ (InstUI Tabs.Panel)
tabs.tab	.tab	ปุ่มแท็บเดี่ยว (InstUI Tabs.Tab ตั้งค่าผ่านรายการแท็บของพาเรนต์ Tabs); -selected ระบุรายการที่กำลังใช้งาน
tag	.instui-tag	ชิปแนวอินไลน์สำหรับคำหลักหรือฟิลเตอร์
text	.instui-text	ไทโปกราฟีสำหรับข้อความตัวถัง พร้อมตัวแก้ขนาด น้ำหนัก สี และสไตล์
text-area	.instui-text-area	<textarea> แบบเนทีฟที่มีสไตล์และปรับขนาดได้ มีสถานะและขนาดเดียวกับช่องกรอกข้อความ
text-input	.instui-text-input	<input> แบบเนทีฟที่มีสไตล์ — รวมถึง date, time, และ datetime-local ซึ่งตัวเบราว์เซอร์จะให้ตัวเลือก picker — พร้อมสถานะการตรวจสอบความถูกต้องและขนาด
toggle-details	.instui-toggle-details	<details> แบบเนทีฟที่มีสไตล์พร้อม disclosure และเชฟรอนหมุนได้
toggle-group	.instui-toggle-group	disclosure แบบมีเส้นขอบสร้างบน <details>: แถวสรุปพร้อมเชฟรอนและเนื้อหาที่พับ/ขยายได้
tooltip	.instui-tooltip	ฟองทูลทิปแบบ CSS สำหรับ hover และ focus สามารถวางตำแหน่งได้ทุกด้าน
tray	.instui-tray	พาเนลปักขอบที่เลื่อนเข้าจากด้านใดก็ได้; เป็น [popover] หรือ <dialog> แบบเนทีฟ
tree-browser	.instui-tree-browser	ต้นไม้ disclosure ของคอลเลกชันซ้อนและไอเท็มใบไม้ พร้อมเชฟรอนหมุนได้
view	.instui-view	primitive View: กล่องกลางๆ ที่มีตัวแก้คีย์-ค่า สำหรับพื้นหลัง เส้นขอบ รัศมี เงา การแสดง ตำแหน่ง การล้น และเคอร์เซอร์ ตัวแก้ทั้งหมดนี้ยังใช้ได้แบบทั่วโลก (เปล่า หรือเชนบนคอมโพเนนต์อื่น) — ดูยูทิลิตี้ background/border/shadow/display/position/overflow/cursor

เครื่องมือช่วย

ชื่อ	คลาส	สรุป
color	.--text-danger	ยูทิลิตี้สีเชิงความหมาย: .--bg-<name>, .--text-<name> (มีนามแฝงเป็น .--color-<name>), และ .--border-<name> สำหรับพาเลตต์เชิงความหมายที่คัดสรร แต่ละอันยังมีม็อดิไฟเออร์นามแฝงที่แนบกับคอมโพเนนต์ (เช่น -bg-danger บน .instui-<component> ใดๆ)
cursor	.--cursor-pointer	cursor ในรูปแบบคลาสทั่วโลกที่ประกอบได้ — .--cursor-<value> — ใช้ได้เปล่าหรือเชนบนคอมโพเนนต์ใดก็ได้ (.instui-button.--cursor-pointer)
gap	.--gap-md	ยูทิลิตี้ gap สำหรับ flex/grid บนสเกลช่องว่าง ทั้งแบบคำย่อ (--gap-sm) หรือแบบยาว (--gap-small) ใช้ได้เปล่าหรือเชนบนคอมโพเนนต์ใดก็ได้ (.instui-view.--gap-sm) — คอมโพเนนต์ที่กำหนด gap ของตัวเองจากโทเค็นเฉพาะคอมโพเนนต์อาจถูกแทนที่ได้
icon	.instui-icon	ระบบไอคอน: ขนาด .instui-icon บวกตัวเพนเตอร์ร่วม -icon-<name> ที่มาสก์กริฟ (ใน currentColor) ก่อนองค์ประกอบใดๆ
layout	.--display-flex	ยูทิลิตี้การแสดงผลและการจัดแนวข้อความ — .--display-<value> และ .--text-align-<value> — ในรูปแบบคลาสทั่วโลกที่ประกอบได้ ใช้ได้เปล่าหรือเชนบนคอมโพเนนต์ใดก็ได้
maskglobal	.--mask-overlay	สำเนาแบบคู่ระดับโลกของม็อดิไฟเออร์ overlay ของคอมโพเนนต์ mask — --mask-overlay, --mask-fullscreen, --mask-blur — ใช้ได้เปล่าหรือเชนบนคอมโพเนนต์ใดก็ได้ โดยไม่ต้องห่อในองค์ประกอบ .instui-mask
overflow	.--overflow-x-hidden	overflow-x/overflow-y ในรูปแบบคลาสทั่วโลกที่ประกอบได้ — .--overflow-x-<value> / .--overflow-y-<value> — ใช้ได้เปล่าหรือเชนบนคอมโพเนนต์ใดก็ได้
position	.--position-relative	position ในรูปแบบคลาสทั่วโลกที่ประกอบได้ — .--position-<value> — ใช้ได้เปล่าหรือเชนบนคอมโพเนนต์ใดก็ได้ (.instui-button.--position-relative)
responsive	[class*="-hidden-"],[class*="-show-"]	คลาสสำหรับแสดง/ซ่อนตามความกว้างของ viewport หรือ container ตามสเกลเบรกพอยต์ที่มีธีม
screen-reader-content	.instui-screen-reader-content	ซ่อนเนื้อหาเชิงมองแต่ยังคงให้เทคโนโลยีช่วยเหลือเข้าถึงได้ (รูปแบบ clip มาตรฐาน)
spacing	.--p-md	ยูทิลิตี้มาร์จิ้นและแพดดิง — .--m<side>-<step> / .--margin-<side>-<step> และ .--p<side>-<step> / .--padding-<side>-<step> บนสเกลช่องว่าง (ด้าน t/b/s/e/x/y หรือไม่มี, เขียนย่อหรือยาวเต็มรูปแบบ — ตัวอย่างเช่น --mb-sm และ --margin-bottom-small เป็นกฎเดียวกัน; มาร์จิ้นยังรับ auto). ใช้เป็นแบบเปลือยหรือเชนต่อกับคอมโพเนนต์ใดก็ได้ (เช่น class="instui-view --mb-sm").
stacking	.--stack-topmost	ยูทิลิตี้ระดับความลึก z-index — .--stack-<level> (deepest, below, above, topmost) — ใช้เป็นแบบเปลือยหรือเชนต่อกับคอมโพเนนต์ใดก็ได้ เพื่อให้เลเยอร์เรียงซ้อนอย่างคาดเดาได้แทนการใช้ตัวเลขที่ปรับด้วยมือ.
transition	.instui-transition.-transition-fade-entering	คลาสสถานะแอนิเมชันสำหรับคอมโพเนนต์ Transition — .instui-transition และคลาสสถานะ (-transition-fade-entering, -transition-scale-exited, ฯลฯ) — ใช้เป็นแบบเปลือยหรือเชนต่อกับคอมโพเนนต์ใดก็ได้.
truncate	.--truncate	การตัดข้อความแบบจุดไข่ปลา (ellipsis) ด้วยการจำกัดบรรทัดที่ควบคุมโดย --lines — ใช้เป็นแบบเปลือยหรือเชนต่อกับคอมโพเนนต์ใดก็ได้ (.instui-button.--truncate).
visual-debug	.-with-visual-debug	เครื่องหมายขอบเพื่อดีบักเลย์เอาต์: ประสม .-with-visual-debug เข้ากับองค์ประกอบใดก็ได้เพื่อวาดขอบกล่องและลูกโดยตรง ทำให้โครงสร้างเลย์เอาต์เห็นได้ชัดในทันที.

กฎ

ชื่อ	คลาส	สรุป
base	*	รีเซ็ตระดับโกลบอลแบบเลือกใช้: box-sizing, พื้นผิวหน้าเพจ, สีข้อความพื้นฐานและฟอนต์, color-scheme, และค่าเริ่มต้นของลิงก์.
prose	:where(body)	ค่าเริ่มต้นทางไทโปกราฟีสำหรับ HTML ดิบ — หัวเรื่อง ย่อหน้า รายการ ลิงก์ และโค้ด — ถูกนำไปใช้โดยอัตโนมัติในทุกที่ที่นำเข้า (ค่าเริ่มต้น :where(body)); ส่ง options.scope เพื่อกำหนดรูทเนื้อหาอื่นแทน (เช่น .vp-doc).

Plugins

ชื่อ	คลาส	สรุป
logos	.logos	โลโก้ผลิตภัณฑ์ Instructure เป็นโทเค็นภาพ CSS: --instui-logo-<product>-<layout>-<mode> เก็บ data-URI SVG ดังนั้นโลโก้จะวาดผ่านเช่น background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	คลาสยูทิลิตี้แบบเลือกใช้สำหรับพาเลตดิไพรมิทีฟ: .instui-bg-/fg-/border-primitive-color-<name> ทาสีจากโทเค็นสีดิไพรมิทีฟ รวมทั้งยูทิลิตี้ font-family/font-weight สำหรับโทเค็นฟอนต์ดิไพรมิทีฟ. แยกออกจากยูทิลิตี้เชิงความหมายเพื่อให้การโอเวอร์ไรด์ด้านนั้นคงความเป็นเชิงความหมายเท่านั้น.
visual-debug	.-with-visual-debug	เครื่องหมายขอบเพื่อดีบักเลย์เอาต์: ประสม .-with-visual-debug เข้ากับองค์ประกอบใดก็ได้เพื่อวาดขอบกล่องและลูกโดยตรง ทำให้โครงสร้างเลย์เอาต์เห็นได้ชัดในทันที.

layout

ชื่อ	คลาส	สรุป
callout	div[class~="instui-callout"]	การแจ้งเตือนข้อมูลแบบอินไลน์สำหรับเตือนสั้น ๆ หรือบันทึกย่อ.
hero	div[class~="instui-hero"]	ส่วนหัวเต็มความกว้างพร้อมชื่อ คำบรรยาย และภาพพื้นหลังที่เป็นทางเลือก.
page-layout	div[class~="instui-page-layout"]	เค้าโครงหน้าแบบสามคอลัมน์มาตรฐานพร้อมส่วนหัว แถบด้านข้าง และเนื้อหาหลัก.
rubric-note	div[class~="instui-rubric-note"]	บันทึกที่มีโครงสร้างพร้อมหมวดหมู่รูบริกและตัวชี้วัดการให้คะแนน.
testimonial	div[class~="instui-testimonial"]	การแสดงคำคมหรือคำรับรองพร้อมการอ้างอิงและภาพประกอบที่เป็นทางเลือก.
two-column	div[class~="instui-two-column"]	เค้าโครงสองคอลัมน์ที่มีพื้นที่เนื้อหาด้านซ้ายและด้านขวา.
wrapper	body[class~="instui-display-flex"]	แอป-เชลล์รูปแบบแถว: เมนูข้าง, คอนเทนเนอร์พร้อมส่วนหัว, และพาเนลที่เป็นทางเลือก.