Page Layout

Anatomy

<ods-page-layout id="demo-page-layout" outlines>
  <div slot="page-header" ods-layout="p:md" ods-text='headline size:lg semibold'>Page Header Region</div>
  <div ods-layout="p:md" ods-text='headline size:lg semibold'>Content Region</div>
</ods-page-layout>

<style>
  #demo-page-layout::part(base) {
    height: 600px;
  }
</style>

import { OdsPageLayout } from '@ods/components/react.page-layout';

const css = `
  #demo-page-layout::part(base) {
    height: 600px;
  }
`

const Example = () => {
  return (
    <>
      <OdsPageLayout id="demo-page-layout" outlines>
        <div slot="page-header" ods-layout="p:md" ods-text='headline size:lg semibold'>Page Header Region</div>
        <div ods-layout="p:md" ods-text='headline size:lg semibold'>Content Region</div>
      </OdsPageLayout>

      <style>{css}</style>
    </>
  )
}

export default Example;

Application Footer

An Application Footer is provided by detault. You can inject a customized Application Footer using the page-footer slot.

<ods-application-footer>
  <div slot="content-region"><a class="demo-footer-link" ods-text="link" href="/">Service Status</a></div>
</ods-application-footer>

<style>
  .demo-footer-link {
    text-decoration: none;
    color: var(--ods-sys-color-on-surface);
  }

  .demo-footer-link:hover {
    text-decoration: underline;
  }
</style>

import { OdsApplicationFooter } from '@ods/components/react.application-footer';

const css = `
  .demo-footer-link {
    text-decoration: none;
    color: var(--ods-sys-color-on-surface);
  }

  .demo-footer-link:hover {
    text-decoration: underline;
  }
`

const Example = () => {
  return (
    <>
      <OdsApplicationFooter>
        <div slot="content-region"><a className="demo-footer-link" ods-text="link" href="/">Service Status</a></div>
      </OdsApplicationFooter>

      <style>{css}</style>
    </>
  )
};

export default Example;

Associated Components

Parent Page Layout Examples

This parent type layout should be used as the starting page for an application that does not have side navigation.

Child Page Layout Examples

Standard

The Standard layout should be used when you want to drill-down into content. This layout is paired with a Page Header with breadcrumbs and back navigation configured.

Patient Details, Procedure Report Previews and Entry Forms are good examples on content that should use a this type of layout.

Full Screen Mode

Use fullscreen mode when you want to drill-down to content in a page and you would like the User to have complete focus on a task without distractions. Do note however, using fullscreen mode, will prevent the User from being able to access any funtionality in the OLYSENSE Application Bar.

Use the fullscreen attribute to render your page without a Application Bar. The page will be absolutely positioned above the all other content.

Standalone Mode

Use the standalone attribute when using the Page Layout component independently from Shell Layout.

Use the —offset-height CSS Variable to account for the height of any content placed above the page. By default, —offset-height is set to 64px to account for the Application Bar.

Importing

import '@ods/components/web.page-layout';

import { OdsPageLayout } from '@ods/components/react.page-layout';

import { OdsPageLayout } from '@ods/components/react.page-layout';

Usage