OLYSENSE Design System

Anatomy

Region Name	Slot	Description
Navigation Region	navigation	The slot used for the navigation content.
Page Header Region	page-header	The slot used for the page header.
Page Footer Region	page-footer	The slot used for the page footer.
Content Region	(default)	The default slot used for the application layout’s content.

Region Name

Slot

Description

Navigation Region

navigation

The slot used for the navigation content.

Page Header Region

page-header

The slot used for the page header.

Page Footer Region

page-footer

The slot used for the page footer.

Content Region

(default)

The default slot used for the application layout’s content.

<ods-navigation-layout id="demo-navigation-layout" outlines>
  <div slot="navigation" ods-layout="p:md" ods-text='headline size:lg semibold'>Navigation Region</div>
  <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-navigation-layout>

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

import { OdsNavigationLayout } from '@ods/components/react.navigation-layout';

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

const Example = () => {
  return (
    <>
      <OdsNavigationLayout id="demo-navigation-layout" outlines>
        <div slot="navigation" ods-layout="p:md" ods-text='headline size:lg semibold'>Navigation Region</div>
        <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>
      </OdsNavigationLayout>

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

export default Example;

A Page Header with the navigation button must be placed in the Page Header Region.

Page Title

Primary Action

<ods-page-header expandContentEnabled>
  <span>
    <ods-icon name="settings"></ods-icon>
    Page Title
  </span>
  <span slot="page-header-actions">
    <ods-button variant='primary'>Primary Action</ods-button>
  </span>
</ods-page-header>

import { OdsPageHeader } from '@ods/components/react.page-header';
import { OdsButton } from '@ods/components/react.button';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsPageHeader expandContentEnabled>
      <span>
        <OdsIcon name="settings" slot='prefix'></OdsIcon>
        Page Title
      </span>
      <span slot="page-header-actions">
        <OdsButton variant='primary'>Primary Action</OdsButton>
      </span>
    </OdsPageHeader>
  )
}

export default Example;

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;

Importing

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

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The default slot used for content.
navigation	The slot used for the navigation content.
page-header	The slot used for the page header content.
page-footer	the slot used to insert an page footer component.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
outlines	boolean	false
standalone	boolean	false
copyrightText copyright-text	string	''

Parts

Name	Description
base	The component's base wrapper.

Usage

Use for applications that have side navigation.
Use a Side Nav component in the Navigation Region.
Use Page Header with Side Navigation Icon variant.
Use Page Layout to build child pages.

Use a left aligned Drawer that conflicts with Side Navigaton.
Use if your application DOES NOT have side navigation.
Use the Navigation Layout component to build content in the Content Region
Use the Shell Layout component to build content in the Content Region

Navigation Layout

Anatomy

Page Header

Application Footer

Associated Components

Examples

Importing

Slots

Properties

Parts

Usage

Do

Dont