Porsche Design System

Flyout

The p-flyout is a overlay from the left or right side of the screen. It is commonly used as a temporary workspace that allows users to complete tasks without navigating to a new page or as a mobile navigation.

It is a controlled component. This grants flexible control over the flyout's behavior especially whether it should stay open after user interaction like submission of a form.

This component sets overflow: hidden on the body when opened in order to prevent background scrolling.

This doesn't work completely reliable under iOS but is the most stable solution.

Feel free to address this issue in an Open Source PR, if you can provide a better solution.

Current implementation

Open Flyout

Some Heading

Some Content

Proceed

Cancel

Some additional Sub-Footer

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-button type="button" aria="{'aria-haspopup': 'dialog'}">
  Open Flyout
</p-button>

<p-flyout aria="{'aria-label': 'Some Heading'}">
  <p-heading slot="header" size="large" tag="h2">
    Some Heading
  </p-heading>
  <p-text>
    Some Content
  </p-text>
  <div slot="footer">
    <p-button type="button">
      Proceed
    </p-button>
    <p-button type="button" variant="secondary">
      Cancel
    </p-button>
  </div>
  <p-text slot="sub-footer">
    Some additional Sub-Footer
  </p-text>
</p-flyout>
<script>
  const pButton = document.querySelector("p-button");
  const pFlyout = document.querySelector("p-flyout");
  pButton.addEventListener('click', () => (pFlyout.open = true));
  pFlyout.addEventListener('dismiss', () => (pFlyout.open = false));
</script>
</body>
</html>

Scroll-lock