#PageWithHeader

#Import

import { PageWithHeader } from 'bumbag';

#Usage

The <PageWithHeader> component enables you to build a page layout with a header.

Provide your header component to the header prop, and the rest of your page as children.

Hello world

#Sticky headers

To make your header sticky, add the sticky prop.

<PageWithHeader
sticky
header={
<TopNav>
<TopNav.Section>
<TopNav.Item href="https://bumbag.style" fontWeight="semibold">
<Image src="/logo.png" height="44px" />
</TopNav.Item>
<TopNav.Item href="#">Get started</TopNav.Item>
<TopNav.Item href="#">Components</TopNav.Item>
</TopNav.Section>
<TopNav.Section marginRight="major-2">
<TopNav.Item>
<Button variant="ghost" palette="primary">Sign up</Button>
</TopNav.Item>
<TopNav.Item>
<Button palette="primary">Login</Button>
</TopNav.Item>
</TopNav.Section>
</TopNav>
}
border="default"
overrides={{ PageWithHeader: { styles: { base: { minHeight: 'unset' } } } }}
>
<Box padding="major-2">Hello world</Box>
</PageWithHeader>

#Toggling the header

You can toggle the header with your own component using the <PageWithHeader.Disclosure> component.

Or you can use the usePage hook.

#Header height

You can alter the height of the header with the headerHeight prop.

Hello world

#Props

#PageWithHeader Props

defaultIsVisible boolean

Indicates if the header is visible initially.

header Required

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the header component.

headerHeight string

Sets the height of the header component.

sticky boolean

Makes the header stick to the top of the page.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#PageWithHeader.Disclosure Props

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Copyright © 2020 Jake Moxey