Skip to main content

ResponsivePopover

<ui5-responsive-popover> | Since 1.0.0-rc.6

The ui5-responsive-popover acts as a Popover on desktop and tablet, while on phone it acts as a Dialog. The component improves tremendously the user experience on mobile.

Usage​

Use it when you want to make sure that all the content is visible on any device.

ES6 Module Import​

import "@ui5/webcomponents/dist/ResponsivePopover.js";

Basic Sample​

Properties​

accessibleDescription​

DescriptionDefines the accessible description of the component.
Typestring | undefined
Defaultundefined
Since2.11.0

accessibleDescriptionRef​

DescriptionReceives id(or many ids) of the elements that describe the component.
Typestring | undefined
Defaultundefined
Since2.11.0

accessibleName​

DescriptionDefines the accessible name of the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

accessibleNameRef​

DescriptionDefines the IDs of the elements that label the component.
Typestring | undefined
Defaultundefined
Since1.1.0

accessibleRole​

DescriptionAllows setting a custom role.
Type"AlertDialog" | "Dialog" | "None" (value descriptions in: PopupAccessibleRole)
Default"Dialog"
Since1.10.0

allowTargetOverlap​

DescriptionDetermines if there is no enough space, the component can be placed over the target.
Typeboolean
Defaultfalse

headerText​

DescriptionDefines the header text.
Note: If header slot is provided, the headerText is ignored.
Typestring | undefined
Defaultundefined

hideArrow​

DescriptionDetermines whether the component arrow is hidden.
Typeboolean
Defaultfalse
Since1.0.0-rc.15

horizontalAlign​

DescriptionDetermines the horizontal alignment of the component.
Type"Center" | "End" | "Start" | "Stretch" (value descriptions in: PopoverHorizontalAlign)
Default"Center"

initialFocus​

DescriptionDefines the ID of the HTML Element, which will get the initial focus.
Note: If an element with autofocus attribute is added inside the component, initialFocus won't take effect.
Typestring | undefined
Defaultundefined
DescriptionDefines whether the component should close when clicking/tapping outside the popover. If enabled, it blocks any interaction with the background.
Typeboolean
Defaultfalse

open​

DescriptionIndicates if the element is open
Typeboolean
Defaultfalse
Since1.2.0

opener​

DescriptionDefines the ID or DOM Reference of the element at which the popover is shown. When using this attribute in a declarative way, you must only use the id (as a string) of the element at which you want to show the popover. You can only set the opener attribute to a DOM Reference when using JavaScript.
TypeHTMLElement | string | null | undefined
Defaultundefined
Since1.2.0

placement​

DescriptionDetermines on which side the component is placed at.
Type"Bottom" | "End" | "Start" | "Top" (value descriptions in: PopoverPlacement)
Default"End"

preventFocusRestore​

DescriptionDefines if the focus should be returned to the previously focused element, when the popup closes.
Typeboolean
Defaultfalse
Since1.0.0-rc.8

preventInitialFocus​

DescriptionIndicates whether initial focus should be prevented.
Typeboolean
Defaultfalse
Since2.0.0

resizable​

DescriptionDetermines whether the component is resizable. Note: This property is effective only on desktop devices.
Typeboolean
Defaultfalse
Since2.19.0

verticalAlign​

DescriptionDetermines the vertical alignment of the component.
Type"Bottom" | "Center" | "Stretch" | "Top" (value descriptions in: PopoverVerticalAlign)
Default"Center"

Slots​

default​

DescriptionDefines the content of the Popup.
TypeArray<HTMLElement>
DescriptionDefines the footer HTML Element.
TypeArray<HTMLElement>
DescriptionDefines the header HTML Element.
TypeArray<HTMLElement>

Events​

before-close​

DescriptionFired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
TypeCustomEvent<PopupBeforeCloseEventDetail>
ParametersescPressed: boolean
Indicates that ESC key has triggered the event.
BubblesNo
CancelableYes - via preventDefault()

before-open​

DescriptionFired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
TypeCustomEvent
BubblesNo
CancelableYes - via preventDefault()

close​

DescriptionFired after the component is closed.
TypeCustomEvent
BubblesNo
CancelableNo

open​

DescriptionFired after the component is opened.
TypeCustomEvent
BubblesNo
CancelableNo

Methods​

applyFocus​

DescriptionFocuses the element denoted by initialFocus, if provided, or the first focusable element otherwise.
Return typePromise<void>

CSS Parts​

For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.

NameDescription
contentUsed to style the content of the component
footerUsed to style the footer of the component
headerUsed to style the header of the component

CSS Custom States​

No CSS custom states available for this component.

More Samples​

Placement​

You can influence the placement of the popup. Note: if there is not enough space for the popup on the defined side, it will open on the side with enough space.