OLYSENSE Design System

Anatomy

Region Name	Slot	Description
UI Shell Header	shell-header	Region used to place the Application Bar component.
UI Shell Main	shell-main	Region used to place an application using Application View

Region Name

Slot

Description

UI Shell Header

shell-header

Region used to place the Application Bar component.

UI Shell Main

shell-main

Region used to place an application using Application View

UI Shell Banner Region

UI Shell Header Region

UI Shell Main Region

  <ods-shell-layout id="demo-shell-layout" outlines>
    <div slot="shell-banner" ods-layout="pl:md" ods-text='headline size:lg semibold'>UI Shell Banner Region</div>
    <div slot="shell-header" ods-layout="p:md" ods-text='headline size:lg semibold'>UI Shell Header Region</div>
    <div ods-layout="p:md" ods-text='headline size:lg semibold'>UI Shell Main Region</div>
  </ods-shell-layout>

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

import { OdsShellLayout } from '@ods/components/react.shell-layout';

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

const Example = () => {
  return (
    <>
      <OdsShellLayout id="demo-shell-layout" outlines>
        <div slot="shell-banner" ods-layout="pl:md" ods-text='headline size:lg semibold'>UI Shell Banner Region</div>
        <div slot="shell-header" ods-layout="p:md" ods-text='headline size:lg semibold'>UI Shell Header Region</div>
        <div ods-layout="p:md" ods-text='headline size:lg semibold'>UI Shell Main Region</div>
      </OdsShellLayout>

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

export default Example;

Examples

The Application Shell contains an Application Bar used for branding and cross-platform functionality. Layouts, such as Page and Navigation are placed inside the Content Region of the Shell Layout.

When adopting Module Federation for your application on the OLYSENSE Platform, the Application Shell and Application Bar are managed by the host application. You should use Page Layouts to build Page Views as the starting point for your application.

Importing

import '@ods/components/web.shell-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
shell-header	The slot used to render the shells Application Bar
shell-main	The slot used to render the shells main content or micro application

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	Reflects	Type	Default
outlines		boolean	false

Parts

Name	Description
base	The component's base wrapper.

Use Application Views within the Content Region of the Application Shell
Use the appropriate Application Bar for your application and user type

Shell Layout

Anatomy

Associated Components

Examples

Application Shell

Importing

Slots

Properties

Parts

Usage

Do

Dont