OLYSENSE Design System

<div class="application-switcher-demo">
  <ods-application-user-menu
      id="user-menu"
      trigger-label="Dr. Jill Lopez M.D."
      headline="Dr. Jill Lopez M.D."
      subline="Gastroenterologist"
      language="English">
    </ods-application-user-menu>
</div>

<style>
  .application-switcher-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ods-sys-color-accent);
    width: 200px;
    height: 64px;
  }
</style>

<script>
  const menu = document.querySelector(`#user-menu`);
  menu.languages = [
    {
      label: 'English',
      description: 'English'
    },
    {
      label: 'Deutsch',
      description: 'Germany'
    },
    {
      label: 'Español',
      description: 'Spain'
    },
    {
      label: 'Français',
      description: 'France'
    }
  ]
</script>

import { OdsApplicationUserMenu } from '@ods/components/react.application-user-menu';

const css = `
  /* Only used for documentation */
  .application-user-menu-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ods-sys-color-accent);
    width: 200px;
    height: 64px;
  }
`;

const Example = () => {
  const onOdsSelectHandler = (event: any) => {
    console.log("In onOdsSelectHandler", event);
  }

  return (
    <>
      <div className="application-user-menu-demo">
        <OdsApplicationUserMenu
          id="user-menu"
          onOdsSelect={onOdsSelectHandler}
          triggerLabel="Dr. Jill Lopez M.D."
          headline="Dr. Jill Lopez M.D."
          subline="Gastroenterologist"
          language="English"
          languages={
            [
              {
                label: 'English',
                description: 'English'
              },
              {
                label: 'Deutsch',
                description: 'Germany'
              },
              {
                label: 'Español',
                description: 'Spain'
              },
              {
                label: 'Français',
                description: 'France'
              }
            ]
          } />
      </div>

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

  )
};

export default Example;

Importing

import '@ods/components/web.application-user-menu';

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)	Content area used to place the application Application User Menu content.

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
languages	Languages[]	[]
triggerLabel trigger-label	string	''
headline	string	''
subline	string	''
language	string	'English'
languageMenuLabel language-menu-label	string	'Language'
logoutMenuLabel logout-menu-label	string	'Logout'

Events

React Event	Description	Event Detail
ods-select	Emitted when a menu item is selected.	--

Parts

Name	Description
base	The component's base wrapper.
app-user-menu-content	The container that wraps the contents of the Application User Menu.

Application User Menu

Examples

Basic

Importing

Slots

Properties

Events

Parts