Grunnleggende
Layout primitives
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:
type ResponsiveProp<T> = T | { [Breakpoint in "xs" | "sm" | "md" | "lg" | "xl" | "2xl"]?: T;};
// Statisk gap<HStack gap="4"> ...</HStack>
// Dynamisk gap<HStack gap={{xs: "2", md: "4"}}> ...</HStack>
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.
// React<Box asChild background="..."> <HStack gap="4"> <div /> <div /> </HStack></Box>
// HTML output<div class="box hstack"> <div /> <div /></div>
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<SpacingScale>
- Description:
Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
- Example:
padding='space-16'
padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
paddingInline?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128">
- Description:
Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
- Example:
paddingInline='space-16'
paddingInline='space-16 space-20'
paddingInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
paddingBlock?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128">
- Description:
Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
- Example:
paddingBlock='space-16'
paddingBlock='space-16 space-20'
paddingBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
margin?
- Type:
ResponsiveProp<SpacingScale>
- Description:
Margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
- Example:
margin='space-16'
margin={{xs: '0', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
marginInline?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 more ... | "space-128 auto">
- Description:
Horizontal margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
- Example:
marginInline='space-16'
marginInline='space-16 space-20'
marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
marginBlock?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 more ... | "space-128 auto">
- Description:
Vertical margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.
- Example:
marginBlock='space-16'
marginBlock='space-16 space-20'
marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
width?
- Type:
ResponsiveProp<string>
- Description:
CSS
width
minWidth?
- Type:
ResponsiveProp<string>
- Description:
CSS
min-width
maxWidth?
- Type:
ResponsiveProp<string>
- Description:
CSS
max-width
height?
- Type:
ResponsiveProp<string>
- Description:
CSS
height
minHeight?
- Type:
ResponsiveProp<string>
- Description:
CSS
min-height
maxHeight?
- Type:
ResponsiveProp<string>
- Description:
CSS
max-height
position?
- Type:
ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">
- Description:
CSS
position
inset?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128">
- Description:
CSS
inset
. Accepts a spacing token or an object of spacing tokens for different breakpoints. - Example:
inset='space-16'
inset='space-16 space-20'
inset={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
top?
- Type:
ResponsiveProp<SpacingScale>
- Description:
CSS
top
Accepts a spacing token or an object of spacing tokens for different breakpoints. - Example:
top='space-16'
top={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
right?
- Type:
ResponsiveProp<SpacingScale>
- Description:
CSS
right
Accepts a spacing token or an object of spacing tokens for different breakpoints. - Example:
right='space-16'
right={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
bottom?
- Type:
ResponsiveProp<SpacingScale>
- Description:
CSS
bottom
Accepts a spacing token or an object of spacing tokens for different breakpoints. - Example:
bottom='space-16'
bottom={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
left?
- Type:
ResponsiveProp<SpacingScale>
- Description:
CSS
left
Accepts a spacing token or an object of spacing tokens for different breakpoints. - Example:
left='space-16'
left={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
overflow?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
CSS
overflow
overflowX?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
CSS
overflow-x
overflowY?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
CSS
overflow-y
flexBasis?
- Type:
ResponsiveProp<string>
- Description:
CSS
flex-basis
flexShrink?
- Type:
ResponsiveProp<string>
- Description:
CSS
flex-shrink
flexGrow?
- Type:
ResponsiveProp<string>
- Description:
CSS
flex-grow
gridColumn?
- Type:
ResponsiveProp<string>
- Description:
CSS
grid-column