CSS API tilvísun

CSS-API vísirinn fjallar um pantoken flokksbundna íhlutalagslagið: íhluti, hjálparstærðir, alþjóðareglur og yfirlýsingar byggðar á táknkerfinu.

Íhlutir

Nafn	Klasi	Samantekt
agent-shell	.instui-agent-shell	Yfirborðsílát fyrir AI-umboðsmenn.
alert	.instui-alert	Innsettar skilaboð með stöðulitirönd og falið stöðutákn úr sameiginlegu táknasafni.
avatar	.instui-avatar	Notendamynd (avatar) sem sýnir upphafsstafi eða mynd, hringlaga sjálfgefið.
badge	.instui-badge	Lítil teljari- eða stöðupunktur settur yfir horn marksins.
banner	.instui-banner	Lásanlegur, táknsettur skilaboðayfirborð fyrir síðu- eða samhengi-tilkynningar.
billboard	.instui-billboard	Stórt tómt ástand eða kallar-til-aðgerðar blokk: aðalskífa/tákn eða mynd, fyrirsögn og skilaboð.
breadcrumb	.instui-breadcrumb	Brautarspor (breadcrumb) með aðskiljara; síðasta molinn er núverandi síða.
breadcrumb.link	li	Moli (InstUI Breadcrumb.Link), <li> í foreldris <ol>; sá síðasti er núverandi síða.
button	.instui-button	Aðgengilegur aðgerðarstjórnliður, stíllaður eftir táknplötu; aðalstilling sjálfgefið.
byline	.instui-byline	Fjölmiðlahlutur: aðalséna við hlið titils og lýsingar.
calendar	.instui-calendar	Stöðugt mánaðarnet með leiðsögn, vikudagsskrám og dagfrumum.
calendar.day	.day	Dagfruma (InstUI Calendar.Day); -today, -selected og -outside-month merkja ástand hennar.
card	.instui-card	Yfirborðsílát sem samþykkir hvaða efni sem er.
checkbox	.instui-checkbox	Innbyggður gátreitur og merki hans, eða rofi með -variant-toggle.
close-button	.instui-close-button	Gegnsær táknhnappur sem teiknar sitt eigið × tákn, í þremur stærðum og á litabreytingu.
context-view	.instui-context-view	Útjöfnuð tilkynning með spori (caret), hægt að staðsetja á hvaða hlið sem er; virkar sem innfæddur [popover].
drawer-layout	.instui-drawer-layout	Skipt útlit með samanbrjótanlegri hliðarrennu og aðal flettanlegri efnisglugga.
drawer-layout.content	.content	Aðal efnisglugginn sem fyllir rýmið við hlið rennunnar.
drawer-layout.tray	.tray	Hliðarpanel við hlið aðalefnis, með valfrjálsri yfirlagningu og rennuyfirborðs-breytingum.
file-drop	.instui-file-drop	Skráadráttarsvæði með sveim-, samþykkt- og hafnað-ástandi.
form-field	.instui-form-field	Formsviðumbúðir: merkimiði, stjórntæki og rað- eða aðeins-lesa uppsetningar.
form-field-group	.instui-form-field-group	<fieldset> hópur með legendu, dálka- eða innsetningaruppsetningu og stillanlegri millibili.
form-field-messages	.instui-form-field-messages	Aðstoð og staðfestingarskilaboð reits — vísbending, villa, árangur og aðeins-skjálesari — með tákni við villu og árangur.
heading	.instui-heading	Yfirskriftarteikn frá -level-h1 til -level-h6.
img	.instui-img	Stílaður <img> með birtingu, skerðingu og gagnvirkni sem staflast.
in-place-edit	.instui-in-place-edit	[contenteditable] sem les sem texta þar til hann fær fókus, þá sýnir hann inntaksramma.
input-group	.instui-input-group	Skjöldur um textainntak með plássi fyrir leiðandi og síðari tákn.
link	.instui-link	Stílaður hlekkur með stærðum, andstæðri útgáfu fyrir dökk yfirborð og innfelldri eða ósstílaðri mynd.
list	.instui-list	Listi með táknstýrðu millibili milli atriða.
list.item	.instui-list	Listaratriði (InstUI List.Item).
mask	.instui-mask	Innrennsli yfirborð sem fyllir staðsett foreldri og miðstillir efni — t.d. snúningsmerki yfir spilara. Fyrir módal, forðastu ekki innfæddan <dialog> (maska hans er ::backdrop). Þessir breytur eru einnig fáanlegir globalt (lausir eða tengdir við aðra íhluti) — sjá mask global hjálparstærðina.
menu	.instui-menu	Fellivalmyndaryfirborð með atriðum, hópum og aðskiljurum.
menu.group	.group	Merkta hópfyrirsögn (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Valmyndaratriði (InstUI Menu.Item); bæta við -disabled, -highlighted eða -active/[aria-checked].
menu.separator	.separator	Skiptingarlína milli atriða (InstUI Menu.Separator).
metric	.instui-metric	Merkta tölfræði — stórt gildi yfir undirtitli.
modal	.instui-modal	Samræðuyfirborð (virkar á innfæddan <dialog>); haus/mál/body/fótahlutar.
modal.body	.body	Innihalds svæði (InstUI Modal.Body); einbúinn <img> fer full-bleed.
modal.footer	.footer	Aðgerðarröðin (InstUI Modal.Footer).
modal.header	.header	Titillaröðin (InstUI Modal.Header).
number-input	.instui-number-input	Tölustillingar-umbúð með +/- snúning dálki.
pagination	.instui-pagination	Síðunavigering: tölusíður, fyrsta, fyrra, næsta og síðasta örvar, og þrestur fyrir bil.
pagination.page	.page	Síðuhlekkur eða hnappur (InstUI Pagination.Page); núverandi síða ber [aria-current].
pill	.instui-pill	Þétt stöðumerki; bæta við leiðandi tákni með sameiginlegu -icon-<name> formi.
popover	.instui-popover	Breytt yfirborð fyrir innfæddan [popover], staðsett með CSS anchor-stöðu.
progress	.instui-progress	Ákveðin framfarastika með litríku mæli, stærðum og valfrjálsum gildamerkingu.
progress-circle	.instui-progress-circle	Hringlaga framfarahringur stýrt af --value og --value-max sérstillingum.
radio	.instui-radio	Innbyggður hringhnappur (radio) og merki hans.
radio-input-group	.instui-radio-input-group	Einingarval radio <fieldset>, einfalt eða sem tengdur segmented rofi.
range-input	.instui-range-input	Stílaður rennistika með öfugu gildisbolla.
rating	.instui-rating	Stjörnu-einkunn með fylltum og tómum myndlíknum og valfrjálsu talnamerki.
side-nav-bar	.instui-side-nav-bar	Lóðrétt siglingarbraut af táknum-yfir-merkingu atriðum, með minnkuðu tákn-einungis ham.
side-nav-bar.item	.item	Siglingainntak (InstUI SideNavBar.Item); -selected merkir virka atriðið.
simple-select	.instui-simple-select	Stílfærður innfæddur <select> með bendli, sem passar við textainntak-stöður og stærðir.
spinner	.instui-spinner	Hreyfimyndað hleðsluhringur; gefið role="status" og aria-label.
table	.instui-table	Stílfærð gagnatöflu fyrir th og td auk valfrjálsrar fyrirsagnar, með svífa-, föstu- og staflað-kort útlögum.
table.body	tbody	Gagnaröðahópur töflunnar (InstUI Table.Body).
table.cell	td	Gagnafruma (InstUI Table.Cell).
table.col-header	th	Dálkhöfuðfruma (InstUI Table.ColHeader); sjálfgefna th stíllinn er ofritaður af table.row-header fyrir th[scope="row"].
table.head	thead	Fyrirsagnaröðahópur töflunnar (InstUI Table.Head).
table.row	tr	Töfluröð (InstUI Table.Row).
table.row-header	th[scope="row"]	Röðahöfuðfruma (InstUI Table.RowHeader); stílfærð út frá röðahöfuð-táknum, ekki dálkahöfuðunum.
tabs	.instui-tabs	Flipasett: flipalisti, valanlegir flipar og þeirra panelar.
tabs.panel	.panel	Innihaldspanel fyrir flipa (InstUI Tabs.Panel).
tabs.tab	.tab	Einn flipahnappur (InstUI Tabs.Tab, stilltur af flipalista foreldrisins Tabs); -selected merkir virka atriðið.
tag	.instui-tag	Innsett flís fyrir lykilorð eða síu.
text	.instui-text	Líkamstexta leturgerð með stærð, þyngd, lit og stíl-breytingum.
text-area	.instui-text-area	Stílfærður, stærðarstillanlegur innfæddur <textarea> með sömu stöður og stærðir og textainntakið.
text-input	.instui-text-input	Stílfærður innfæddur <input> — þar með date, time og datetime-local, þar sem vafri býður upp á valkostinn — með staðfestingastöðum og stærðum.
toggle-details	.instui-toggle-details	Stílfærð innfædd <details> birting með snúningsör.
toggle-group	.instui-toggle-group	Brún-umgjörð afhjúpun byggð á <details>: samantektarröð með ör og fellanlegu efni.
tooltip	.instui-tooltip	CSS svífa- og fókus ráðleggjabóla, hægt að staðsetja á hvaða hlið sem er.
tray	.instui-tray	Brún-tengdur panel sem rennur inn frá hvaða hlið sem er; innfæddur [popover] eða <dialog>.
tree-browser	.instui-tree-browser	Afhjúpunartré af innbyrðis söfnum og laufatriðum, með snúningsörum.
view	.instui-view	View-frumtækið: hlutlaus kass með lykil-gildi breytum fyrir bakgrunn, ramma, horn, skugga, birtingu, staðsetningu, umfram og bendil. Hver ein af þessum breytum er einnig aðgengileg almennt (ber, eða lán á hvaða annan íhlut) — sjá background/border/shadow/display/position/overflow/cursor hjálparverkfæri.

Hjálparverkfæri

Nafn	Klasi	Samantekt
color	.--text-danger	Merkingar-litur hjálparverkfæri: .--bg-<name>, .--text-<name> (aliasað sem .--color-<name>), og .--border-<name> fyrir valda merkingarlitapallettu. Hver og einn þeirra hefur einnig íhluta-tengd alias-breytingu (til dæmis -bg-danger á hvaða .instui-<component> sem er).
cursor	.--cursor-pointer	cursor sem samsetjanleg, alþjóðleg klasi — .--cursor-<value> — notanleg ber eða lán á hvaða íhluta sem er (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap hjálparverkfæri á spacing-kvarðanum, stutt (--gap-sm) eða löng (--gap-small) stafsetning. Notanleg ber eða lán á hvaða íhluta sem er (.instui-view.--gap-sm) — íhlutir sem þegar stilla sitt eigið gap frá sértækum íhluta-tákni geta fengið það ofritað.
icon	.instui-icon	Táknakerfið: .instui-icon stærðir auk sameiginlega -icon-<name> málarans sem maskar glyph (í currentColor) fyrir hvaða frumefni sem er.
layout	.--display-flex	Sýningar- og textamiða hjálparverkfæri — .--display-<value> og .--text-align-<value> — sem samsetjanlegar, alþjóðlegar klasa, notanlegar ber eða lán á hvaða íhluta sem er.
maskglobal	.--mask-overlay	Alþjóðleg, tvöföld afrit af yfirlags-breytingum mask íhlutans — --mask-overlay, --mask-fullscreen, --mask-blur — notanleg ber eða lán á hvaða íhluta sem er, án umbúða í .instui-mask frumefni.
overflow	.--overflow-x-hidden	overflow-x/overflow-y sem samsetjanlegar, alþjóðlegar klasa — .--overflow-x-<value> / .--overflow-y-<value> — notanlegar ber eða lán á hvaða íhluta sem er.
position	.--position-relative	position sem samsetjanlegur, alþjóðlegur klasi — .--position-<value> — notanlegur ber eða lán á hvaða íhluta sem er (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Sýna/fela klasa eftir sjónsviðs- eða ílát-breidd yfir þemamikinn brotpunktakvarða.
screen-reader-content	.instui-screen-reader-content	Sjónrænt felur efni en heldur því aðgengilegu fyrir hjálpartækni (staðlaða klippa-mynstrið).
spacing	.--p-md	Útbreiðslu- og fyllingar-utilities — .--m<side>-<step> / .--margin-<side>-<step> og .--p<side>-<step> / .--padding-<side>-<step> á bilaskalanum (hliðar t/b/s/e/x/y eða engar, stytt eða fullmótað — til dæmis eru --mb-sm og --margin-bottom-small sami reglan; margin tekur einnig auto). Hægt að nota beint eða festa við hvaða íhlut sem er (til dæmis class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index dýptar-utilities — .--stack-<level> (deepest, below, above, topmost) — hægt að nota beint eða festa við hvaða íhlut sem er, svo lög raðast fyrirfram fyrir öryggi frekar en að nota handstillt númer.
transition	.instui-transition.-transition-fade-entering	Hreyfistöðuflokkar fyrir Transition íhlutinn — .instui-transition og stöðuflokkar (-transition-fade-entering, -transition-scale-exited, o.s.frv.) — hægt að nota beint eða festa við hvaða íhlut sem er.
truncate	.--truncate	Stytting með broti (ellipsis) með línulæsingu sem stýrist af --lines — hægt að nota beint eða festa við hvaða íhlut sem er (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Útlínugreining fyrir uppsetningu: settu saman .-with-visual-debug á hvaða stak sem er til að draga upp kassann og bein börn hans, svo bygging uppsetningar sjáist með einum augnsmiti.

Reglur

Nafn	Klasi	Samantekt
base	*	Valfrjáls alþjóðleg endurstilling: box-sizing, síðuáferð, grunnlitur texta og letur, color-scheme og sjálfgefnar stillingar tengla.
prose	:where(body)	Letur- og gerðarvenjur fyrir hrátt HTML — fyrirsagnir, málsgreinar, listar, tenglar og kóði — beitt sjálfkrafa hvar sem það er flutt inn (sjálfgefið :where(body)); gefðu options.scope til að miða á annan efnisrót (t.d. .vp-doc).

Plugins

Nafn	Klasi	Samantekt
logos	.logos	Instructure vörumerki sem CSS myndefna-token: --instui-logo-<product>-<layout>-<mode> geymir gagnamyndasnið (data-URI) SVG, svo lógó má mála t.d. með background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Valfrjálsir utility-flokkar fyrir hráa frumlitapallettuna: .instui-bg-/fg-/border-primitive-color-<name> mála lit úr frumlitatokenunum, auk font-family/font-weight utilities fyrir frumletur-token. Þeir eru ekki í merkingar-utilities svo yfirlýsingar þar haldist eingöngu merkingarbundnar.
visual-debug	.-with-visual-debug	Útlínugreining fyrir uppsetningu: settu saman .-with-visual-debug á hvaða stak sem er til að draga upp kassann og bein börn hans, svo bygging uppsetningar sjáist með einum augnsmiti.

layout

Nafn	Klasi	Samantekt
callout	div[class~="instui-callout"]	Innsláttarupplýsingaviðvörun í línu fyrir stutta áminningu eða athugasemd.
hero	div[class~="instui-hero"]	Fullbreidd hausdeild með titli, undirtitli og valfrjálsri bakgrunnsmynd.
page-layout	div[class~="instui-page-layout"]	Staðlað þriggja dálka síðuskipulag með haus, hliðarslá og aðalefni.
rubric-note	div[class~="instui-rubric-note"]	Strúktúrerað glósuuppsetning með matsflokkunum og stigvísum vísbendingum.
testimonial	div[class~="instui-testimonial"]	Birting tilvitnunar eða vitnisburðar með heimild og valfrjálsri mynd.
two-column	div[class~="instui-two-column"]	Tvö dálka skipulag með vinstri og hægri efnisreitum.
wrapper	body[class~="instui-display-flex"]	Forritsskurn raðir: hliðarnavigering, ílát með haus og valfrjáls gluggi.