CSS API referencia

A CSS API-referencia a pantoken osztályalapú komponensrétegét tartalmazza: komponenseket, segédprogramokat, globális szabályokat és a tokenrendszeren alapuló deklarációkat.

Komponensek

Név	Osztály	Összegzés
agent-shell	.instui-agent-shell	Felületkonténer AI ágensek számára.
alert	.instui-alert	Egy beágyazott üzenet állapot-szín sávval és a megosztott ikon készletből származó maszkmódú állapot-jelzéssel.
avatar	.instui-avatar	Egy felhasználói avatar, amely a kezdőbetűket vagy egy képet mutat, alapértelmezés szerint kerek.
badge	.instui-badge	Egy kis számlálás vagy állapotpont, amely egy cél sarka fölött helyezkedik el.
banner	.instui-banner	Egy bezárható, ikonnal ellátott üzenetfelület oldalszintű vagy kontextusfüggő bejelentésekhez.
billboard	.instui-billboard	Egy nagy üres állapot vagy cselekvésre ösztönző blokk: egy hős ikon vagy kép, egy cím és egy üzenet.
breadcrumb	.instui-breadcrumb	Egy elválasztókkal ellátott morzsasor; az utolsó morzsa az aktuális oldal.
breadcrumb.link	li	Egy morzsa (InstUI Breadcrumb.Link), egy <li> a szülő <ol> elemében; az utolsó az aktuális oldal.
button	.instui-button	Egy elérhető műveleti vezérlő, a token paletta alapján stílusosan; alapértelmezés szerint elsődleges.
byline	.instui-byline	Egy média objektum: egy hős ábra egy cím és leírás mellett.
calendar	.instui-calendar	Egy statikus havi rács navigációval, hétköznapi fejlécekkel és napcellákkal.
calendar.day	.day	Egy napcella (InstUI Calendar.Day); a(z) -today, -selected és -outside-month jelöli az állapotát.
card	.instui-card	Egy felületkonténer, amely tetszőleges tartalmat fogad el.
checkbox	.instui-checkbox	Egy natív jelölőnégyzet és annak címkéje, vagy egy kapcsoló a -variant-toggle segítségével.
close-button	.instui-close-button	Egy átlátszó ikon gomb, amely a saját × szimbólumot rajzolja meg, három méretben plusz egy inverz változatban.
context-view	.instui-context-view	Egy emelt szintű figyelemfelhívás egy karóval, pozicionálható bármelyik oldalon; natív [popover]-ként működik.
drawer-layout	.instui-drawer-layout	Osztott elrendezés összecsukható oldalsó tálcával és egy elsődleges, görgethető tartalmi panellel.
drawer-layout.content	.content	Az elsődleges tartalmi panel, amely kitölti a tálca melletti fennmaradó helyet.
drawer-layout.tray	.tray	A fő tartalom melletti oldalsó panel, opcionális overlay és tálcaszerű felületmódosítókkal.
file-drop	.instui-file-drop	Egy fájl leejtési zóna lebegési, elfogadott és elutasított állapotokkal.
form-field	.instui-form-field	Egy form-mező burkoló: egy címke, annak vezérlői, valamint beágyazott, kötelező vagy csak olvasható elrendezések.
form-field-group	.instui-form-field-group	Egy <fieldset> csoport egy jelmagyarázattal, oszlop vagy beágyazott elrendezéssel és konfigurálható térközzel.
form-field-messages	.instui-form-field-messages	Mező súgó és validációs üzenetek — célzás, hiba, siker és csak képernyőolvasóhoz — szimbólummal hibakor és sikerkor.
heading	.instui-heading	Cím tipográfia -level-h1-tól -level-h6-ig.
img	.instui-img	Egy stílozott <img> megjelenítési, vágási és effekt módosítókkal, amelyek egymásra rakhatók.
in-place-edit	.instui-in-place-edit	Egy [contenteditable], amely szövegként jelenik meg, amíg fókuszban nem van, majd bemenet chrome-t mutat.
input-group	.instui-input-group	Egy homlokzat egy szövegbemenet körül vezető és záró ikon nyílásokkal.
link	.instui-link	Egy stílozott hiperhivatkozás méretekkel, egy inverz változat sötét hátterekhez, valamint beágyazott vagy stílus nélküli formák.
list	.instui-list	Egy lista token-vezérelt elemtérközzel.
list.item	.instui-list	Egy listaelem (InstUI List.Item).
mask	.instui-mask	Egy folyamatba illeszkedő (in-flow) átfedés, amely kitölti pozicionált szülőjét és középre igazítja annak tartalmát — pl. egy spinner egy kártya felett. Modális ablak esetén érdemesebb natív <dialog> elemet használni (ennek ::backdrop eleme a maszk). E módosítók mindegyike globálisan is elérhető (önmagában vagy bármely más komponenshez láncolva) — lásd a(z) mask globális segédprogramot.
menu	.instui-menu	Egy legördülő felület elemek, csoportok és elválasztók közül.
menu.group	.group	Egy címkézett csoportfejléc (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Egy menübejegyzés (InstUI Menu.Item); adja hozzá a -disabled, -highlighted vagy -active/[aria-checked] értéket.
menu.separator	.separator	Egy 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 felett.
modal	.instui-modal	Egy párbeszéd felület (natív <dialog> működik); fejléc/törzs/lábléc részek.
modal.body	.body	A tartalomterület (InstUI Modal.Body); egy különálló &lt;img&gt; teljes szélességűvé válik.
modal.footer	.footer	A műveletek sora (InstUI Modal.Footer).
modal.header	.header	A címsor (InstUI Modal.Header).
number-input	.instui-number-input	Egy számbemenet homlokzat egy +/- pörgető oszloppal.
pagination	.instui-pagination	Oldalnavigáció: számozott oldalak, első, előző, következő és utolsó nyilak, valamint ellipszis a hézagokhoz.
pagination.page	.page	Egy oldalhivatkozás vagy gomb (InstUI Pagination.Page); az aktuális oldal a(z) [aria-current] értéket hordozza.
pill	.instui-pill	Egy kompakt állapotcímke; adjon hozzá egy vezető szimbólumot a megosztott -icon-&lt;name&gt; formával.
popover	.instui-popover	Egy emelt felület egy natív [popover] számára, CSS horgonyozással pozicionálva.
progress	.instui-progress	Egy meghatározott haladássáv színezett mérővel, méretekkel és egy opcionális értékcímkével.
progress-circle	.instui-progress-circle	A(z) --value és --value-max egyéni tulajdonságok által vezérelt körkörös folyamatjelző gyűrű.
radio	.instui-radio	Egy natív rádiógomb és annak címkéje.
radio-input-group	.instui-radio-input-group	Egy egyetlen kiválasztású rádió &lt;fieldset&gt;, egyszerű vagy csatlakoztatott szegmentált kapcsolóként.
range-input	.instui-range-input	Egy stílozott tartománycúszka inverz érték buborékkal.
rating	.instui-rating	Egy csillagértékelés töltött és üres szimbólumokkal és egy opcionális numerikus címkével.
side-nav-bar	.instui-side-nav-bar	Egy függőleges navigációs sín ikon-feletti-címke elemekből, csak ikon módtal lecsökkentve.
side-nav-bar.item	.item	Egy navigációs bejegyzés (InstUI SideNavBar.Item); a(z) -selected jelöli az aktív elemet.
simple-select	.instui-simple-select	Egy stílozott natív &lt;select&gt; karóval, amely a szövegbemenet állapotainak és méretének felel meg.
spinner	.instui-spinner	Egy animált betöltési gyűrű; adjon neki role="status" és aria-label attribútumot.
table	.instui-table	Egy stílozott adattábla th és td számára, valamint egy opcionális felirattal, lebegési, rögzített és halmazott-kártya 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ílusozás, amelyet felülbírál a(z) table.row-header a(z) th[scope="row"] esetén.
table.head	thead	A táblázat fejlécsor-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 tokenjei alapján formázva, nem az oszlopfejlécéi alapján.
tabs	.instui-tabs	Egy fülezett panel készlet: egy füllista, kiválasztható fülek és azok panelja.
tabs.panel	.panel	Egy fül tartalompanelje (InstUI Tabs.Panel).
tabs.tab	.tab	Egyetlen fülgomb (InstUI Tabs.Tab, amely a szülő Tabs füllistáján keresztül konfigurálható); a(z) -selected jelöli az aktívat.
tag	.instui-tag	Egy beágyazott chip kulcsszóhoz vagy szűrőhöz.
text	.instui-text	Törzs szöveg tipográfia mérettel, súllyal, színnel és stílus módosítókkal.
text-area	.instui-text-area	Egy stílozott, átméretezhető natív &lt;textarea&gt; a szövegbemenet azonos állapotaival és méretével.
text-input	.instui-text-input	Egy stílozott natív &lt;input&gt; — beleértve a date, time és datetime-local értékeket, ahol a böngésző az előválasztót biztosítja — validációs állapotokkal és méretekkel.
toggle-details	.instui-toggle-details	Egy stílozott natív &lt;details&gt; nyilvánosságra hozatal forgó chevron-nal.
toggle-group	.instui-toggle-group	Egy szegélyzett nyilvánosságra hozatal &lt;details&gt; alapján: egy chevron összefoglaló sor és összecsukható tartalom.
tooltip	.instui-tooltip	Egy CSS lebegési és fókusz alátét buborék, pozicionálható bármelyik oldalon.
tray	.instui-tray	Egy szélhez rögzített panel, amely bármelyik oldalról csúszik be; natív [popover] vagy &lt;dialog&gt;.
tree-browser	.instui-tree-browser	Egy nyilvánosságra hozatal fa beágyazott gyűjteményekből és levél elemekből, forgó chevronokkal.
view	.instui-view	A View primitív: egy semleges doboz kulcs-érték módosítókkal a háttér, szegély, lekerekítés, árnyék, megjelenítés, pozíció, túlcsordulás és kurzor beállításához. Ezen módosítók mindegyike globálisan is elérhető (önállóan vagy bármely más komponenshez láncolva) — lásd a(z) background/border/shadow/display/position/overflow/cursor segédosztályokat.

Segédosztályok

Név	Osztály	Összegzés
color	.--text-danger	Szemantikus szín segédprogramok: .--bg-<name>, .--text-<name> (álneve: .--color-<name>), és .--border-<name> a válogatott szemantikus palettához. Ezek mindegyike rendelkezik komponenshez csatolt álnévmódosítóval is (például -bg-danger bármely .instui-<component> esetén).
cursor	.--cursor-pointer	cursor mint kombinálható, globális osztály — .--cursor-<value> — önállóan vagy bármely komponenshez láncolva használható (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap segédosztályok a térközskálán, rövid (--gap-sm) vagy hosszú (--gap-small) írásmóddal. Használható önmagában vagy bármely komponenshez láncolva (.instui-view.--gap-sm) — a saját gap értéküket komponensspecifikus tokenből beállító komponensek felülbírálhatók.
icon	.instui-icon	Az ikon rendszer: .instui-icon méretezés plusz a megosztott -icon-<name> festő, amely egy glifa maszkot (in currentColor) helyez bármely elem előtt.
layout	.--display-flex	Display és text-align segédosztályok — .--display-<value> és .--text-align-<value> — kombinálható, globális osztályokként, önállóan vagy bármely komponenshez láncolva használhatók.
maskglobal	.--mask-overlay	A(z) mask komponens overlay módosítóinak egy globális, kettős másolata — --mask-overlay, --mask-fullscreen, --mask-blur — önállóan vagy bármely komponenshez láncolva használható, anélkül, hogy .instui-mask elembe kellene csomagolni.
overflow	.--overflow-x-hidden	overflow-x/overflow-y mint kombinálható, globális osztályok — .--overflow-x-<value> / .--overflow-y-<value> — önállóan vagy bármely komponenshez láncolva használhatók.
position	.--position-relative	position mint kombinálható, globális osztály — .--position-<value> — önállóan vagy bármely komponenshez láncolva használható (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Nézőpont- vagy konténerszélesség alapú megjelenítő/elrejtő osztályok egy témázott töréspont-skála mentén.
screen-reader-content	.instui-screen-reader-content	Vizuálisan elrejti a tartalmat, miközben hozzáférhetővé teszi a segítségnyújtó technológia számára (a standard clip minta).
spacing	.--p-md	Margin és padding segédosztályok — .--m<side>-<step> / .--margin-<side>-<step> és .--p<side>-<step> / .--padding-<side>-<step> a térközskálán (oldalak: t/b/s/e/x/y vagy egyik sem, rövid vagy teljesen kiírt hosszú alakban — például a(z) --mb-sm és a(z) --margin-bottom-small ugyanaz a szabály; a margin a(z) auto értéket is elfogadja). Önállóan vagy bármely komponenshez láncolva használható (például class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index mélységi segédosztályok — .--stack-<level> (deepest, below, above, topmost) — önállóan vagy bármely komponenshez láncolva használhatók, így a rétegek kiszámíthatóan illeszkednek egymásra a kézzel beállított értékek helyett.
transition	.instui-transition.-transition-fade-entering	Animációs állapot-osztályok a(z) Transition komponenshez — .instui-transition és állapot-osztályok (-transition-fade-entering, -transition-scale-exited stb.) —, amelyek önállóan vagy bármely komponenshez láncolva használhatók.
truncate	.--truncate	Hárompontos szövegcsonkítás (ellipsis) a(z) --lines által vezérelt sorszám-korlátozással — önállóan vagy bármely komponenshez láncolva használható (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Elrendezés-hibakeresési körvonal: összetett .-with-visual-debug bármely elemhez a doboz és azonnali gyermekeinek körvonalához, így az elrendezés szerkezete azonnal látható.

Szabályok

Név	Osztály	Összegzés
base	*	Az opt-in globális visszaállítás: box-sizing, az oldal felülete, alapszöveg szín és betűtípus, color-scheme, és hivatkozás alapértelmezések.
prose	:where(body)	Tipográfiai alapértelmezések nyers HTML-hez — címsorok, bekezdések, listák, hivatkozások és kódok —, amelyek automatikusan érvényesülnek minden importálás helyén (alapértelmezett: :where(body)); adjon meg options.scope értéket egy másik tartalomgyökér megcélzásához (pl. .vp-doc).

Plugins

Név	Osztály	Összegzés
logos	.logos	Instructure termék logók CSS kép tokenekként: --instui-logo-<product>-<layout>-<mode> egy data-URI SVG-t tartalmaz, így egy logó festődik például background-image: var(--instui-logo-canvas-horizontal-color) -on keresztül.
primitives	.instui-bg-primitive-color-white	Önkéntes segédprogram osztályok a nyers primitív palettához: .instui-bg-/fg-/border-primitive-color-<name> festék egy szín a primitív szín tokenekből, valamint font-family/font-weight segédprogramok a primitív betűtípus tokenekhez. Kihagyva a szemantikus segédprogramokból, így az felülbírálatok ott maradnak csak szemantikus.
visual-debug	.-with-visual-debug	Elrendezés-hibakeresési körvonal: összetett .-with-visual-debug bármely elemhez a doboz és azonnali gyermekeinek körvonalához, így az elrendezés szerkezete azonnal látható.

layout

Név	Osztály	Összegzés
wrapper	body[class~="instui-display-flex"]	Alkalmazáshéj sora: oldalnavigáció, konténer fejléccel és opcionális panel.