CSS Cyfeirnod API

Mae cyfeirlyfr API CSS yn cwmpasu haen gydraniad cydran-yn ôl pantoken: cydrannau, cyfleusterau, rheolau byd-eang, a datganiadau wedi’u hadeiladu ar y system token.

Cydrannau

Enw	Dosbarth	Crynodeb
agent-shell	.instui-agent-shell	Cynhwysydd arwyneb ar gyfer asiantaethau AI.
alert	.instui-alert	Neges mewnlin gyda bar lliw statws a glyph statws wedi’i dapio o’r set eicon rhannol.
avatar	.instui-avatar	Avatar defnyddiwr sy’n dangos cychwynnod neu ddelwedd, cylchog yn ddiofyn.
badge	.instui-badge	Dot cyfri neu statws bach wedi’i leoli dros gornel targed.
banner	.instui-banner	Arwyneb negeseuon y gellir eu diddymu, gyda eicon ar gyfer cyhoeddiadau tudalen neu mewn cyd-destun.
billboard	.instui-billboard	Bloc gwag neu alwad-i-weithredu mawr: eicon neu ddelwedd ar gyfer y prif neges, pennawd, a neges.
breadcrumb	.instui-breadcrumb	Llwybr llwybrau crwst gyda gwahanyddion; y crwst olaf yw’r dudalen bresennol.
breadcrumb.link	li	Crwst (InstUI Breadcrumb.Link), <li> yn <ol> y rhiant; y llall olaf yw’r dudalen bresennol.
button	.instui-button	Rheoli gweithredu hygyrch, wedi’i arddullio o’r palet tokenau; prif un yn ddiofyn.
byline	.instui-byline	Objecydd cyfryngau: ffigur hero wrth ymyl teitl a disgrifiad.
calendar	.instui-calendar	Grid mis statig gyda llywio, pennawdau dyddiau’r wythnos, a celloedd dydd.
calendar.day	.day	Cell dydd (InstUI Calendar.Day); mae -today, -selected, a -outside-month yn nodi ei statws.
card	.instui-card	Cynhwysydd arwyneb sy’n derbyn cynnwys goddefol.
checkbox	.instui-checkbox	Blwch ticio nativ a’i label, neu switsh drwy -variant-toggle.
close-button	.instui-close-button	Botwm eicon tryloyw sy’n tynnu ei eicon × ei hun, mewn tri maint ac amrywiad ar liw.
context-view	.instui-context-view	Galwad uchel gyda ghefnlen, y gellir ei lleoli ar unrhyw ochr; yn gweithio fel [popover] nativ.
drawer-layout	.instui-drawer-layout	Trefniant rhannu gyda thryc side y gellir ei chywasgu a phane prif gynnwys llithrog.
drawer-layout.content	.content	Y panel cynnwys cyntaf sy’n llenwi’r gofod sydd ar ôl wrth ymyl y tryc.
drawer-layout.tray	.tray	Y panel ochr wrth ymyl y cynnwys mawr, gyda gorchudd dewisol a modiwleiddio arwyneb tebyg i drwc.
file-drop	.instui-file-drop	Man gostwng ffeil gyda halogi, derbyn, a chyflyrau gwrthod.
form-field	.instui-form-field	Gwrthwyneb maes ffurflen: label, ei reolaethau, a gosodiadau mewnlin, gorfodol, neu ddarllen-yn-unig.
form-field-group	.instui-form-field-group	Grŵp <fieldset> gyda legend, cynllun colofn neu mewnlin, a lleoliad gwrthrychadwy.
form-field-messages	.instui-form-field-messages	Cymorth maes a negeseuon dilysu — awgrym, gwall, llwyddiant, a dim ond i ddarllenwyr sgrin — gyda glyph ar wall a llwyddiant.
heading	.instui-heading	Teipograffi pennawd o -level-h1 i -level-h6.
img	.instui-img	<img> wedi’i arddullio gyda modiwleiddwyr arddangos, torri, ac effeithio sy’n stacio.
in-place-edit	.instui-in-place-edit	[contenteditable] sy’n darllen fel testun tan ei ffocysu, yna’n dangos elfen mewnbwn.
input-group	.instui-input-group	Fasâd o amgylch mewnbwn testun gyda slotiau eicon ar y blaen a’r gefn.
link	.instui-link	Cysylltydd arddulliedig gyda maintiau, amrywiad gwrthdroad ar gyfer cefndiroedd tywyll, a ffurf mewnlin neu heb arddull.
list	.instui-list	Rhestr gyda lleoliadau eitemau a reolir gan tokenau.
list.item	.instui-list	Eitem rhestr (InstUI List.Item).
mask	.instui-mask	Haen uchder sy’n gorchuddio ei rhiant wedi’i safle ac yn canolbwyntio ei gynnwys — e.e. sbinwr dros gard. Ar gyfer modal, ffafrir <dialog> nativ (mae ei ::backdrop yn y mwg). Mae pob un o’r modiwleiddwyr hyn hefyd ar gael yn fyd-eang (yn wag, neu wedi’u cadw ar unrhyw gydrannau eraill) — gweler y cyfleustod gwydn mask.
menu	.instui-menu	Arwyneb dropdown o eitemau, grwpiau, a gwahanyddion.
menu.group	.group	Pennawd grŵp wedi’i labelu (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Mewnbwn dewislen (InstUI Menu.Item); ychwanegu -disabled, -highlighted, neu -active/[aria-checked].
menu.separator	.separator	Rheol rhaniad rhwng eitemau (InstUI Menu.Separator).
metric	.instui-metric	Ystadegyn wedi’i labelu — gwerth mawr dros danlinell.
modal	.instui-modal	Arwyneb deialog (yn gweithio ar <dialog> nativ); rhannau pennawd/corff/coes.
modal.body	.body	Rhan cynnwys (InstUI Modal.Body); mae <img> unig yn mynd yn lawn-llifo.
modal.footer	.footer	Rhes gweithredoedd (InstUI Modal.Footer).
modal.header	.header	Rhes teitl (InstUI Modal.Header).
number-input	.instui-number-input	Fasâd mewnbwn rhif gyda cholofn spinner +/-.
pagination	.instui-pagination	Llywio tudalen: tudalennau wedi’u rhifo, saethau cyntaf, blaenorol, nesaf, a’r olaf, ac elips ar gyfer bylchau.
pagination.page	.page	Cyswllt tudalen neu fotwm (InstUI Pagination.Page); mae’r dudalen bresennol yn cario [aria-current].
pill	.instui-pill	Label statws cryno; ychwanegwch glyph ar y blaen gyda ffurf gyffredin -icon-<name>.
popover	.instui-popover	Arwyneb wedi’i godi ar gyfer [popover] nativ, wedi’i lleoli gyda phennu ancr CSS.
progress	.instui-progress	Bar cynnydd penodedig gyda mesur lliwiedig, meintiau, a label gwerth dewisol.
progress-circle	.instui-progress-circle	Rîng cynnydd cylchol a yrrir gan eiddo arferol --value a --value-max.
radio	.instui-radio	Botwm radio nativ a’i label.
radio-input-group	.instui-radio-input-group	Grŵp radio dewis sengl <fieldset>, syml neu fel toggle segment cysylltiedig.
range-input	.instui-range-input	Sleidr ystod wedi’i arddullio gyda bwlch gwerth gwrthdro.
rating	.instui-rating	Raddio sêr gyda glyphau llenwi a gwag a label rhifyddol dewisol.
side-nav-bar	.instui-side-nav-bar	Bar llywio fertigol o eitemau gyda chicon uwchben y label, gyda modd wedi'i leihau sy'n dangos dim ond eiconau.
side-nav-bar.item	.item	Mynediad llywio (InstUI SideNavBar.Item); mae -selected yn nodi'r un sy'n weithredol.
simple-select	.instui-simple-select	A <select> brodorol wedi'i arddullio gyda caret, yn cyfateb i gyflwr a meintiau mewnbwn testun.
spinner	.instui-spinner	Rîng llwytho animeiddiedig; rhowch iddo role="status" a aria-label.
table	.instui-table	Tabl data wedi'i arddullio ar gyfer th a td gyda chapsiwn dewisol, gyda gosodiadau hofran, sefydlog, a chardiau wedi'u haenu ar ei gilydd.
table.body	tbody	Grŵp rhes data'r tabl (InstUI Table.Body).
table.cell	td	Cell data (InstUI Table.Cell).
table.col-header	th	Cell pen-colofn (InstUI Table.ColHeader); yr arddull th diofyn, a gaiff ei ddisodli gan table.row-header ar gyfer th[scope="row"].
table.head	thead	Grŵp rhes penawd y tabl (InstUI Table.Head).
table.row	tr	Rhes tabl (InstUI Table.Row).
table.row-header	th[scope="row"]	Cell pen-rhes (InstUI Table.RowHeader); wedi'i arddullio o'r tocynnau pen-rhes, nid y rhai pen-colofn.
tabs	.instui-tabs	Set paneli tabbed: rhes tabiau, tabiau dewisadwy, a'u paneli.
tabs.panel	.panel	Panel cynnwys ar gyfer tab (InstUI Tabs.Panel).
tabs.tab	.tab	Botwm tab sengl (InstUI Tabs.Tab, wedi'i ffurfweddu trwy restr tabiau'r rhiant Tabs); mae -selected yn nodi'r un sy'n weithredol.
tag	.instui-tag	Ciwp mewnlinol ar gyfer allweddair neu hidlydd.
text	.instui-text	Teipograffi testun y corff gyda diwygwyr maint, trwch, lliw a steil.
text-area	.instui-text-area	<textarea> brodorol wedi'i arddullio a gellir ei newid maint, gyda'r un cyflwr a meintiau â'r mewnbwn testun.
text-input	.instui-text-input	<input> brodorol wedi'i arddullio — gan gynnwys date, time, a datetime-local, lle mae'r porwr yn darparu'r detholwr — gyda chyflyrau dilysu a meintiau.
toggle-details	.instui-toggle-details	Datgeliad <details> brodorol wedi'i arddullio gyda chevrôn yn cylchdroi.
toggle-group	.instui-toggle-group	Datgeliad â ffin wedi'i adeiladu ar <details>: rhes crynodeb gyda chevrôn a chynnwys cwympadwy.
tooltip	.instui-tooltip	Bwlb awgrym CSS ar gyfer hofran a ffocws, y gellir ei leoli ar unrhyw ochr.
tray	.instui-tray	Panel wedi'i glipio i'r ymyl sy'n llithro i mewn o unrhyw ochr; [popover] neu <dialog> brodorol.
tree-browser	.instui-tree-browser	Coeden datgeliad o gasgliadau wedi'u hymchanu a eitemau gwaelod, gyda chevronau'n cylchdroi.
view	.instui-view	Y pedrwn View: blwch niwtral gyda diwygwyr allwedd‑gwerth ar gyfer cefndir, ffin, radiws, cysgod, arddangos, safle, gorlwytho a chwrs. Mae pob un o'r diwygwyr hyn hefyd ar gael yn fyd‑eang (yn ddiofal, neu wedi'u cadw ar unrhyw gydran arall) — gweler y gweithrediadau background/border/shadow/display/position/overflow/cursor.

Offer

Enw	Dosbarth	Crynodeb
color	.--text-danger	Offer lliw semantig: .--bg-<name>, .--text-<name> (alias fel .--color-<name>), a .--border-<name> ar gyfer y palet semantig a ddewiswyd. Mae gan bob un ohonynt hefyd diwygwr alias sydd wedi'i atodi i gydran (er enghraifft -bg-danger ar unrhyw .instui-<component>).
cursor	.--cursor-pointer	cursor fel dosbarth byd‑eang gydgynhyrchiol — .--cursor-<value> — y gellir ei ddefnyddio'n ddiofal neu'i gadw ar unrhyw gydran (.instui-button.--cursor-pointer).
gap	.--gap-md	Offer gap flex/grid ar raddfa'r bylchau, gyda sillafu byr (--gap-sm) neu hir (--gap-small). Y gellir eu defnyddio'n ddiofal neu'u cadw ar unrhyw gydran (.instui-view.--gap-sm) — gall cydrannau sydd eisoes yn gosod eu gap eu cael eu gorchuddio.
icon	.instui-icon	Y system eicon: maint .instui-icon ynghyd â'r paentwr rhannol -icon-<name> sy'n guddio glyph (yn currentColor) cyn unrhyw elfen.
layout	.--display-flex	Offer arddangos a lleoli testun — .--display-<value> a .--text-align-<value> — fel dosbarthiadau byd‑eang gydgynhyrchiol, y gellir eu defnyddio'n ddiofal neu'u cadw ar unrhyw gydran.
maskglobal	.--mask-overlay	Copi ddwyfol, fyd‑eang o ddiwygwyr haen mask — --mask-overlay, --mask-fullscreen, --mask-blur — y gellir eu defnyddio'n ddiofal neu'u cadw ar unrhyw gydran, heb eu lapio mewn elfen .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y fel dosbarthiadau byd‑eang gydgynhyrchiol — .--overflow-x-<value> / .--overflow-y-<value> — y gellir eu defnyddio'n ddiofal neu'u cadw ar unrhyw gydran.
position	.--position-relative	position fel dosbarth byd‑eang gydgynhyrchiol — .--position-<value> — y gellir ei ddefnyddio'n ddiofal neu'i gadw ar unrhyw gydran (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Dosbarthiadau dangos/cuddio ar gyfer lled yr olwg neu'r cynhwysydd ar draws raddfa pwynt torri thematig.
screen-reader-content	.instui-screen-reader-content	Cuddio cynnwys yn weledol tra'n ei gadw ar gael i dechnoleg gynorthwyol (y patrwm clip safonol).
spacing	.--p-md	Defnyddiau margin a phŵl — .--m<side>-<step> / .--margin-<side>-<step> a .--p<side>-<step> / .--padding-<side>-<step> ar y graddfa lleihad (ochrau t/b/s/e/x/y neu dim, wedi’u sillafu’n fyr neu’n llawn — er enghraifft --mb-sm a --margin-bottom-small yw’r un rheol; mae margin hefyd yn cymryd auto). Gallu defnyddio’n syth neu’w gadwynu ar unrhyw gydran (er enghraifft class="instui-view --mb-sm").
stacking	.--stack-topmost	Defnyddiau dyfnder z-index — .--stack-<level> (deepest, below, above, topmost) — Gellir eu defnyddio’n syth neu’w cadwynu ar unrhyw gydran, felly mae haenau’n stacio’n rhagweladwy yn hytrach nag â rhifau wedi’u haddasu â llaw.
transition	.instui-transition.-transition-fade-entering	Dosbarthiadau cyflwr animeiddio ar gyfer y gydran Transition — .instui-transition a dosbarthiadau cyflwr (-transition-fade-entering, -transition-scale-exited, ac ati) — Gellir eu defnyddio’n syth neu’w cadwynu ar unrhyw gydran.
truncate	.--truncate	Trunciadaeth ellips gyda chlymu llinell a reolir gan --lines — Gellir ei defnyddio’n syth neu’w cadwynu ar unrhyw gydran (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Amserlen dadfygio cynllun: cyfuno .-with-visual-debug ar unrhyw elfennau i amlinellu’r blwch a’i blant uniongyrchol, fel bod strwythur y cynllun yn weladwy ar un olwg.

Rheolau

Enw	Dosbarth	Crynodeb
base	*	Ailosod byd-eang optio-i-mewn: box-sizing, arwyneb y dudalen, lliw testun craidd a ffont, color-scheme, a rhagosodiadau dolenni.
prose	:where(body)	Rhagosodiadau teipograffeg ar gyfer HTML crai — pennawdau, paragraffau, rhestrau, dolenni, a chod — yn cael eu cymhwyso’n awtomatig lle bynnag y’i mewnforir (diofyn :where(body)); pasio options.scope i dargedu gwraidd cynnwys gwahanol yn lle hynny (e.e. .vp-doc).

Plugins

Enw	Dosbarth	Crynodeb
logos	.logos	Logotipiau cynnyrch Instructure fel tocynnau delwedd CSS: mae --instui-logo-<product>-<layout>-<mode> yn dal data-URI SVG, felly mae logo yn paentio trwy er enghraifft background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Dosbarthiadau defnyddiol optio-i-mewn ar gyfer y palet primal crai: mae .instui-bg-/fg-/border-primitive-color-<name> yn peintio lliw o’r tocynnau lliw primal, ynghyd â defnyddiau font-family/font-weight ar gyfer tocynnau ffont primal. Wedi’u cadw allan o’r defnyddiau semanteg fel bod gorchmyllyriadau yno yn aros yn semanteg-yn-unig.
visual-debug	.-with-visual-debug	Amserlen dadfygio cynllun: cyfuno .-with-visual-debug ar unrhyw elfennau i amlinellu’r blwch a’i blant uniongyrchol, fel bod strwythur y cynllun yn weladwy ar un olwg.

layout

Enw	Dosbarth	Crynodeb
callout	div[class~="instui-callout"]	Rhybudd gwybodaeth mewnliniol ar gyfer atgof byr neu nodyn.
hero	div[class~="instui-hero"]	Adran penawdau lled-lawn gyda theitl, is-deitl, a delwedd gefndir dewisol.
page-layout	div[class~="instui-page-layout"]	Trefniant tudalen safonol tri-cholofn gyda phenawd, bar ochr, a phrif gynnwys.
rubric-note	div[class~="instui-rubric-note"]	Nodyn strwythuredig gyda categorïau rubrâd a dangosyddion sgorio.
testimonial	div[class~="instui-testimonial"]	Arddangos dyfyniad neu dysteb gyda dyfyniad ac argraff ddelwedd dewisol.
two-column	div[class~="instui-two-column"]	Trefniant dau-golofn gyda rhanau cynnwys chwith a dde.
wrapper	body[class~="instui-display-flex"]	Rheshell app: llywio ochr, cynhwysydd gyda phenawd, a phanel dewisol.