Primitives gjør det enklere å bygge layout som følger de samme konseptene og brekkpunktene, uten å måtte skrive noe egen CSS. Dette gjør det lettere å bygge responsive løsninger som fungerer likt på tvers av ulike apper.

Komponenter

Page

Page lar deg bygge opp top-level layout for appen din. Dette inkluderer plassering av footer, maksbredde og sentrering av innhold. Enkle layouts, men også de fleste ekspertsystemer, vil kunne bruke komponenten som startpunkt.

HGrid

HGrid brukes til å organisere innhold i kolonner. Den har et scopet API for CSS grid layout med støtte for responsivitet basert på brekkpunktene våre. Vi støtter bare horisontal layout med grid-template-columns.

Stack

Brukes for å organisere innhold i én dimensjon. Den har et scopet API for CSS flexbox med støtte for responsivitet basert på brekkpunktene våre.

Box

Box brukes primært som byggestein for andre komponenter, med støtte for background, border, borderRadius og shadow.

Show/Hide

Show og Hide lar deg vise eller skjule elementer på ulike skjermbredder. De tilbyr et API der innhold blir satt til display: none basert på brekkpunktene våre.

Bleed

Bleed lar deg legge til negativ horisontal og vertikal margin på innhold.

ResponsiveProp

En av grunnpilarene til våre layout primitives er typen ResponsiveProp. Typen gjør det mulig å sette prop-verdien basert på brekkpunkt. Dette lar deg eksempelvis endre gap basert på skjermbredde:

AsChild

Alle primitives unntatt Page støtter også asChild-API-et. Det kan brukes til å slå sammen DOM-noder. Klasser, stiler og event-handlers slås da sammen. Dette kan være nyttig for å forenkle DOM-en, men gjør det også mulig å løse noe layout enklere. For at dette skal fungere må child kunne ta inn className og style som props.

BasePrimitive

Komponentene HGrid, Box, HStack, VStack og Stack arver fra en base-type som har de mest brukte størrelses- og posisjons-attributtene i CSS. I props som har med avstander å gjøre, må du bruke verdier basert på tokens fra Aksel. F.eks. padding="4" gir --a-spacing-4 som tilsvarer 1rem.