CSS Rujukan API

Rujukan API CSS merangkumi lapisan komponen berasaskan kelas pantoken: komponen, utiliti, peraturan global, dan deklarasi yang dibina di atas sistem token.

Komponen

Nama	Kelas	Ringkasan
agent-shell	.instui-agent-shell	Bekas permukaan untuk ejen AI.
alert	.instui-alert	Mesej sebaris dengan bar warna status dan glif status yang disamarkan dari set ikon dikongsi.
avatar	.instui-avatar	Avatar pengguna yang memaparkan inisial atau imej, bulat secara lalai.
badge	.instui-badge	Noktah kiraan atau status kecil yang diletakkan di atas sudut sasaran.
banner	.instui-banner	Permukaan mesej boleh ditutup dengan ikon untuk pengumuman peringkat halaman atau konteks.
billboard	.instui-billboard	Blok negeri kosong atau panggilan-untuk-tindakan yang besar: ikon atau imej hero, tajuk, dan mesej.
breadcrumb	.instui-breadcrumb	Jejak remah roti dengan pemisah; remah terakhir ialah halaman semasa.
breadcrumb.link	li	Sebuah remah (InstUI Breadcrumb.Link), sebuah <li> dalam <ol> induk; yang terakhir ialah halaman semasa.
button	.instui-button	Kawalan tindakan boleh diakses, berstail dari palet token; utama secara lalai.
byline	.instui-byline	Objek media: figur hero di sebelah tajuk dan penerangan.
calendar	.instui-calendar	Grid bulan statik dengan navigasi, pengepala hari minggu, dan sel hari.
calendar.day	.day	Sel hari (InstUI Calendar.Day); -today, -selected, dan -outside-month menandakan keadaannya.
card	.instui-card	Bekas permukaan yang menerima kandungan sebarang.
checkbox	.instui-checkbox	Kotak semak natif dan labelnya, atau suis melalui -variant-toggle.
close-button	.instui-close-button	Butang ikon lutsinar yang melukis glif × sendiri, dalam tiga saiz plus variasi pada warna latar.
context-view	.instui-context-view	Panggilan tinggi dengan caret, boleh diposisikan di mana-mana sisi; berfungsi sebagai [popover] natif.
drawer-layout	.instui-drawer-layout	Susun atur berbelah dengan dulang sisi boleh kuncup dan pane kandungan utama yang boleh skrol.
drawer-layout.content	.content	Pane kandungan utama yang mengisi ruang baki di sebelah dulang.
drawer-layout.tray	.tray	Panel sisi di sebelah kandungan utama, dengan overlay pilihan dan pengubah permukaan seperti dulang.
file-drop	.instui-file-drop	Zon jatuh fail dengan keadaan hover, diterima, dan ditolak.
form-field	.instui-form-field	Pembalut medan borang: label, kawalannya, dan susun atur inline, wajib, atau baca sahaja.
form-field-group	.instui-form-field-group	Kumpulan <fieldset> dengan legenda, susun atur lajur atau sebaris, dan jarak boleh laras.
form-field-messages	.instui-form-field-messages	Bantuan medan dan mesej pengesahan — petunjuk, ralat, kejayaan, dan hanya-pembaca skrin — dengan glif pada ralat dan kejayaan.
heading	.instui-heading	Tipografi tajuk dari -level-h1 ke -level-h6.
img	.instui-img	Sebuah <img> berstail dengan pengubah paparan, potong, dan kesan yang bertindih.
in-place-edit	.instui-in-place-edit	Sebuah [contenteditable] yang dibaca sebagai teks sehingga difokuskan, kemudian memaparkan krom input.
input-group	.instui-input-group	Facade di sekitar input teks dengan slot ikon di hadapan dan di belakang.
link	.instui-link	Hyperlink berstail dengan saiz, variasi songsang untuk latar gelap, dan bentuk sebaris atau tanpa gaya.
list	.instui-list	Senarai dengan jarak item yang dipacu oleh token.
list.item	.instui-list	Item senarai (InstUI List.Item).
mask	.instui-mask	Overlay aliran yang mengisi ibu bapa yang diposisikan dan menjengahkan kandungannya di tengah — contohnya spinner di atas kad. Untuk modal, utamakan <dialog> natif ( ::backdrop adalah masker). Setiap satu pengubah ini juga tersedia secara global (telanjang, atau diikat pada komponen lain) — lihat utiliti global mask.
menu	.instui-menu	Permukaan dropdown yang mengandungi item, kumpulan, dan pemisah.
menu.group	.group	Tajuk kumpulan berlabel (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Entri menu (InstUI Menu.Item); tambah -disabled, -highlighted, atau -active/[aria-checked].
menu.separator	.separator	Garis pemisah antara item (InstUI Menu.Separator).
metric	.instui-metric	Statistik berlabel — nilai besar di atas kapsyen.
modal	.instui-modal	Permukaan dialog (berfungsi pada native <dialog>); bahagian pengepala/badan/kaki.
modal.body	.body	Ruang kandungan (InstUI Modal.Body); <img> tunggal mengisi penuh.
modal.footer	.footer	Bar tindakan (InstUI Modal.Footer).
modal.header	.header	Bar tajuk (InstUI Modal.Header).
number-input	.instui-number-input	Facade input nombor dengan lajur spinner +/-.
pagination	.instui-pagination	Navigasi halaman: muka surat bernombor, anak panah pertama, sebelumnya, seterusnya, dan terakhir, serta elipsis untuk jurang.
pagination.page	.page	Pautan atau butang halaman (InstUI Pagination.Page); halaman semasa membawa [aria-current].
pill	.instui-pill	Label status kompak; tambah glif di hadapan dengan bentuk -icon-<name> dikongsi.
popover	.instui-popover	Permukaan tinggi untuk [popover] natif, diposisikan dengan penentuan sauh CSS.
progress	.instui-progress	Bar kemajuan tertentu dengan meter berwarna, saiz, dan label nilai pilihan.
progress-circle	.instui-progress-circle	Cincin kemajuan bulat yang digerakkan oleh sifat tersuai --value dan --value-max.
radio	.instui-radio	Butang radio natif dan labelnya.
radio-input-group	.instui-radio-input-group	Kumpulan radio satu-pilih <fieldset>, biasa atau sebagai togol bersegmen berhubung.
range-input	.instui-range-input	Slider julat berstail dengan gelembung nilai songsang.
rating	.instui-rating	Penarafan bintang dengan glif terisi dan kosong serta label nombor pilihan.
side-nav-bar	.instui-side-nav-bar	Rel navigasi menegak item ikon-atas-label, dengan mod diminimumkan hanya ikon.
side-nav-bar.item	.item	Entri navigasi (InstUI SideNavBar.Item); -selected menandakan yang aktif.
simple-select	.instui-simple-select	<select> natif berstail dengan caret, menyamai keadaan dan saiz input teks.
spinner	.instui-spinner	Cincin pemuatan animasi; berikan role="status" dan aria-label.
table	.instui-table	Jadual data berstail untuk th dan td serta kapsyen pilihan, dengan tata letak hover, tetap, dan kad bertindan.
table.body	tbody	Kumpulan baris data jadual (InstUI Table.Body).
table.cell	td	Sel data (InstUI Table.Cell).
table.col-header	th	Sel pengepala lajur (InstUI Table.ColHeader); gaya lalai th diatasi oleh table.row-header untuk th[scope="row"].
table.head	thead	Kumpulan baris pengepala jadual (InstUI Table.Head).
table.row	tr	Baris jadual (InstUI Table.Row).
table.row-header	th[scope="row"]	Sel pengepala baris (InstUI Table.RowHeader); bergaya dari token pengepala baris, bukan token pengepala lajur.
tabs	.instui-tabs	Set panel ber-tab: senarai tab, tab boleh pilih, dan panel mereka.
tabs.panel	.panel	Panel kandungan untuk tab (InstUI Tabs.Panel).
tabs.tab	.tab	Butang tab tunggal (InstUI Tabs.Tab, dikonfigurasikan melalui senarai tab Tabs induk); -selected menandakan yang aktif.
tag	.instui-tag	Cip selari untuk kata kunci atau penapis.
text	.instui-text	Tipografi teks badan dengan pengubah saiz, ketebalan, warna, dan gaya.
text-area	.instui-text-area	<textarea> natif yang berstail dan boleh diubah saiz dengan keadaan dan saiz yang sama seperti input teks.
text-input	.instui-text-input	<input> natif yang berstail — termasuk date, time, dan datetime-local, di mana pelayar menyediakan pemilih — dengan keadaan pengesahan dan saiz.
toggle-details	.instui-toggle-details	<details> natif yang berstail sebagai pendedahan dengan chevron berpusing.
toggle-group	.instui-toggle-group	Pendedahan berbingkai dibina di atas <details>: baris ringkasan chevron dan kandungan boleh lipat.
tooltip	.instui-tooltip	Buah sembang tooltip CSS untuk hover dan fokus, boleh diposisikan pada mana-mana sisi.
tray	.instui-tray	Panel terpaut tepi yang meluncur masuk dari mana-mana sisi; [popover] atau <dialog> natif.
tree-browser	.instui-tree-browser	Pokok pendedahan koleksi bertingkat dan item daun, dengan chevron berpusing.
view	.instui-view	Primitif View: kotak neutral dengan pengubah pasangan kunci-nilai untuk latar, sempadan, radius, bayang, paparan, posisi, limpahan, dan kursor. Setiap pengubah ini juga tersedia secara global (terus, atau digabungkan pada mana-mana komponen) — lihat utiliti background/border/shadow/display/position/overflow/cursor.

Utiliti

Nama	Kelas	Ringkasan
color	.--text-danger	Utiliti warna semantik: .--bg-<name>, .--text-<name> (alias sebagai .--color-<name>), dan .--border-<name> untuk palet semantik yang dikurasi. Setiap satu juga mempunyai alias pengubah terlampir-komponen (contohnya -bg-danger pada mana-mana .instui-<component>).
cursor	.--cursor-pointer	cursor sebagai kelas global yang boleh disusun — .--cursor-<value> — boleh digunakan terus atau digabungkan pada mana-mana komponen (.instui-button.--cursor-pointer).
gap	.--gap-md	Utiliti flex/grid gap pada skala jarak, ejaan pendek (--gap-sm) atau panjang (--gap-small). Boleh digunakan terus atau digabungkan pada mana-mana komponen (.instui-view.--gap-sm) — komponen yang sudah menetapkan gap mereka dari token khusus-komponen mungkin diatasi.
icon	.instui-icon	Sistem ikon: saiz .instui-icon ditambah pelukis -icon-<name> yang berkongsi yang menapis glif (dalam currentColor) sebelum sebarang elemen.
layout	.--display-flex	Utiliti paparan dan penjajaran teks — .--display-<value> dan .--text-align-<value> — sebagai kelas global yang boleh disusun, boleh digunakan terus atau digabungkan pada mana-mana komponen.
maskglobal	.--mask-overlay	Salinan dwiganda global pemodifier overlay komponen mask — --mask-overlay, --mask-fullscreen, --mask-blur — boleh digunakan terus atau digabungkan pada mana-mana komponen, tanpa membalut dalam elemen .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y sebagai kelas global yang boleh disusun — .--overflow-x-<value> / .--overflow-y-<value> — boleh digunakan terus atau digabungkan pada mana-mana komponen.
position	.--position-relative	position sebagai kelas global yang boleh disusun — .--position-<value> — boleh digunakan terus atau digabungkan pada mana-mana komponen (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Kelas tunjuk/sembunyi lebar viewport atau kontena merentas skala titik henti ber tema.
screen-reader-content	.instui-screen-reader-content	Menyembunyikan kandungan secara visual sambil mengekalkannya tersedia untuk teknologi bantuan (pola clip standard).
spacing	.--p-md	Utiliti margin dan padding — .--m<side>-<step> / .--margin-<side>-<step> dan .--p<side>-<step> / .--padding-<side>-<step> pada skala jarak (sisi t/b/s/e/x/y atau tiada, dieja pendek atau panjang sepenuhnya — contohnya --mb-sm dan --margin-bottom-small adalah peraturan yang sama; margin juga menerima auto). Boleh digunakan sendiri atau digabungkan pada mana-mana komponen (contohnya class="instui-view --mb-sm").
stacking	.--stack-topmost	Utiliti kedalaman z-index — .--stack-<level> (deepest, below, above, topmost) — boleh digunakan sendiri atau digabungkan pada mana-mana komponen, supaya lapisan disusun secara boleh diramal dan bukannya nombor yang disesuaikan secara manual.
transition	.instui-transition.-transition-fade-entering	Kelas keadaan animasi untuk komponen Transition — .instui-transition dan kelas keadaan (-transition-fade-entering, -transition-scale-exited, dan sebagainya) — boleh digunakan sendiri atau digabungkan pada mana-mana komponen.
truncate	.--truncate	Pemendekan ellipsis dengan penguncian baris dikawal oleh --lines — boleh digunakan sendiri atau digabungkan pada mana-mana komponen (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Satu garisan sempadan untuk penyahpepijatan susun atur: gabungkan kompaun .-with-visual-debug pada mana-mana elemen untuk menandakan kotak dan anak-anak hampirnya, supaya struktur susun atur kelihatan sekilas.

Peraturan

Nama	Kelas	Ringkasan
base	*	Reset global pilihan: box-sizing, permukaan halaman, warna teks asas dan fon, color-scheme, dan tetapan lalai pautan.
prose	:where(body)	Tetapan tipografi lalai untuk HTML mentah — tajuk, perenggan, senarai, pautan, dan kod — digunakan secara automatik di mana sahaja diimport (lalai :where(body)); berikan options.scope untuk mensasarkan akar kandungan yang berbeza jika perlu (contohnya .vp-doc).

Plugins

Nama	Kelas	Ringkasan
logos	.logos	Logo produk Instructure sebagai token imej CSS: --instui-logo-<product>-<layout>-<mode> mengandungi data-URI SVG, jadi logo boleh dicat contohnya melalui background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Kelas utiliti pilihan untuk palet primitif mentah: .instui-bg-/fg-/border-primitive-color-<name> mengecat warna dari token warna primitif, serta utiliti font-family/font-weight untuk token fon primitif. Dikeluarkan dari utiliti semantik supaya ganti nilai di situ kekal semantik sahaja.
visual-debug	.-with-visual-debug	Satu garisan sempadan untuk penyahpepijatan susun atur: gabungkan kompaun .-with-visual-debug pada mana-mana elemen untuk menandakan kotak dan anak-anak hampirnya, supaya struktur susun atur kelihatan sekilas.

layout

Nama	Kelas	Ringkasan
callout	div[class~="instui-callout"]	Amaran maklumat sebaris untuk peringatan atau nota ringkas.
hero	div[class~="instui-hero"]	Bahagian kepala skrin seluruh lebar dengan tajuk, subtajuk, dan imej latar pilihan.
page-layout	div[class~="instui-page-layout"]	Susun atur halaman standard tiga lajur dengan kepala, bar sisi, dan kandungan utama.
rubric-note	div[class~="instui-rubric-note"]	Nota berstruktur dengan kategori rubrik dan petunjuk pemarkahan.
testimonial	div[class~="instui-testimonial"]	Paparan petikan atau testimoni dengan atribusi dan imejan pilihan.
two-column	div[class~="instui-two-column"]	Susun atur dua lajur dengan kawasan kandungan kiri dan kanan.
wrapper	body[class~="instui-display-flex"]	Baris cengkerang aplikasi: navigasi sisi, bekas dengan header, dan panel pilihan.