CSS API referencia

A CSS API referencia a pantoken osztályalapú komponensrétegét fedi le: komponensek, segédosztályok, globális szabályok és deklarációk, amelyek a tokenrendszerre épülnek.

Komponensek

Név	Osztály	Összefoglaló
agent-shell	.instui-agent-shell	Felületi konténer AI-ügynökök számára.
alert	.instui-alert	Soron belüli üzenet státuszsávval és a megosztott ikonkészletből származó maszkolt státusz‑piktogrammal.
avatar	.instui-avatar	Egy felhasználói avatar, amely inicialokat vagy egy képet jelenít meg, alapértelmezés szerint kör alakú.
badge	.instui-badge	Egy kis számláló- vagy állapotjelző pont, amely a cél sarkára van helyezve.
banner	.instui-banner	Bezárható, ikonnal kiegészített üzenetfelület oldalszintű vagy kontextuson belüli bejelentésekhez.
billboard	.instui-billboard	Egy nagy, üres állapotú vagy cselekvésre ösztönző blokk: egy kiemelt ikon vagy kép, egy címsor és egy üzenet.
breadcrumb	.instui-breadcrumb	Elválasztókkal tagolt navigációs morzsa — az utolsó morzsa a jelenlegi oldal.
breadcrumb.link	li	Egy crumb (InstUI Breadcrumb.Link), a szülő <ol>-jának egy <li> eleme; az utolsó a jelenlegi oldal.
button	.instui-button	Egy akadálymentes műveletvezérlő, a token-palettából származó stílusokkal; alapértelmezés szerint elsődleges.
button-set	.instui-button-set	Egy illesztett (szoros, hézagmentes) gombsor, amelynek csak a két külső sarka van lekerekítve.
byline	.instui-byline	Egy médiaobjektum: egy kiemelt figura a cím és a leírás mellett.
calendar	.instui-calendar	Statikus havi rács navigációval, a hét napjait mutató fejlécekkel és napi cellákkal.
calendar.day	.day	Egy napcella (InstUI Calendar.Day); a -today, -selected és -outside-month jelölik az állapotát.
card	.instui-card	Egy felületi tároló, amely tetszőleges tartalmat fogad.
checkbox	.instui-checkbox	Egy natív jelölőnégyzet és a címkéje, vagy egy kapcsoló a -variant-toggle használatával.
close-button	.instui-close-button	Egy átlátszó ikon gomb, amely saját × jelét rajzolja, három méretben, valamint egy on-color változatban.
context-view	.instui-context-view	Egy kiemelt (elevált) callout caret-tel, amely tetszőleges oldalon elhelyezhető; natív [popover]-ként működik.
drawer-layout	.instui-drawer-layout	Kettős elrendezés összecsukható oldalsó tálcával és egy elsődleges, görgethető tartalompanellel.
drawer-layout.content	.content	A fő tartalmi panel, amely kitölti a tálca melletti fennmaradó helyet.
drawer-layout.tray	.tray	Az oldalsó panel a fő tartalom mellett, opcionális átfedéssel és tálcaszerű felületmódosítókkal.
file-drop	.instui-file-drop	Fájl áthúzó zóna lebegtetett, elfogadott és elutasított állapotokkal.
form-field	.instui-form-field	Egy űrlapmező burkoló: egy címke, a vezérlők, valamint inline, kötelező vagy csak olvasható elrendezések.
form-field-group	.instui-form-field-group	Egy <fieldset> csoport legendával, oszlop- vagy inline elrendezéssel és konfigurálható térközzel.
form-field-messages	.instui-form-field-messages	Mezőhöz tartozó segítő és érvényesítési üzenetek — tipp, hiba, siker és csak képernyőolvasó számára — ikonnal hiba és siker esetén.
heading	.instui-heading	Fejléc-tipográfia a -level-h1-től a -level-h6-ig.
img	.instui-img	Egy stílusozott <img>, megjelenítési, vágási és effekt-módosítókkal, amelyek egymásra rétegződnek.
in-place-edit	.instui-in-place-edit	Egy [contenteditable], amely szövegként olvasható, amíg nem kap fókuszt, majd fókuszáláskor megjeleníti a beviteli felületet.
input-group	.instui-input-group	Szövegbeviteli mezőt körülvevő felület, az elején és a végén elhelyezhető ikon slotokkal.
link	.instui-link	Egy stílusos hivatkozás méretezéssel, invertált változattal sötét háttérhez, valamint inline vagy stílus nélküli formában.
list	.instui-list	Tokenvezérelt elemtávolságú lista.
list.item	.instui-list	Egy listaelem (InstUI List.Item).
mask	.instui-mask	Egy in-flow átfedés, amely kitölti a pozícionált szülőjét és középre igazítja a tartalmát — pl. egy spinner egy kártya felett. Modal esetén részesítsd előnyben a natív <dialog>-ot (annak ::backdrop-ja a maszk). Minden ilyen módosító globálisan is elérhető (önmagában, vagy láncolva bármely más komponensre) — lásd a mask global utility-t.
menu	.instui-menu	Elemek, csoportok és elválasztók legördülő felülete.
menu.group	.group	Címkézett csoportfejléc (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Menübejegyzés (InstUI Menu.Item); adj hozzá -disabled, -highlighted vagy -active/[aria-checked].
menu.separator	.separator	Elválasztó vonal az elemek között (InstUI Menu.Separator).
metric	.instui-metric	Egy címkézett statisztika — egy nagy érték egy felirat fölött.
modal	.instui-modal	Egy párbeszédpanel felülete (működik egy natív <dialog> elemen); fejléc/tartalom/láb részek.
modal.body	.body	A tartalomterület (InstUI Modal.Body); egyetlen <img> széltől szélig terjed.
modal.footer	.footer	Az akciók sora (InstUI Modal.Footer).
modal.header	.header	A címsor (InstUI Modal.Header).
number-input	.instui-number-input	Számbeviteli felület +/- pörgető oszloppal.
pagination	.instui-pagination	Oldalnavigáció: számozott oldalak, első, előző, következő és utolsó nyilak, valamint három pont (…) a hézagok jelzésére.
pagination.page	.page	Egy oldallink vagy gomb (InstUI Pagination.Page); az aktuális oldal [aria-current] attribútummal rendelkezik.
pill	.instui-pill	Kompakt státuscímke; adj hozzá előtagként egy ikont a közös -icon-<name> formában.
popover	.instui-popover	Kiemelt felület egy natív [popover] számára, amelyet CSS anchor pozícionálás helyez el.
progress	.instui-progress	Egy meghatározott értékű előrehaladást jelző sáv színes mérővel, különböző méretekkel és egy opcionális értékcímkével.
progress-circle	.instui-progress-circle	Kör alakú előrehaladást jelző gyűrű, amelyet a --value és a --value-max egyéni tulajdonságok vezérelnek.
radio	.instui-radio	Egy natív rádiógomb és a hozzá tartozó címke.
radio-input-group	.instui-radio-input-group	Egyválasztós rádió <fieldset>, egyszerű vagy összekapcsolt szegmenses váltóként.
range-input	.instui-range-input	Egy stilizált tartománycsúszka inverz értékbuborékkal.
rating	.instui-rating	Csillagértékelés kitöltött és üres ikonokkal és opcionális numerikus felirattal.
segmented-control	.instui-segmented-control	Egyválasztós sor tömör nézet- vagy szűrőopciókhoz.
segmented-control.segment	.instui-segmented-control	Kiválasztható szegmentált vezérlőcímke és annak natív rádióbemenete.
side-nav-bar	.instui-side-nav-bar	Függőleges navigációs sáv ikonokkal a címkék fölött elhelyezett elemekből, valamint egy minimalizált, csak ikonokat mutató móddal.
side-nav-bar.item	.item	Egy navigációs bejegyzés (InstUI SideNavBar.Item); a -selected jelöli az aktív elemet.
simple-select	.instui-simple-select	Egy stílusos natív <select> jelölőnyíllal, amely megfelel a szövegbeviteli mezők állapotainak és méreteinek.
skeleton-loader	.instui-skeleton-loader	Dekoratív helykitöltő a még be nem töltődött tartalomhoz.
spinner	.instui-spinner	Egy animált betöltési gyűrű vagy AI spinner; add meg neki a role="status" és egy aria-label attribútumot.
table	.instui-table	Stilizált adat táblázat th és td elemekhez, opcionális felirattal; hover, fixed és stacked-card elrendezésekkel.
table.body	tbody	A táblázat adatsor-csoportja (InstUI Table.Body).
table.cell	td	Egy adatcella (InstUI Table.Cell).
table.col-header	th	Egy oszlopfejléc-cella (InstUI Table.ColHeader); az alapértelmezett th stílus, amelyet a table.row-header ír felül a th[scope="row"] esetén.
table.head	thead	A táblázat fejlécsorok csoportja (InstUI Table.Head).
table.row	tr	Egy táblázatsor (InstUI Table.Row).
table.row-header	th[scope="row"]	Egy sorfejléc-cella (InstUI Table.RowHeader); a sorfejléc-tokenek alapján van stilizálva, nem az oszlopfejléc-tokenek alapján.
tabs	.instui-tabs	Füles panelkészlet: egy füllista, kiválasztható fülek és a hozzájuk tartozó panelek.
tabs.panel	.panel	Egy lap tartalmi panelje (InstUI Tabs.Panel).
tabs.tab	.tab	Egy fülgomb (InstUI Tabs.Tab, a szülő Tabs füljeinek listája alapján konfigurálva); a -selected jelöli az aktívat.
tag	.instui-tag	Soron belüli chip egy kulcsszóhoz vagy szűrőhöz.
text	.instui-text	Törzsszöveg tipográfia méret-, vastagság-, szín- és stílusmódosítókkal.
text-area	.instui-text-area	Egy stílusozott, átméretezhető natív <textarea>, amely ugyanazokkal az állapotokkal és méretekkel rendelkezik, mint a szövegbeviteli mező.
text-input	.instui-text-input	Egy stilizált natív <input> — beleértve a date, time és datetime-local típusokat, ahol a böngésző biztosítja a kiválasztót — validációs állapotokkal és méretekkel.
toggle-details	.instui-toggle-details	Egy stílusos, natív <details> felnyitható elem forgó nyíllal.
toggle-group	.instui-toggle-group	Egy keretes, <details>-re épülő kibontó elem: egy chevronnel jelzett összegző sor és összecsukható tartalom.
tooltip	.instui-tooltip	Egy CSS-alapú hover és focus tooltip-buborék, amely bármelyik oldalra pozícionálható.
tray	.instui-tray	Élhez rögzített panel, amely bármelyik oldalról becsúszik; natív [popover] vagy <dialog>.
tree-browser	.instui-tree-browser	Kibontható fa, amely egymásba ágyazott gyűjteményeket és levél-elemeket tartalmaz, forgó chevronokkal.
view	.instui-view	A View primitív: egy semleges doboz kulcs–érték módosítókkal a háttérhez, kerethez, lekerekítéshez, árnyékhoz, megjelenítéshez, pozícióhoz, túlcsorduláshoz és kurzorhoz. Ezek a módosítók mind globálisan is elérhetők (önmagukban, vagy bármely más komponensre láncolva) — lásd a background/border/shadow/display/position/overflow/cursor utilitásokat.

Segédprogramok

Név	Osztály	Összefoglaló
ai-gradient	.--background-ai-horizontal	AI-accent gradiens segédeszközök egyedi felületekhez, nem a megosztott InstUI szerződéshez.
color	.--text-danger	Szemantikus színsegédosztályok: .--bg-<name>, .--text-<name> (alias: .--color-<name>), és .--border-<name> a kiválasztott szemantikus palettához. Mindegyikhez tartozik komponensre csatolt alias módosító is (például -bg-danger bármely .instui-<component>-en).
cursor	.--cursor-pointer	cursor mint komponálható, globális osztály — .--cursor-<value> — önállóan vagy bármely komponensre láncolva használható (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap segédosztályok a spacing skálán, rövid (--gap-sm) vagy hosszú (--gap-small) írásmóddal. Használhatók önmagukban vagy láncolva bármely komponensre (.instui-view.--gap-sm) — azoknál a komponenseknél, amelyek már a saját, komponensspecifikus tokenjükből állítják be a gap értékét, ez felülíródhat.
icon	.instui-icon	Ikonrendszer: a .instui-icon méretezése és a megosztott -icon-<name> festő, amely egy piktogramot maszkol (a currentColor színében) bármely elem elé.
layout	.--display-flex	Megjelenítési és szövegigazítási segédosztályok — .--display-<value> és .--text-align-<value> — kompozit, globális osztályokként, önállóan vagy bármely komponenshez láncolva használhatók.
logo	.instui-logo	Ikonrendszer: a .instui-icon méretezése és a megosztott -icon-<name> festő, amely egy piktogramot maszkol (a currentColor színében) bármely elem elé.
maskglobal	.--mask-overlay	A mask komponens overlay módosítóinak globális, kettős másolata — --mask-overlay, --mask-fullscreen, --mask-blur — önállóan vagy bármely komponensre láncolva használható, .instui-mask elembe csomagolás nélkül.
overflow	.--overflow-x-hidden	overflow-x/overflow-y mint komponálható, globális osztályok — .--overflow-x-<value> / .--overflow-y-<value> — önállóan használhatók vagy láncolhatók bármely komponensre.
position	.--position-relative	position mint komponensenként összefűzhető, globális osztály — .--position-<value> — használható önállóan vagy láncolva bármely komponensre (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Viewport- vagy konténer-szélesség szerinti megjelenítés/elrejtés osztályok egy téma szerinti töréspont-skálán.
screen-reader-content	.instui-screen-reader-content	Vizuálisan elrejti a tartalmat, miközben hozzáférhetővé tartja a segítő technológiák számára (az általános clip-minta).
spacing	.--p-md	Margó- és padding (belső margó) segédosztályok — .--m<side>-<step> / .--margin-<side>-<step> és .--p<side>-<step> / .--padding-<side>-<step> a spacing skálán (oldalak: t/b/s/e/x/y vagy nincs megadva, rövid vagy teljes formában — például --mb-sm és --margin-bottom-small ugyanaz a szabály; a margin auto értéket is elfogad). Használható önállóan vagy bármely komponenshez láncolva (például class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index mélység segédosztályok — .--stack-<level> (deepest, below, above, topmost) — használhatók önmagukban vagy bármely komponensre láncolva, így a rétegek kiszámíthatóan rendeződnek a kézzel beállított számok helyett.
transition	.instui-transition.-transition-fade-entering	Animációs állapotos osztályok a Transition komponenshez — .instui-transition és állapotos osztályok (-transition-fade-entering, -transition-scale-exited, stb.) — önmagukban használhatók vagy bármely komponensre láncolhatók.
truncate	.--truncate	Hárompontos (ellipsis) levágás sorok korlátozásával, amelyet a --lines vezérel — használható önállóan vagy láncolva bármely komponensre (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Egy elrendezés-hibakeresési keret: alkalmazd a .-with-visual-debug osztályt bármely elemre, hogy körvonalazd a dobozt és annak közvetlen gyermekelemeit, így az elrendezés szerkezete egy pillantásra látható.

Szabályok

Név	Osztály	Összefoglaló
base	*	Az opcionális globális reset: box-sizing, az oldal felülete, alap szövegszín és betű, a color-scheme és a linkek alapértelmezett viselkedése.
prose	:where(body)	Alapértelmezett tipográfiai beállítások nyers HTML-hez — címsorok, bekezdések, listák, hivatkozások és kód — amelyek automatikusan alkalmazódnak bárhol, ahová importálják (alapértelmezett :where(body)); adja meg a options.scope-ot, hogy egy másik tartalmi gyökérre célozzon (pl. .vp-doc).

Deklarációk

Név	Osztály	Összefoglaló
breakpoints	.breakpoints	Extra-kicsi nézetablak szélesség telefonméretű előnézetekhez.

Plugins

Név	Osztály	Összefoglaló
logos	.logos	Az Instructure terméklogói CSS képtokenként: --instui-logo-<product>-<layout>-<mode> egy data-URI SVG-t tartalmaz, így egy logó például így festhető meg: background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Választható segédosztályok a nyers primitív palettához: .instui-bg-/fg-/border-primitive-color-<name> a primitív szín-tokenekből fest egy színt, továbbá font-family/font-weight segédosztályok a primitív betűtípus-tokenekhez. Külön tartva a szemantikus segédosztályoktól, hogy az ottani felülírások továbbra is csak szemantikusak maradjanak.
visual-debug	.-with-visual-debug	Egy elrendezés-hibakeresési keret: alkalmazd a .-with-visual-debug osztályt bármely elemre, hogy körvonalazd a dobozt és annak közvetlen gyermekelemeit, így az elrendezés szerkezete egy pillantásra látható.

layout

Név	Osztály	Összefoglaló
callout	div[class~="instui-callout"]	Inline információs figyelmeztetés rövid emlékeztetőhöz vagy megjegyzéshez.
hero	div[class~="instui-hero"]	Teljes szélességű fejlécszakasz címmel, alcímmel és opcionális háttérképpel.
page-layout	div[class~="instui-page-layout"]	Fejlécet, oldalsávot és fő tartalmat tartalmazó szabványos háromoszlopos oldalelrendezés.
rubric-note	div[class~="instui-rubric-note"]	Strukturált megjegyzés rubrikakategóriákkal és pontozási jelzőkkel.
testimonial	div[class~="instui-testimonial"]	Idézet vagy vélemény megjelenítése a szerző feltüntetésével és opcionális képpel.
two-column	div[class~="instui-two-column"]	Kétoszlopos elrendezés bal és jobb tartalomterületekkel.
wrapper	body[class~="instui-display-flex"]	App-shell sor: oldalsó navigáció, fejlécet tartalmazó konténer és opcionális panel.