Komponenter
HGrid
HGrid er en av våre layout primitives. Den brukes for å fordele elementer horisontalt med lik spacing basert på brekkpunktene våre. Løsningen er basert på CSS-grid.
HGrid har mye til felles med HStack, men sistnevnte bruker Flex layout. Les mer om forskjellen mellom Grid og Flex.
Egnet til:
- Oppbygging av sidelayout
- Gruppering av Cards
Eksempler
Props
HGrid
data-color?
- Type:
(string & {}) | AkselColor
columns?
- Type:
ResponsiveProp<string | number>
- Description:
Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints. Sets
grid-template-columns
, sofr
,minmax
etc. works. - Example:
columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
columns={3}
columns="repeat(3, minmax(0, 1fr))"
gap?
- 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:
Spacing between columns. Accepts a spacing token or an object of spacing tokens for different breakpoints.
- Example:
gap="space-20"
gap="space-32 space-16"
gap={{ sm: "space-8", md: "space-12", lg: "space-20", xl: "space-24"}}
align?
- Type:
"start" | "center" | "end"
- Default:
"null"
- Description:
Vertical alignment of children. Elements will by default stretch to the height of parent-element.
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
asChild?
- Type:
boolean
- Description:
Renders the component and its child as a single element, merging the props of the component with the props of the child.
// Renders
<div data-prop data-child /> ``` @example ```tsx <Component asChild data-prop> <ChildComponent data-child /> </Component>// Renders
<div data-prop data-child /> ``` - Example:
```tsx
<Component asChild data-prop>
<ChildComponent data-child />
</Component>
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs