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) — opcionális globális dokumentum-alapértelmezések a tokenekből (box-sizing, body reset, oldalfelület, alapértelmezett szövegszín/betűtípus, color-scheme). Emellett tartalmazza a focus-outline gyűrűt is, így minden fókuszálható elem alapból egy akadálymentes :focus-visible körvonalat kap. Akkor töltse be, amikor a pantoken birtokolja az oldalt.
  • Prose (proseCss) — a megjelenített markdown/próza HTML-t formázza (táblázatok, címsorok, hivatkozások, listák, kód) egy tartalomgyökérre korlátozva, így egy dokumentációs oldal vagy tartalomterület úgy néz ki, mint az InstUI, anélkül, hogy a DOM-ot komponensekre cserélnénk. Az oldalrenderelők ezt biztosítják saját components.css-ként.
  • Components (buttonCss, alertCss, badgeCss, a componentsCss által összesítve) — osztályalapú komponensstílusok, amelyeket a saját jelölőkódra lehet alkalmazni (<button class="instui-button">), az InstUI megjelenéshez komponens-keretrendszeren kívül is. A(z) --instui-elevation-* árnyékskála (elevationCss) vezeti ezt a stíluslapot, mivel elegendő komponens lebeg ahhoz, hogy az árnyékok szerves tervezési attribútumok legyenek, nem pedig kiegészítők.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, valamint egy válogatott szemantikus szín-/tokenszett) — a keresztirányú (cross-cutting) osztályok opcionális rétege. Az általános token→osztály kibocsátók (colorUtilitiesCss, tokenUtilitiesCss) a(z) @pantoken/utils csomagban találhatók; ez a csomag a válogatott szemantikai neveket biztosítja számukra, míg a(z) @pantoken/plugin-primitives a nyers palettát adja.
  • Fonts (opcionális fonts.css) — a(z) @font-face szabályok az Instructure márka betűtípusaihoz. A Base alkalmazza a betűtípust; a(z) fonts.css betölti a woff2 fájlokat, így a szöveg nélküle is kecsesen visszaesik az alapértelmezett betűtípusra.

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 ​