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
HGrid, Box, HStack, VStack og Stack støtter også asChild
-API-et. Det kan brukes til å slå sammen DOM-noder. 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.
BasePrimitiveType
padding?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
paddingInline?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
paddingBlock?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
margin?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
marginInline?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 478 more ... | "32 auto">
- Description:
- Example:
marginBlock?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 478 more ... | "32 auto">
- Description:
- Example:
width?
- Type:
ResponsiveProp<string>
- Description:
minWidth?
- Type:
ResponsiveProp<string>
- Description:
maxWidth?
- Type:
ResponsiveProp<string>
- Description:
height?
- Type:
ResponsiveProp<string>
- Description:
minHeight?
- Type:
ResponsiveProp<string>
- Description:
maxHeight?
- Type:
ResponsiveProp<string>
- Description:
position?
- Type:
ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">
- Description:
inset?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
top?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
right?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
bottom?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
left?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
overflow?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
overflowX?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
overflowY?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
flexBasis?
- Type:
ResponsiveProp<string>
- Description:
flexShrink?
- Type:
ResponsiveProp<string>
- Description:
flexGrow?
- Type:
ResponsiveProp<string>
- Description:
gridColumn?
- Type:
ResponsiveProp<string>
- Description: