Magyar

English

Magyar

English

Téma kiválasztása

Megjelenés

pantoken / components

components ​

Béta

@pantoken/components — egy InstUI-kinézetű CSS komponenskönyvtár, a --instui-* tokenekből felépítve.

A szállított stíluslapok:

  • Base (baseCss) — opt-in globális dokumentum alapbeállítások a tokenekből (box-sizing, body reset, oldal háttere, alapértelmezett szövegszín/betűtípus, color-scheme). Az elérhető fókusz-körvonalas gyűrűt is magában hordozza, így minden fókuszálható elem azonnal megkapja az :focus-visible körvonalat. Akkor töltsd be, amikor a pantoken tulajdonában van az oldal.
  • Prose (proseCss) — megjelenített markdown/prózai HTML formázása (táblázatok, fejlécek, linkek, listák, kód) egy tartalomgyökhöz kötve, így egy dokumentációs oldal vagy tartalomi régió InstUI-nak néz ki anélkül, hogy a DOM-ot komponensekre cserélnénk. Ez az, amit a webhely-megjelenítők szállítanak a components.css részeként.
  • Components (buttonCss, alertCss, badgeCss, összesítve a componentsCss) — osztályalapú komponens-stílusok, amelyeket saját jelöléséhez alkalmazol (<button class="instui-button">), az InstUI-kinézet egy komponens-keretrendszer nélkül. A --instui-elevation-* árnyék-skála (elevationCss) vezeti ezt a lapot, mivel elég sok komponens lebeg ahhoz, hogy az árnyékok belső tervezési jellemzők legyenek, nem pedig utólagos kiegészítés.
  • Utilities (viewCss, spacingUtilitiesCss, layoutUtilitiesCss, valamint egy válogatott szemantikus-szín/token-készlet) — egy opt-in réteg a közös osztályokhoz. Az általános token→class emitterek (colorUtilitiesCss, tokenUtilitiesCss) az @pantoken/utils helyen vannak; ez a csomag a válogatott szemantikus neveket táplálja nekik, míg @pantoken/plugin-primitives a nyers palettát táplálja.
  • Fonts (opt-in fonts.css) — a @font-face szabályok az Instructure márkaáramhoz. Base alkalmazza a betűtípust; fonts.css betölti a woff2 fájlokat, így a szöveg kecsesen degradálódik anélkül.

Minden tiszta CSS a token IR-ből, így az InstUI-t a tokeneken keresztül követi az InstUI React-csomagokra való függőség nélkül. A valódi, interaktív komponensekhez használd @pantoken/react-markdown (tartalom) vagy @instructure/ui-* (alkalmazások).

Ez a modul egy hordó: minden dokumentált rekord a saját fájljában él az components//utilities//rules//declarations/ alatt, a lib/ compose API-val létrehozva. A nyilvántartások (COMPONENTS/UTILITIES/RULES/DECLARATIONS) irányítják az összesítést és a paritás-tesztet.

Interfészek ​

Változók ​

Függvények ​