pantoken / components

components ​

Բետա

@pantoken/components — InstUI տեսքի CSS կոմպոնենտների գրադարան, կառուցված --instui-* տոկեններից.

Առաքվող stylesheet-ները՝

  • Base (baseCss) — տոկեններից ըստ ուզմանի տրվող գլոբալ փաստաթղթային կանխ որոշումներ (box-sizing, body reset, էջի մակերես, հիմնական տեքստի գույն/տառատեսակ, color-scheme). Այն նաեւ պարունակում է focus-outline օղակը, այնպես որ յուրաքանչյուր ֆոկուս հնարավոր տարրը ստանում է հասանելի :focus-visible outline`-ը անմիջապես: Բեռնեք այն, երբ pantoken-ն է վերահսկում էջը։
  • Prose (proseCss) — markdown/prose HTML (աղյուսակներ, վերնագրեր, հղումներ, բացթողումներ, կոդ) արտացոլող ոճեր՝ պարունակության արմատին սահմանափակված, որպեսզի փաստաթղթի էջը կամ բովանդակային բաժինը նայվի որպես InstUI առանց DOM-ը փոխարինելու կոմպոնենտներով։ Սա է, ինչը կայքի renderer-ները առաքում են որպես իրենց components.css։
  • Components (buttonCss, alertCss, badgeCss, համակարգված componentsCss) — դաս-դիմացված կոմպոնենտային ոճեր, որոնք կիրառվում են ձեր սեփական markup-ի վրա (<button class="instui-button">), InstUI տեսքին դուրս կոմպոնենտային ֆրեյմվորկից։ --instui-elevation-*-ի ստվերի մասշտաբը (elevationCss) գլխավորում է այս թերթիկը, քանի որ բավական թվով կոմպոնենտներ 'թռչող' են և ստվերները դառնում են դիզայների ստանդարտ հատկություն, ոչ հավելում։
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, և ընտրյալ սեմանտիկ-գույն/տոկեն հավաքածու) — բաշխվող դասերի ընտրովի շերտ։ Ընդհանուր token→class արտահանողները (colorUtilitiesCss, tokenUtilitiesCss) գտնվում են @pantoken/utils; այս package-ը սնուցում է նրանց ընտրյալ սեմանտիկ անուններով, իսկ @pantoken/plugin-primitives-ն՝ հում գունապալիտրաով։
  • Fonts (ընտրովի fonts.css) — Instructure բրենդի տառատեսակների համար @font-face կանոնները։ Base-ը կիրառում է տառատեսակը; fonts.css բեռնում է woff2 ֆայլերը, այնպես որ տեքստը Gracefully կորցնում է տեսքը առանց դրանց։

Ամբողջը մաքուր CSS է, նախագահված տոկենների IR-ից, ուստի հետևում է InstUI-ին տոկենների միջոցովառանց կախվածության InstUI React փաթեթներից։ Իրական, ինտերակտիվ կոմպոնենտների համար օգտագործեք@pantoken/react-markdown(content) կամ@instructure/ui-*` (apps).

Այս մոդուլը barrel է՝ յուրաքանչյուր փաստաթղացված գրառում ապրում է իր ֆայլում՝ components//utilities//rules//declarations/ տակ, հեղինակված lib/ compose API-ով։ Ռեգիստրները (COMPONENTS/UTILITIES/RULES/DECLARATIONS) վարում են ագրեգացիան + parity թեստը։

Ինտերֆեյսներ ​

Փոփոխականներ ​

Ֆունկցիաներ ​