CSS Referans API

Referans API CSS la kouvri kouch konpozan pantoken ki baze sou klas: konpozan, sèvis itil (utilities), règ global, ak deklarasyon yo bati sou sistèm token an.

Konpozan

Non	Klas	Rezime
agent-shell	.instui-agent-shell	Yon kontenè sifas pou ajan AI.
alert	.instui-alert	Yon mesaj anliy ak yon ba koulè estati ak yon glif estati kache ki soti nan ansanm ikon pataje a.
avatar	.instui-avatar	Yon avatar itilizatè ki montre inisyal oswa yon imaj, sikilè pa defo.
badge	.instui-badge	Yon ti koulè oswa pwen estati pou konte ki plase sou kwen sib la.
banner	.instui-banner	Yon sifas mesaj ki ka fèmen, ak ikon, pou anons nivo paj oswa an-konteks.
billboard	.instui-billboard	Yon gwo blòk eta vid oswa apèl-a-aksyon: yon ikon oswa imaj ewo, yon tit, ak yon mesaj.
breadcrumb	.instui-breadcrumb	Yon tras breadcrumb ak separatè; dènye moso a se paj aktyèl la.
breadcrumb.link	li	Yon moso (InstUI Breadcrumb.Link), yon <li> nan <ol> paran an; dènye a se paj aktyèl la.
button	.instui-button	Yon kontwòl aksyon aksesib, estilize soti nan palèt token la; prensipal pa defo.
byline	.instui-byline	Yon objè medya: yon figi ewo sou kote yon tit ak deskripsyon.
calendar	.instui-calendar	Yon griy mwa estatik ak navigasyon, tèt jou semèn, ak selil jou.
calendar.day	.day	Yon selil jou (InstUI Calendar.Day); -today, -selected, ak -outside-month make eta li.
card	.instui-card	Yon kontenè sifas ki aksepte kontni anvaryab.
checkbox	.instui-checkbox	Yon ti bwat chèk natif natal ak etikèt li, oswa yon switch atravè -variant-toggle.
close-button	.instui-close-button	Yon bouton ikon transparan ki trase pwòp glif × li, nan twa gwosè plis yon varyant sou-koulè.
context-view	.instui-context-view	Yon callout leve ak yon caret, pozisyonab sou nenpòt bò; fonksyone kòm yon [popover] natif natal.
drawer-layout	.instui-drawer-layout	Yon layout separe ak yon tiwa bò ki ka fèmen epi yon panèl kontni prensipal ki ka scroll.
drawer-layout.content	.content	Panèl kontni prensipal la ki ranpli espas ki rete bò tiwa a.
drawer-layout.tray	.tray	Panno bò a bò kote kontni prensipal la, ak opsyon pou overlay ak modifikatè sifas tankou tiwa.
file-drop	.instui-file-drop	Yon zòn depo dosye ak eta hover, aksepte, ak rejte.
form-field	.instui-form-field	Yon vlope chan fòm: yon etikèt, kontwòl li yo, ak layout anliy, obligatwa, oswa readonly.
form-field-group	.instui-form-field-group	Yon gwoup <fieldset> ak yon lejann, yon layout kolòn oswa anliy, ak espas konfigirab.
form-field-messages	.instui-form-field-messages	Èd chan ak mesaj validasyon — konsèy, erè, siksè, ak sèlman pou lektè ekran — ak yon glif sou erè ak siksè.
heading	.instui-heading	Tipografi tit soti nan -level-h1 rive -level-h6.
img	.instui-img	Yon <img> estilize ak modifikatè ekspozisyon, koupe, ak efè ki pile.
in-place-edit	.instui-in-place-edit	Yon [contenteditable] ki li kòm tèks jiskaske li pran fokus, epi li montre chrome antre.
input-group	.instui-input-group	Yon fasad alantou yon antre tèks ak plas ikon devan ak dèyè.
link	.instui-link	Yon lyen estilize ak gwosè, yon varyant envès pou background fè nwa, ak fòm anliy oswa san stil.
list	.instui-list	Yon lis ak espas atik kondwi pa token.
list.item	.instui-list	Yon atik lis (InstUI List.Item).
mask	.instui-mask	Yon overlay nan koule ki ranpli paran pozisyone li epi santre kontni li — egzanp: yon spinner sou yon kat. Pou yon modal, prefere yon <dialog> natif natal (mask li se ::backdrop). Chak youn nan modifikatè sa yo disponib tou globalman (tèt, oswa chèn sou nenpòt lòt konpozan) — wè utilite global mask.
menu	.instui-menu	Yon sifas dropdown ki gen atik, gwoup, ak separatè.
menu.group	.group	Yon tit gwoup ki gen etikèt (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Yon antre meni (InstUI Menu.Item); ajoute -disabled, -highlighted, oswa -active/[aria-checked].
menu.separator	.separator	Yon règ divizè ant atik (InstUI Menu.Separator).
metric	.instui-metric	Yon estatistik ki gen etikèt — yon valè gwo sou yon caption.
modal	.instui-modal	Yon sifas dyalòg (fonksyone sou yon <dialog> natif natal); pati header/body/footer.
modal.body	.body	Rejyon kontni an (InstUI Modal.Body); yon sèl <img> ale full-bleed.
modal.footer	.footer	Ranje aksyon yo (InstUI Modal.Footer).
modal.header	.header	Ranje tit la (InstUI Modal.Header).
number-input	.instui-number-input	Yon fasad antre nimewo ak yon kolòn spinner +/-.
pagination	.instui-pagination	Navigasyon paj: paj nimewote, premye, anvan, pwochen, ak dènye flèch, ak yon elips pou espas vid.
pagination.page	.page	Yon lyen paj oswa bouton (InstUI Pagination.Page); paj aktyèl la pote [aria-current].
pill	.instui-pill	Yon etikèt estati kontra; ajoute yon glif devan ak fòm pataje -icon-<name>.
popover	.instui-popover	Yon sifas leve pou yon [popover] natif natal, pozisyone ak pozisyon anchè CSS.
progress	.instui-progress	Yon ba pwogrè detèmine ak yon mezi koulè, gwosè, ak yon etikèt valè opsyonèl.
progress-circle	.instui-progress-circle	Yon bag pwogrè sikilè ki kondwi pa pwopriyete koutim --value ak --value-max.
radio	.instui-radio	Yon bouton radyo natif natal ak etikèt li.
radio-input-group	.instui-radio-input-group	Yon <fieldset> radio sèl-chwazi, senp oswa kòm yon toggle segmante konekte.
range-input	.instui-range-input	Yon slider ranje estilize ak yon boul valè inverse.
rating	.instui-rating	Yon evalyasyon etwal ak glif plen ak vid e yon etikèt nimewik opsyonèl.
side-nav-bar	.instui-side-nav-bar	Yon rail navigasyon vètikal ki gen atik ikon sou etikèt, ak yon mòd minimize ki montre sèlman ikon yo.
side-nav-bar.item	.item	Yon antre navigasyon (InstUI SideNavBar.Item); -selected make youn ki aktif la.
simple-select	.instui-simple-select	Yon <select> natif estilize ak yon karekèt, ki matche ak eta ak gwosè antre tèks yo.
spinner	.instui-spinner	Yon bag chajman anime; bay li role="status" ak yon aria-label.
table	.instui-table	Yon tablo done estilize pou th ak td plis yon caption opsyonèl, ak modèl hover, fiks, ak kat-stake.
table.body	tbody	Gwoup ranje done tablo a (InstUI Table.Body).
table.cell	td	Yon selil done (InstUI Table.Cell).
table.col-header	th	Yon selil tèt kolòn (InstUI Table.ColHeader); style defo th la, ranplase pa table.row-header pou th[scope="row"].
table.head	thead	Gwoup ranje tèt tablo a (InstUI Table.Head).
table.row	tr	Yon ranje tablo (InstUI Table.Row).
table.row-header	th[scope="row"]	Yon selil tèt ranje (InstUI Table.RowHeader); estilize soti nan tokens tèt ranje yo, pa sa ki pou tèt kolòn yo.
tabs	.instui-tabs	Yon seri panèl ak tab: yon lis tab, tab seleksyone, ak panèl yo.
tabs.panel	.panel	Panèl kontni pou yon tab (InstUI Tabs.Panel).
tabs.tab	.tab	Yon sèl bouton tab (InstUI Tabs.Tab, configured via parent Tabs's tab list); -selected make youn ki aktif la.
tag	.instui-tag	Yon chip an liy pou yon mo kle oswa filtè.
text	.instui-text	Tipografi tèks kò ak modifye gwosè, pwa, koulè, ak estil.
text-area	.instui-text-area	Yon <textarea> natif estilize, rezizable, ak menm eta ak gwosè kòm antre tèks la.
text-input	.instui-text-input	Yon <input> natif estilize — enkli date, time, ak datetime-local, kote navigatè a bay picker la — ak eta validasyon ak gwosè.
toggle-details	.instui-toggle-details	Yon <details> natif estilize disclosure ak yon chevron ki vire.
toggle-group	.instui-toggle-group	Yon disclosure ak bor bati sou <details>: yon ranje rezime chevron ak kontni kolapsab.
tooltip	.instui-tooltip	Yon bul tooltip CSS pou hover ak focus, pozisyone sou nenpòt bò.
tray	.instui-tray	Yon panèl pinen sou kwen ki glise depi nenpòt bò; yon [popover] natif oswa <dialog>.
tree-browser	.instui-tree-browser	Yon pyebwa disclosure ak koleksyon nidifye ak atik fèy, ak chevron ki vire.
view	.instui-view	Primiti View la: yon bwat netral ak modifye kle-valè pou background, bor, radius, lonbraj, ekspozisyon, pozisyon, debòde, ak kousè. Chak youn nan modifye sa yo disponib tou globalman (bare, oswa chèn sou nenpòt lòt konponent) — wè utiliti background/border/shadow/display/position/overflow/cursor.

Itilite

Non	Klas	Rezime
color	.--text-danger	Utiliti koulè semantik: .--bg-<name>, .--text-<name> (aliase kòm .--color-<name>), ak .--border-<name> pou palèt semantik kouvri a. Chak youn nan sa yo gen tou yon alias modifye atache a konpozan (pa egzanp -bg-danger sou nenpòt .instui-<component>).
cursor	.--cursor-pointer	cursor kòm yon klas global konpoze — .--cursor-<value> — ki ka itilize bare oswa chèn sou nenpòt konpozan (.instui-button.--cursor-pointer).
gap	.--gap-md	Utiliti flex/grid gap sou echèl espas la, òt (--gap-sm) oswa long (--gap-small) òtograf. Kapab itilize bare oswa chèn sou nenpòt konpozan (.instui-view.--gap-sm) — konpozan ki deja mete pwòp gap yo pa yon token espesifik ka gen li ranplase.
icon	.instui-icon	Sistèm ikon an: gwosè .instui-icon plis pent ki pataje -icon-<name> ki kouvri yon glif (nan currentColor) anvan nenpòt eleman.
layout	.--display-flex	Utiliti ekspozisyon ak aliman tèks — .--display-<value> ak .--text-align-<value> — kòm klas global konpoze, ki ka itilize bare oswa chèn sou nenpòt konpozan.
maskglobal	.--mask-overlay	Yon kopi dual global nan modifye overlay konpozan mask la — --mask-overlay, --mask-fullscreen, --mask-blur — kap itilize bare oswa chèn sou nenpòt konpozan, san anvlòp nan yon eleman .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y kòm klas global konpoze — .--overflow-x-<value> / .--overflow-y-<value> — kap itilize bare oswa chèn sou nenpòt konpozan.
position	.--position-relative	position kòm yon klas global konpoze — .--position-<value> — kap itilize bare oswa chèn sou nenpòt konpozan (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Klas montre/kache sou lajè Viewport oswa konteynè atravè yon echèl breakpoint tèm.
screen-reader-content	.instui-screen-reader-content	Kache vizyèlman kontni pandan w kenbe li disponib pou teknoloji asistans (modèl clip estanda).
spacing	.--p-md	Itilite margin ak padding — .--m<side>-<step> / .--margin-<side>-<step> ak .--p<side>-<step> / .--padding-<side>-<step> sou echèl espas (bò t/b/s/e/x/y oswa pa gen youn, ekri kout oswa long — pa egzanp --mb-sm ak --margin-bottom-small se menm règ la; margin pran tou auto). Ka itilize poukont oswa chenn sou nenpòt konpozan (pa egzanp class="instui-view --mb-sm").
stacking	.--stack-topmost	Itilite pwofondè z-index — .--stack-<level> (deepest, below, above, topmost) — ka itilize poukont oswa chenn sou nenpòt konpozan, konsa kouch yo empile previzib olye de lè w ap sèvi ak nimewo reglaj manyèl.
transition	.instui-transition.-transition-fade-entering	Klas eta animasyon pou konpozan Transition — .instui-transition ak klas eta (-transition-fade-entering, -transition-scale-exited, elatriye) — ka itilize poukont oswa chenn sou nenpòt konpozan.
truncate	.--truncate	Troncature ak elips ak konpresyon liy kontwole pa --lines — ka itilize poukont oswa chenn sou nenpòt konpozan (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Yon kontou pou débogaj layout: konpoze .-with-visual-debug sou nenpòt eleman pou trase bwat la ak timoun imedya li yo, konsa estrikti layout la vizib an yon kout je.

Règleman

Non	Klas	Rezime
base	*	Reset global opt-in: box-sizing, sifas paj la, koulè tèks baz ak polis, color-scheme, ak defo lyen yo.
prose	:where(body)	Default tipografik pou HTML brit — tit, paragraf, lis, lyen, ak kòd — aplike otomatikman kote li enpòte (default :where(body)); pase options.scope pou vize yon rasin kontni diferan (egzanp .vp-doc).

Plugins

Non	Klas	Rezime
logos	.logos	Logo pwodwi Instructure kòm token imaj CSS: --instui-logo-<product>-<layout>-<mode> kenbe yon SVG data-URI, konsa yon logo ka pentire pa egzanp background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Klas sèvis opt-in pou palèt primitif brit la: .instui-bg-/fg-/border-primitive-color-<name> pentire yon koulè soti nan token koulè primitif yo, plis itilite font-family/font-weight pou token polis primitif yo. Kenbe yo izole nan itilite semantik yo pou override yo rete sèlman semantik.
visual-debug	.-with-visual-debug	Yon kontou pou débogaj layout: konpoze .-with-visual-debug sou nenpòt eleman pou trase bwat la ak timoun imedya li yo, konsa estrikti layout la vizib an yon kout je.

layout

Non	Klas	Rezime
callout	div[class~="instui-callout"]	Alèt enfòmasyon anliy pou yon rapèl kout oswa nòt.
hero	div[class~="instui-hero"]	Seksyon header lajè tout ekran ak tit, sou-tit, ak imaj background opsyonèl.
page-layout	div[class~="instui-page-layout"]	Layout paj estanda twa kolòn ak header, sidebar, ak kontni prensipal.
rubric-note	div[class~="instui-rubric-note"]	Nòt estriktire ak kategori rubrik ak endikatè nòtaj.
testimonial	div[class~="instui-testimonial"]	Afichaj sitasyon oswa temwayaj ak atribisyon ak imaj opsyonèl.
two-column	div[class~="instui-two-column"]	Layout de kolòn ak rejyon kontni gòch ak dwat.
wrapper	body[class~="instui-display-flex"]	Ranje app-shell: nav bò, kontenè ak header, ak yon panèl opsyonèl.