@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
51 lines (50 loc) • 1.88 kB
TypeScript
import { HTMLAttributes } from "react";
import { OverridableComponent } from "../../util/types";
import { PrimitiveProps } from "../base/BasePrimitive";
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
import { ResponsiveProp, SpacingScale } from "../utilities/types";
export type StackProps = HTMLAttributes<HTMLDivElement> & {
/**
* CSS `justify-content` property.
*
* @example
* justify='center'
* justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
*/
justify?: ResponsiveProp<"start" | "center" | "end" | "space-around" | "space-between" | "space-evenly">;
/**
* CSS `align-items` property.
* @default "stretch"
*
* @example
* align='center'
* align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
*/
align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
/**
* Sets the CSS `flex-wrap` property.
*/
wrap?: boolean;
/**
* CSS `gap` property.
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
* or an object of spacing tokens for different breakpoints.
*
* @example
* gap='space-16'
* gap='space-32 space-16'
* gap={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
*/
gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
/**
* CSS `flex-direction` property.
* @default "row"
*
* @example
* direction='row'
* direction={{xs: 'row', sm: 'column'}}
*/
direction?: ResponsiveProp<"row" | "column" | "row-reverse" | "column-reverse">;
} & PrimitiveProps & PrimitiveAsChildProps;
export declare const Stack: OverridableComponent<StackProps, HTMLDivElement>;
export default Stack;