Flyout Table of Contents

• Props
• Events
• Slots
• CSS Variables

PropertiesPropertyAttributeDescriptionTypeDefaultaria ariaAdd ARIA attributes.type FlyoutAriaAttribute = {
  'aria-label'?: string;
}undefinedbackdrop backdropDefines the backdrop, 'blur' (should be used when the underlying content is not relevant for users) and 'shading' (should be used when the user still needs a visual connection to the underlying content).type FlyoutBackdrop =
'blur'
'shading''blur'disableBackdropClick disable-backdrop-clickIf true, the flyout will not be closable via backdrop click.booleanfalsefooterBehavior footer-behaviorDetermines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.type FlyoutFooterBehavior =
'sticky'
'fixed''sticky'open openIf true, the flyout is open.booleanfalseposition positionThe position of the flyouttype FlyoutPosition =
'start'
'end'
'left' 🚫
'right' 🚫'end'theme themeAdapts the flyout color depending on the theme.type Theme =
'light'
'dark'
'auto''light'EventsEventDescriptionTypedismiss Emitted when the component requests to be dismissed.CustomEvent<void>motionHiddenEnd Emitted when the flyout is closed and the transition is finished.type FlyoutMotionHiddenEndEventDetail = TransitionEvent
CustomEvent<FlyoutMotionHiddenEndEventDetail>motionVisibleEnd Emitted when the flyout is opened and the transition is finished.type FlyoutMotionVisibleEndEventDetail = TransitionEvent
CustomEvent<FlyoutMotionVisibleEndEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<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"> Shows a sub-footer section to display additional information below the footer. This slot is ideal for less critical content, such as legal information or FAQs, which provides further details to the user. It appears when scrolling to the end of the flyout or when there is available space to accommodate the content.CSS VariablesCSS VariableDescriptiondefaultValue--p-flyout-width Width of the flyout.auto--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-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.