ObjectPage.mdx

import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components'; import { Canvas, Description, Markdown, Meta } from '@storybook/addon-docs/blocks'; import * as ComponentStories from './ObjectPage.stories'; import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; import { ObjectPageTitle } from '../ObjectPageTitle'; import { ObjectPageHeader } from '../ObjectPageHeader'; import { ObjectPageSection } from '../ObjectPageSection'; import { ObjectPageSubSection } from '../ObjectPageSubSection'; import { CodeBlock } from '@sb/components/DomRefTable'; import { MessageStrip } from '@ui5/webcomponents-react';

<DocsHeader of={ComponentStories} subComponents={['ObjectPageTitle', 'ObjectPageHeader', 'ObjectPageSection', 'ObjectPageSubSection']} />

<MessageStrip hideCloseButton children={'In iframes, smooth scrolling is disabled!'} />

Example

Properties

Methods

This component exposes public methods. You can use them directly on the instance of the component, e.g. by using React Refs.

Name	Parameters	Description
toggleHeaderArea ( snapped ? : boolean ) : void	snapped Defines if the header should be snapped or expanded. If the argument is not provided, the header is toggled.	Toggles the `headerArea` of the `ObjectPage`.

ObjectPage with IllustratedMessage (UnableToLoad) placeholder

ObjectPageSection with hidden titleText and custom header

TabBar ObjectPage with fullscreen section

To render a single section in fullscreen mode, set its height to 100%.

Note: This is only supported for sections in TabBar mode! Using multiple sections with height: 100%; on the same page will most probably break your layout.

Example section

<ObjectPageSection titleText="Section with Overflow" id="section3" style={{ height: '100%', overflow: 'auto' }}>
  <div style={{ height: '300%', background: 'lightyellow' }} />
</ObjectPageSection>

ObjectPage with single section

When only a single section is available, the tabbar is hidden.

Opening popover components by pressing an action

Please see the Docs of the Toolbar component.

Legacy Toolbar Support

The ObjectPage still supports the old (React-only) Toolbar implementation. Please only use this toolbar if your app is dependent on some features the Toolbar web component is currently not offering. Also, when using the legacy Toolbar there are some things to consider that work out of the box with the recommended Toolbar:

• To correctly align the actions to the end, use a legacy ToolbarSpacer as first child of the Toolbar.
• Toggling the headerArea by clicking on the empty space inside the legacy Toolbar has to be implemented on app side now. Please make sure to add the data-in-object-page-title prop to the toolbars, as otherwise the click event isn't fired. You can see an example of how to achieve this behavior below.

Code

Show Code

import { useRef } from 'react';
import { Toolbar as LegacyToolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';
import { ToolbarSpacer as LegacyToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js';
import { Button, ButtonDesign, ObjectPage, ObjectPageSection, ObjectPageTitle } from '@ui5/webcomponents-react';
import type { ObjectPageDomRef } from '@ui5/webcomponents-react';

function ObjectPageWithLegacyToolbar(props) {
  const objectPageRef = useRef<ObjectPageDomRef>(null);
  const handleToolbarClick = (e) => {
    if (e.target.dataset.componentName === 'ToolbarContent') {
      objectPageRef.current.toggleHeaderArea();
    }
  };
  return (
    <ObjectPage
      {...props}
      ref={objectPageRef}
      titleArea={
        <ObjectPageTitle
          header="Legacy Toolbar Support"
          subHeader="actions and navigation actions are rendered inside the legacy Toolbar component"
          actionsBar={
            <LegacyToolbar
              design="Transparent"
              toolbarStyle="Clear"
              onClick={handleToolbarClick}
              data-in-object-page-title
            >
              <LegacyToolbarSpacer />
              <Button design={ButtonDesign.Emphasized}>Primary Action</Button>
              <Button design={ButtonDesign.Transparent}>Action</Button>
            </LegacyToolbar>
          }
          navigationBar={
            <LegacyToolbar
              design="Transparent"
              toolbarStyle="Clear"
              onClick={handleToolbarClick}
              data-in-object-page-title
            >
              <LegacyToolbarSpacer />
              <Button icon={'full-screen'} design={ButtonDesign.Transparent} />
              <Button icon={'exit-full-screen'} design={ButtonDesign.Transparent} />
              <Button icon={'decline'} design={ButtonDesign.Transparent} />
            </LegacyToolbar>
          }
        />
      }
    >
      <ObjectPageSection titleText="Section 1" id="opSection1">
        <div style={{ height: '300px', width: '100%', background: 'lightblue' }}>Section 1 Content</div>
      </ObjectPageSection>
      <ObjectPageSection titleText="Section 2" id="opSection2">
        <div style={{ height: '200px', width: '100%', background: 'lightblue' }}>Section 2 Content</div>
      </ObjectPageSection>
      <ObjectPageSection titleText="Section 3" id="opSection3">
        <div style={{ height: '500px', width: '100%', background: 'lightblue' }}>Section 3 Content</div>
      </ObjectPageSection>
    </ObjectPage>
  );
}

{SubcomponentsSection}

ObjectPageTitle

ObjectPageHeader

ObjectPageSection

ObjectPageSubSection