@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
66 lines (65 loc) • 1.99 kB
TypeScript
import React from "react";
import { OverridableComponent } from "../../util";
import { BackgroundColorToken } from "../utilities/types";
import { PageBlock } from "./parts/PageBlock";
export interface PageProps extends React.HTMLAttributes<HTMLElement> {
/**
* Overrides html-tag
* @default "div"
*/
as?: "div" | "body";
/**
* Background color.
* Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
* @default "bg-default"
* @deprecated Use `<Box asChild background="...">` wrapped around `<Page>`.
*/
background?: BackgroundColorToken;
/**
* Allows better positioning of footer
*/
footer?: React.ReactNode;
/**
* Places footer below page-fold
*/
footerPosition?: "belowFold";
/**
* Adds a standardised padding of 4rem between content and footer
* @default "end"
*/
contentBlockPadding?: "end" | "none";
}
interface PageComponentType extends OverridableComponent<PageProps, HTMLElement> {
Block: typeof PageBlock;
}
export declare const PageComponent: OverridableComponent<PageProps, HTMLElement>;
/**
* Page helps with establishing a top-level layout for your page
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
* @see 🏷️ {@link PageProps}
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
*
* @example
* ```jsx
* <Page
* footer={<Page.Block width="xl" gutters />}
* >
* <Page.Block width="xl" gutters />// Header
* <Page.Block width="xl" gutters />// Content
* </Page>
* ```
* @example
* Footer placed below page-fold
* ```jsx
* <Page
* footer={<Page.Block width="xl" gutters />}
* footerPosition="belowFold"
* >
* <Page.Block width="xl" gutters />// Header
* <Page.Block width="xl" gutters />// Content
* </Page>
* ```
*/
declare const Page: PageComponentType;
export default Page;