pantoken / web-components
web-components
Alfa
@pantoken/web-components — keretrendszer-agnosztikus egyéni elemek az Instructure felhasználói felületéhez.
Regisztrál <instui-icon>-t (@pantoken/icons-ból származó glifák) plusz egy sor token-stílusú elemet, amely felöleli a @pantoken/components CSS-t: <instui-button>, <instui-alert>, <instui-badge>, <instui-pill>, <instui-tag>, <instui-avatar>, <instui-spinner>, <instui-progress>, <instui-progress-circle>, <instui-metric>, <instui-rating>, <instui-icon-button>, <instui-toggle-button>, <instui-truncate>, <instui-img>, <instui-side-nav-bar>, <instui-tree-browser>, és <instui-tooltip>, valamint a viselkedési elemek <instui-modal> (egy valódi <dialog> annak open attribútuma által vezérelve), az eredeti popoverek <instui-context-view>, <instui-popover>, és <instui-tray>, <instui-in-place-edit> (egy kattintás-szerkesztésre alkalmas mező, amely az Enter/homályosulás-nál véglegesít és az Escape-nél visszavonatkozik), <instui-drilldown> (egy állapottal rendelkező többszintű menü), <instui-pages> (egy panel egyszerre történő navigáció a View Transitions API-n keresztül), <instui-drawer-layout> (egy összecsukható, húzással átméretezhető oldalsó panel), az interaktív <instui-calendar> (egy hónap rácsa, amely az Invoker Commands API-val navigálható), valamint a választók <instui-date-input> és <instui-date-time-input> (egy mező plusz egy naptár-legördülő popover). Mindegyik megjeleníti az egyező .instui-* jelölést az árnyék gyökerébe az inlined komponens stíluslappal inlined, így a megjelenés pontosan @pantoken/components semmi mást nem kell importálnod, csak ezt a modult. A tokenek örökített egyéni tulajdonságok, ezért átfúrják az árnyék határát — töltsd be @pantoken/css-t (vagy bármilyen pantoken token lapot) a dokumentumban, hogy színezd őket. A magasság skála (--instui-elevation-*) és fókusz-körvonal (--instui-focus-outline-*) egyéni tulajdonságok szintén a token lapban szállítódnak, ezért az árnyékok és fókusz gyűrűk ugyanabból a lapból oldódnak meg, mint az színek — nincs szükség extra injektálásra. (Az ikonokat megjelenítő elemek, például <instui-alert>, ugyanúgy olvassák --instui-icon-* glifia token tulajdonságait; a lean token lap kihagyja a teljes ikon készletet, ezért párosítsd ezt @pantoken/components/component-icons.css-gyel, vagy töltsd be a teljes token lapot.)
A modul Node-biztos: az elemek osztályai a register belsejében vannak meghatározva, amely egy no-op, ha nincs DOM, ezért ennek a csomagnak az importálása SSR-ek vagy build során soha nem érinti a HTMLElement.
Mindegyik elem a saját dokumentált fájljában él a elements/ alatt, exportálva egy ElementDefinition; a elements/index.ts regisztrációs sorrendben sorolja fel őket mint DEFINITIONS. A register egy előtag-tudatos RegisterContext épít fel és kezeli azt minden definíciónak.
Interfészek
Változók
- alert
- avatar
- badge
- button
- calendar
- contextView
- dateInput
- dateTimeInput
- drawerLayout
- drilldown
- iconButton
- icon
- img
- inPlaceEdit
- DEFINITIONS
- metric
- modal
- pages
- pill
- popover
- progressCircle
- progress
- rating
- sideNavBar
- spinner
- tag
- toggleButton
- tooltip
- tray
- treeBrowser
- truncate
- DEFAULT_PREFIX
- ELEMENTS