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
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.
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 kenyérmorzsa útvonal / elválasztókkal; az utolsó morzsa 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.
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.
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.
menu	.instui-menu	Egy legördülő felület elemek, csoportok és elválasztók közül.
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.
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.
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	Egy kör alakú haladási gyűrű, amelyet egy --value (0–100) egyéni tulajdonság hajt végre.
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.
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.
tabs	.instui-tabs	Egy fülezett panel készlet: egy füllista, kiválasztható fülek és azok panelja.
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.
truncate	.instui-truncate	Egysoros ellipszis csonkítás, vagy többsoros szorítás a --lines segítségével.

Segédosztályok

Név	Osztály	Összegzés
color	.instui-text-danger	Szemantikus szín segédprogramok: .instui-bg-<name>, .instui-text-<name> és .instui-stroke-<name> a kurátori szemantikus palettához.
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	.instui-display-flex	Megjelenítési és szövegigazítási segédprogramok — .instui-display-<value> és .instui-text-align-<value> — összeállítható osztályokként.
mask	.instui-mask	Egy áramlásban lévő fedőréteg, amely kitölti a pozicionált szülőjét és középre helyezi a tartalmát — pl. egy spinner egy kártya felett. Modal esetén előnyzük a natív <dialog> (annak ::backdrop a maszk).
responsive	.instui-hidden-max-md	Válaszmentes láthatóság: .instui-hidden-max-<bp> / -hidden-min-<bp> rejtés a nézőablak szélessége szerint; a -cq- változatok helyette egy .instui-container felső szintű elem szélességére reagálnak. Töréspontok: sm/md/lg/xl.
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	.instui-p-md	Margó és kitöltés segédprogramok — .instui-m<side>-<step> és .instui-p<side>-<step> a távolságskálán (oldalak t/b/s/e/x/y vagy semmi; a margó szintén felveszi a auto-t).
view	.instui-view	A View primitív: egy semleges doboz kulcs-érték módosítókkal a háttérhez, szegélyhez, sugárhoz, árnyékhoz, megjelenítéshez, pozícióhoz, túlcsorduláshoz és kurzorhoz.

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	.pantoken-prose	Tipográfiai alapértelmezések nyers HTML-hez — címsorok, bekezdések, listák, hivatkozások és kód — a .pantoken-prose terjedelem alatt.

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.
stacking	.instui-stack-topmost	z-index mélység segédprogramok: .instui-stack-<level> (deepest, below, above, topmost) beállít z-index -t a --instui-stacking-* skáláról, így a rétegek kiszámíthatóan rakódnak összege a kézzel hangolt számok helyett.
transition	.instui-transition	Animációs CSS belépéshez/kilépéshez: helyezze a .instui-transition -t egy elemre, és kapcsolja ki/be a .-<type>-<state> osztályt (fade, scale, vagy slide-{up,down,left,right} × entering/entered/exiting/exited) a saját JS-ből az animálásához be és ki.
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ó.