CSS Tagairt API

Clár tagartha API CSS a chlúdaíonn an chiseal comhpháirteanna bunaithe ar rang de pantoken: comhpháirteanna, uirlisí, rialacha domhanda agus ráitis bunaithe ar an gcóras token.

Comhpháirteanna

Ainm	Rang	Achoimre
agent-shell	.instui-agent-shell	Coimeádán dromchla do ghníomhairí AI.
alert	.instui-alert	Teachtaireacht líneach le barra datha stádais agus siombail stádais mhaiscithe ón tsraith íocón roinnte.
avatar	.instui-avatar	Avatáar úsáideora a thaispeánann ainghreamacha nó íomhá, ciorclach de ghnáth.
badge	.instui-badge	Pointe beag comhaireamh nó dot stádais suite os cionn chúinne an sprioc.
banner	.instui-banner	Dromchla teachtaireachta is féidir a diúltú, le híocón, le haghaidh fógraí leibhéal-leathanach nó i gcomhthéacs.
billboard	.instui-billboard	Bloc staid folamh mór nó glao-go-gníomh: íocón/laoch nó íomhá, teideal, agus teachtaireacht.
breadcrumb	.instui-breadcrumb	Rian 'breadcrumbs' le scaradóirí; is é an slisne dheireanach an leathanach reatha.
breadcrumb.link	li	Slisne (InstUI Breadcrumb.Link), <li> i <ol> an tuismitheora; is é an ceann deireanach an leathanach reatha.
button	.instui-button	Smacht gníomh inrochtaine, stíleáilte ón phailéad token; príomh-mhodhnú de ghnáth.
byline	.instui-byline	Réad meán: figiúr laoch in aice le teideal agus cur síos.
calendar	.instui-calendar	Gréasán míosa statach le nascleanúint, ceanntásca laethanta seachtaine, agus cilléanna lae.
calendar.day	.day	Cill lae (InstUI Calendar.Day); marcálann -today, -selected agus -outside-month a stádas.
card	.instui-card	Coimeádán dromchla a ghlacann ábhar ar bith.
checkbox	.instui-checkbox	Bosca seiceála dúchais agus a lipéad, nó lasc trí -variant-toggle.
close-button	.instui-close-button	Cnaipe íocón trédhearcach a tharraingíonn a ghiolgl × féin, i dtrí mhéid agus le leagan dath 'on'.
context-view	.instui-context-view	Glao ardaithe le cúinne, inúsáidte ar aon taobh; oibríonn sé mar [popover] dúchais.
drawer-layout	.instui-drawer-layout	Leagan scoilte le tráid taobh atá inchoigeartaithe agus panáil ábhar príomha scrolálaí.
drawer-layout.content	.content	An phana ábhar príomha a líonann an spás atá fágtha in aice leis an tráid.
drawer-layout.tray	.tray	An painéal taobh in aice leis an ábhar príomha, le clúdach roghnach agus modhnóirí dromchla cosúil le tráid.
file-drop	.instui-file-drop	Zón titim comhaid le staidí sleamhnaithe (hover), glacta agus diúltaithe.
form-field	.instui-form-field	Pacálaí réimse foirm: lipéad, a rialuithe, agus leaganacha líneacha, riachtanach, nó achléamh.
form-field-group	.instui-form-field-group	Grúpa <fieldset> le finscéal, leagan colún nó líneach, agus spásáil inchoigeartaithe.
form-field-messages	.instui-form-field-messages	Cabhair réimse agus teachtaireachtaí fíoraithe — leid, earráid, rath, agus do léitheoir scáileáin amháin — le siombail ar earráid agus ar rath.
heading	.instui-heading	Tíopagrafaíocht ceanntásc ó -level-h1 go -level-h6.
img	.instui-img	<img> stíleáilte le modhnóirí taispeána, gearrtha agus éifeachtaí a shraitheann.
in-place-edit	.instui-in-place-edit	[contenteditable] a léitear mar théacs go dtí go ndéantar fócas air, ansin taispeánann sé chróim ionchuir.
input-group	.instui-input-group	Aghaidh timpeall ionchur téacs le sliotáin siombailí tosaigh agus iarmhóra.
link	.instui-link	Hipearnasc stíleáilte le méideanna, leagan inbhéartaithe do chúlraí dorcha, agus foirmeacha líneacha nó neamhshtíleáilte.
list	.instui-list	Liosta le spásáil míreanna tiomáinte ag token.
list.item	.instui-list	Mír liosta (InstUI List.Item).
mask	.instui-mask	Fabraic chugat san sreabhadh a líonann a thuismitheoir suímh agus a lárnaíonn a ábhar — m.sh. spinner os cionn cárta. Do modal, is fearr <dialog> dúchais (is é a ::backdrop an masc). Tá gach ceann de na modhnóirí seo ar fáil go domhanda freisin (gan aon chiseal, nó slabhraithe ar aon chomhpháirt eile) — féach an ghné dhomhanda mask.
menu	.instui-menu	Dromchla anuas de mhíreanna, grúpaí agus scaradóirí.
menu.group	.group	Ceanncheann grúpa lipéadaithe (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Iontráil roghchláir (InstUI Menu.Item); cuir -disabled, -highlighted, nó -active/[aria-checked].
menu.separator	.separator	Riail scoilte idir míreanna (InstUI Menu.Separator).
metric	.instui-metric	Staitistic lipéadaithe — luach mór os cionn fotheideal.
modal	.instui-modal	Dromchla comhrá (oibríonn sé ar <dialog> dúchais); codanna ceannlíne, comhlacht agus coisc.
modal.body	.body	Réigiún ábhar (InstUI Modal.Body); téann <img> aonair lán-bleim.
modal.footer	.footer	Réad gníomhartha (InstUI Modal.Footer).
modal.header	.header	Réad teidil (InstUI Modal.Header).
number-input	.instui-number-input	Aghaidh ionchur-uimhir le colún spinner +/-.
pagination	.instui-pagination	Nascleanúint leathanach: leathanaigh uimhriúla, an chéad, roimhe, eile agus deireanach saigheada, agus ellipsis do bhearnaí.
pagination.page	.page	Nasc nó cnaipe leathanach (InstUI Pagination.Page); iomparann an leathanach reatha [aria-current].
pill	.instui-pill	Lipéad stádais dlúth; cuir siombal tosaigh leis an fhoirm roinnte -icon-<name>.
popover	.instui-popover	Dromchla ardaithe do [popover] dúchais, a phostáil le suíomhanchur ancaire CSS.
progress	.instui-progress	Baar dul chun cinn sainiúil le méadar datha, méideanna, agus lipéad luach roghnach.
progress-circle	.instui-progress-circle	Fáinne dul chun cinn ciorclach tiomáinte ag airíonna saincheaptha --value agus --value-max.
radio	.instui-radio	Cnaipe raidió dúchais agus a lipéad.
radio-input-group	.instui-radio-input-group	<fieldset> raidió roghnú-aonair, simplí nó mar lasc roinnte nasctha.
range-input	.instui-range-input	Sleamhnán raon stíleáilte le bublán luach inbhéartaithe.
rating	.instui-rating	Rátáil réalta le gliafa lán agus folamh agus lipéad uimhriúil roghnach.
side-nav-bar	.instui-side-nav-bar	Ráill nascleanúna ingearach le míreanna lógó-os-cairtéil, le mód íosta a thaispeánann ach íocóin.
side-nav-bar.item	.item	Iontráil nascleanúna (InstUI SideNavBar.Item); léiríonn -selected an ceann atá gníomhach.
simple-select	.instui-simple-select	<select> dúchasach stíleáilte le cúrsóir, ag comhoiriúnú le stáidí agus méideanna ionchur téacs.
spinner	.instui-spinner	Fáinne luchtaithe beochana; tabhair dó role="status" agus aria-label.
table	.instui-table	Tábla sonraí stíleáilte do th agus td plus caption roghnach, le leaganacha hover, seasta, agus cárta-staca.
table.body	tbody	Grúpa sraitheanna sonraí an tábla (InstUI Table.Body).
table.cell	td	Ceall sonraí (InstUI Table.Cell).
table.col-header	th	Ceall ceannleathan colún (InstUI Table.ColHeader); an stíl réamhshocraithe th, á shárú ag table.row-header do th[scope="row"].
table.head	thead	Grúpa sraithe ceanntásc an tábla (InstUI Table.Head).
table.row	tr	Sraith tábla (InstUI Table.Row).
table.row-header	th[scope="row"]	Ceall ceann-sraithe (InstUI Table.RowHeader); stíleáilte ó na tóicní ceann-sraithe, ní ó na cinn ceann-colún.
tabs	.instui-tabs	Sraith painéil lipéadaithe: liosta tab, tabs roghnaithe, agus a bpaintéil.
tabs.panel	.panel	An painéal ábhair do taba (InstUI Tabs.Panel).
tabs.tab	.tab	Cnaipe taba singil (InstUI Tabs.Tab, cumraítear trí liosta taba an tuismitheora Tabs); léiríonn -selected an ceann atá gníomhach.
tag	.instui-tag	Cipe inlíne do eochairfhocal nó scagaire.
text	.instui-text	Cló corpéige le modhnóirí méid, meáchan, dath agus stíl.
text-area	.instui-text-area	<textarea> dúchasach stíleáilte, inathraithe le méideanna agus stáidí mar an ionchur téacs.
text-input	.instui-text-input	<input> dúchasach stíleáilte — lena n-áirítear date, time, agus datetime-local, áit a soláthraíonn an brabhsálaí an roghnóir — le stáidí bailíochtaithe agus méideanna.
toggle-details	.instui-toggle-details	Fholáireamh <details> dúchasach stíleáilte le chevron rothlaithe.
toggle-group	.instui-toggle-group	Fholáireamh le teorainn tógtha ar <details>: sraith achoimre le chevron agus ábhar collapsible.
tooltip	.instui-tooltip	Púipín tooltip CSS le hover agus fócas, in ann a shuíomh ar aon taobh.
tray	.instui-tray	Painéal faoi ghlas ar imeall a sleamhníonn isteach ó aon taobh; [popover] dúchasach nó <dialog>.
tree-browser	.instui-tree-browser	Crann foláirimh de bhailiúcháin nasted agus míreanna duille, le chevrons rothlaithe.
view	.instui-view	An primití View: bosca neodrach le modhnóirí eochair‑luach don chúlra, teorainn, radius, scáth, taispeáint, suíomh, sreamsa, agus curser. Tá gach ceann de na modhnóirí seo ar fáil go domhanda freisin (gan aon rud, nó curtha i gcateangan ar aon chomhpháirt) — féach na fóntais background/border/shadow/display/position/overflow/cursor.

Uirlisí

Ainm	Rang	Achoimre
color	.--text-danger	Fóntais dathanna seamantaíochta: .--bg-<name>, .--text-<name> (ata ailtithe mar .--color-<name>), agus .--border-<name> don phailéad seiméantach roghnaithe. Tá ailtóir modhnóra ceangailte le gach ceann acu freisin (m.sh. -bg-danger ar aon .instui-<component>).
cursor	.--cursor-pointer	cursor mar ranga comhdhlúthchomhlach — .--cursor-<value> — inúsáidte glan nó curtha i gcateangan ar aon chomhpháirt (.instui-button.--cursor-pointer).
gap	.--gap-md	Fóntais flex/grid gap ar scála spáis, lithe ( --gap-sm ) nó fada ( --gap-small ) eagrán. Inúsáidte glan nó curtha i gcateangan ar aon chomhpháirt (.instui-view.--gap-sm) — d’fhéadfadh go sárófaí comhpháirteanna a shocraíonn a gap féin ó thóicní sonrach comhpháirte.
icon	.instui-icon	An córas íocón: méid .instui-icon plus an péintéir comhroinnte -icon-<name> a mhaisiúann gliaph (in currentColor) roimh aon eilimint.
layout	.--display-flex	Fóntais taispeána agus ailínithe téacs — .--display-<value> agus .--text-align-<value> — mar ranganna domhanda comhdhlúthchomhlacha, inúsáidte glan nó curtha i gcateangan ar aon chomhpháirt.
maskglobal	.--mask-overlay	Cóip dhomhanda dhúbailte de mhodhnóirí clúdach comhpháirte mask — --mask-overlay, --mask-fullscreen, --mask-blur — inúsáidte glan nó curtha i gcateangan ar aon chomhpháirt, gan é a chaitheamh i gcomhpháirt .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y mar ranganna domhanda comhdhlúthchomhlacha — .--overflow-x-<value> / .--overflow-y-<value> — inúsáidte glan nó curtha i gcateangan ar aon chomhpháirt.
position	.--position-relative	position mar ranga domhanda comhdhlúthchomhlacha — .--position-<value> — inúsáidte glan nó curtha i gcateangan ar aon chomhpháirt (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Ranganna taispeána/folaigh leathanach-ríomh nó leathanach-choimeádáin trasna scála briseadh téamaithe.
screen-reader-content	.instui-screen-reader-content	Folaíonn amhairc ábhar faoi choinne rochtain do theicneolaíocht chabhrach (an patrún clip caighdeánach).
spacing	.--p-md	Úsáideacha do mhargh agus padding — .--m<side>-<step> / .--margin-<side>-<step> agus .--p<side>-<step> / .--padding-<side>-<step> ar an scála spásála (taobhanna t/b/s/e/x/y nó gan, scríofa giorra nó go hiomlán — mar shampla tá --mb-sm agus --margin-bottom-small mar an riail chéanna; glacann margin freisin auto). Inúsáidte mar aon nó ceangailte le haon chomhpháirt (mar shampla class="instui-view --mb-sm").
stacking	.--stack-topmost	Úsáidí do dhromchla z-index — .--stack-<level> (deepest, below, above, topmost) — inúsáidte mar aon nó ceangailte le haon chomhpháirt, ionas go dtuaslagann na sraitheanna go réasúnta seachas le huimhreacha socraithe de láimh.
transition	.instui-transition.-transition-fade-entering	Rangaí staid beochana don chomhpháirt Transition — .instui-transition agus rangaí staid (-transition-fade-entering, -transition-scale-exited, srl.) — inúsáidte mar aon nó ceangailte le haon chomhpháirt.
truncate	.--truncate	Truncáil le ellipsis le clamping línte rialaithe ag --lines — inúsáidte mar aon nó ceangailte le haon chomhpháirt (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Cruthú léirithe le haghaidh dífhabhtaithe leagan: cuir .-with-visual-debug ar chomhdhúil ar aon eilimint chun bosca agus a pháistí láithreach a chur os comhair, ionas go mbeidh struchtúr an leagan le feiceáil go tapa.

Rialacha

Ainm	Rang	Achoimre
base	*	Athshocrú domhanda roghnach: box-sizing, dromchla na leathanach, dath bun téacs agus cló, color-scheme, agus réamhshocruithe na nascanna.
prose	:where(body)	Réamhshocruithe typagrafacha do HTML amh — ceantair, míreanna, liostaí, nascanna, agus cód — curtha i bhfeidhm go huathoibríoch áit ar importáladh é (réamhshocrú :where(body)); pas options.scope chun sprioc a leagan ar fhreastalaí ábhar eile (m.sh. .vp-doc).

Plugins

Ainm	Rang	Achoimre
logos	.logos	Lóga táirgí Instructure mar thóna íomhá CSS: coinníonn --instui-logo-<product>-<layout>-<mode> SVG i bhformáid data-URI, mar sin péinteáiltear lógó trí m.sh. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Ranganna uilíoch roghnacha don phailéad primitiúil amh: .instui-bg-/fg-/border-primitive-color-<name> péinteáiltear dath ó na tóicní dath primitiúla, chomh maith le font-family/font-weight do na tóicní cló primitiúla. Coimeádtha amach ó na huirlisí searmanais ionas go bhfanann áiríodhcháin ann amháin.
visual-debug	.-with-visual-debug	Cruthú léirithe le haghaidh dífhabhtaithe leagan: cuir .-with-visual-debug ar chomhdhúil ar aon eilimint chun bosca agus a pháistí láithreach a chur os comhair, ionas go mbeidh struchtúr an leagan le feiceáil go tapa.

layout

Ainm	Rang	Achoimre
callout	div[class~="instui-callout"]	Foláireamh faisnéise líneach le haghaidh meabhrán nó nótaí ghearra.
hero	div[class~="instui-hero"]	Rann ceanntásc le leithead iomlán le teideal, fo-theideal, agus íomhá cúlra roghnach.
page-layout	div[class~="instui-page-layout"]	Leagan leathanach caighdeánach trí-cholún le ceannlíne, barra taobh, agus príomh-ábhar.
rubric-note	div[class~="instui-rubric-note"]	Nóta struchtúrtha le catagóirí rubairisce agus táscairí scórála.
testimonial	div[class~="instui-testimonial"]	Taispeántas luachana nó téestimónta le haitheantas agus íomhá roghnach.
two-column	div[class~="instui-two-column"]	Leagan dhá-cholún le réigiúin ábhar clé agus deas.
wrapper	body[class~="instui-display-flex"]	Sraith app-shell: nascleanúint taobh, coimeádán le ceannlíne, agus painéal roghnach.