Inline Panel Layout

Anatomy

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

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

import { OdsInlinePanelLayout } from '@ods/components/react.inline-panel-layout';

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

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

      <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

Examples

Standard

Showing Inline Panel Layout paired with a Page Header with breadcrumbs and back navigation configured. Additionally, the Inline Panel component should be used within the Sidebar Region.

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.

When in standlone mode, you will have to adjust the offset height of the layout and the inline panel.

• 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.
• Use the —inline-panel-offset-height CSS Variable to account for the height of any content placed above the page that impacts the height of the inline panel regions. By default, —inline-panel-offset-height is set to 64px.

Importing

import '@ods/components/web.inline-panel-layout';

import { OdsInlinePanelLayout } from '@ods/components/react.inline-panel-layout';

import { OdsInlinePanelLayout } from '@ods/components/react.inline-panel-layout';

Usage