@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
58 lines (57 loc) • 2.02 kB
TypeScript
import React from "react";
import { OverridableComponent } from "../../util";
import { PrimitiveProps } from "../base/BasePrimitive";
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
import { ResponsiveProp, SpacingScale } from "../utilities/types";
export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
/**
* Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
* Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
* @example
* columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
* columns={3}
* columns="repeat(3, minmax(0, 1fr))"
*/
columns?: ResponsiveProp<number | string>;
/**
* Spacing between columns.
* 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-20"
* gap="space-32 space-16"
* gap={{ sm: "space-8", md: "space-12", lg: "space-20", xl: "space-24"}}
*/
gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
/**
* Vertical alignment of children. Elements will by default stretch to the height of parent-element.
*/
align?: "start" | "center" | "end";
} & PrimitiveProps & PrimitiveAsChildProps;
/**
* Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hgrid)
* @see 🏷️ {@link HGridProps}
*
* @example
* <HGrid gap="6" columns={3}>
* <div />
* <div />
* <div />
* </HGrid>
* @example
* <HGrid gap={{xs: "2", md: "6"}} columns={3}>
* <div />
* <div />
* <div />
* </HGrid>
* @example
* <HGrid gap="6" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
* <div />
* <div />
* <div />
* </HGrid>
*/
export declare const HGrid: OverridableComponent<HGridProps, HTMLDivElement>;
export default HGrid;