Page

There are three components we use to build up Nulogy's standard layout: An ApplicationFrame, a Page, and an optional Sidebar.

The Page component wraps the actual content of a page, and provides consistent positioning for the Title and Breadcrumb components. This will be used many times, wrapping each page that gets created.

breadcrumbs

<Breadcrumbs>
      <Link href="/">Home</Link> 
      <Link href="/">Materials</Link>
    </Breadcrumbs>

<Breadcrumbs>
      <Link href="/">Home</Link> 
      <Link href="/">Materials</Link>
    </Breadcrumbs>

title

headerContent

<Button>Edit</Button>

<Button>Edit</Button>

children

Some content.

Some content.

import * as React from "react";
import {
  Page,
  Button,
  Breadcrumbs,
  Link
} from "@nulogy/components";

export default () => {
  return (
    <Page
      breadcrumbs={
        <Breadcrumbs>
          <Link href="/">Home</Link>
          <Link href="/">Materials</Link>
        </Breadcrumbs>
      }
      title="Materials Overview"
      headerContent={<Button>Edit</Button>}
    >
      Some content.
    </Page>
  );
}

import * as React from "react";
import {
  Page,
  Button,
  Breadcrumbs,
  Link
} from "@nulogy/components";

export default () => {
  return (
    <Page
      breadcrumbs={
        <Breadcrumbs>
          <Link href="/">Home</Link>
          <Link href="/">Materials</Link>
        </Breadcrumbs>
      }
      title="Materials Overview"
      headerContent={<Button>Edit</Button>}
    >
      Some content.
    </Page>
  );
}

Props

Name	Type	Description
breadcrumbs	react node	Breadcrumbs that display above the page title.
title	string	The title of the page.
headerContent	react node	Optional, additional content to display next to the title
children	react node	Page content.

Page

Props

Related Components