JSPM – @workday/canvas-kit-react-page-header@3.0.0-alpha.1

Package Exports

@workday/canvas-kit-react-page-header

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@workday/canvas-kit-react-page-header) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A Canvas component that displays the header of a specific page within a website or application. It is generally used as a sub-header to the main application header (@workday/canvas-kit-react-header).

Installation

yarn add @workday/canvas-kit-react

yarn add @workday/canvas-kit-react-page-header

Usage

import * as React from 'react';
import {PageHeader} from '@workday/canvas-kit-react-page-header';
import {SystemIcon} from '@workday/canvas-kit-react-icon';
import {exportIcon, fullscreenIcon} from '@workday/canvas-system-icons-web';

// No need to set the `color` or `colorHover` prop on SystemIcon here, we'll do it for you

<PageHeader title="Product">
  <a href="#">
    <SystemIcon icon={exportIcon} />
  </a>
  <a href="#">
    <SystemIcon icon={fullscreenIcon} />
  </a>
</PageHeader>

<PageHeader title="Marketing" marketing={true}>
  <a href="#">
    <SystemIcon icon={exportIcon} />
  </a>
  <a href="#">
    <SystemIcon icon={fullscreenIcon} />
  </a>
</PageHeader>

Static Properties

None

Component Props

Required

None

Optional

`title: string`

The title of the page header.

Default: ''

`marketing: boolean`

Use the page header in the marketing context (non-product). In this context, content is centered and the page header is responsive in all three breakpoints.

Defalut: false

`breakpoints: { sm: number, md: number, lg: number }`

A set of breakpoints that specifies where each screen size's minimum window width begins. The page header sets spacing styles based on the size of the screen.

For example, by default a mobile screen size would be from 0 to 767 pixels, a 'sm' screen is from 768 to 991, a 'md' screen is from 992 to 1199 pixels, and a 'lg' screen is 1200 pixels and beyond.

For a non-marketing (default) context, the page header only adjusts its spacing styles up until the 'sm' size breakpoint. In the marketing context, a page header adjusts for spacing in all sizes.

Default: { sm: 768, md: 992, lg: 1200 }

@workday/canvas-kit-react-page-header