Porsche Design System

Flyout

Table of Contents

Props
Events
Slots
CSS Variables

Properties

type BreakpointCustomizable<T> = {
  base: T;
  xs?: T;
  s?: T;
  m?: T;
  l?: T;
  xl?: T;
  xxl?: T;
};

Property

Attribute

Description

Type

Default

aria

Sets ARIA attributes on the flyout dialog element for improved screen reader accessibility.

type FlyoutAriaAttribute = {
  'aria-label'?: string;
}

undefined

backdrop

Sets the backdrop style. Use blur when background content is irrelevant; use shading when users still need visual context.

type FlyoutBackdrop =
'blur'
'shading'

'blur'

background

Sets the background color of the flyout panel (canvas or surface).

type FlyoutBackground =
'canvas'
'surface'

'canvas'

disableBackdropClick

disable-backdrop-click

When enabled, clicking the backdrop will not close the flyout.

boolean

false

footerBehavior

footer-behavior

Controls footer behavior. fixed keeps it anchored at the bottom; sticky pins it only when content overflows.

type FlyoutFooterBehavior =
'sticky'
'fixed'

'sticky'

fullscreen 🛠

fullscreen

If true the flyout stretches to the full viewport width with squared corners. Useful for smaller viewports where the flyout would otherwise fill the screen but still show rounded corners.

boolean
BreakpointCustomizable<boolean>

false

open

Controls whether the flyout panel is visible.

boolean

false

position

Sets the side the flyout slides in from — start for left or end for right in LTR layouts.

type FlyoutPosition =
'start'
'end'

'end'

Events

Event

Description

Type

dismiss

Emitted when the user closes the flyout via the close button, backdrop click, or Escape key.

CustomEvent<void>

motionHiddenEnd

Emitted after the flyout's close transition completes and the panel is fully hidden.

type FlyoutMotionHiddenEndEventDetail = TransitionEvent
CustomEvent<FlyoutMotionHiddenEndEventDetail>

motionVisibleEnd

Emitted after the flyout's open transition completes and the panel is fully visible.

type FlyoutMotionVisibleEndEventDetail = TransitionEvent
CustomEvent<FlyoutMotionVisibleEndEventDetail>

Slots

Slot

Description

isRequired

altProp

allowedTagNames

<slot name="header">

Renders a sticky header section above the content area.

<slot>

Default slot for the main content.

<slot name="footer">

Shows a sticky footer section, flowing under the content area when scrollable.

<slot name="sub-footer">

Renders additional content below the footer, such as legal information or FAQs. It appears when the flyout has enough space or when the user scrolls to the end.

CSS Variables

CSS Variable

Description

defaultValue

--p-flyout-width

Width of the flyout.

auto

--p-flyout-sticky-top

@experimental Exposes the header's height as a read-only CSS variable, set automatically by the component. Slotted sticky content can use this value to offset their top position correctly.

--ref-p-flyout-pt

Exposes the internally used padding-top of the Flyout as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the top of the Flyout.

--ref-p-flyout-pb

Exposes the internally used padding-bottom of the Flyout as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the bottom of the Flyout.

--ref-p-flyout-px

Exposes the internally used padding-inline of the Flyout as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the full horizontal size of the Flyout.