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.
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​
Download Open in Playground Edit
Properties​
Description Defines the header text.Note: If header
slot is provided, the headerText
is ignored. Type string | undefined
Default undefined
placement​
Description Determines on which side the component is placed at. Type "Start" | "End" | "Top" | "Bottom"
Default "End"
horizontalAlign​
Description Determines the horizontal alignment of the component. Type "Center" | "Start" | "End" | "Stretch"
Default "Center"
verticalAlign​
Description Determines the vertical alignment of the component. Type "Center" | "Top" | "Bottom" | "Stretch"
Default "Center"
Description Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background. Type boolean
Default false
hideArrow​
Description Determines whether the component arrow is hidden. Type boolean
Default false Since 1.0.0-rc.15
allowTargetOverlap​
Description Determines if there is no enough space, the component can be placed over the target. Type boolean
Default false
Description Defines 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. Type HTMLElement | string | undefined
Default undefined Since 1.2.0
initialFocus​
Description Defines 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. Type string | undefined
Default undefined
preventFocusRestore​
Description Defines if the focus should be returned to the previously focused element, when the popup closes. Type boolean
Default false Since 1.0.0-rc.8
accessibleName​
Description Defines the accessible name of the component. Type string | undefined
Default undefined Since 1.0.0-rc.15
accessibleNameRef​
Description Defines the IDs of the elements that label the component. Type string | undefined
Default undefined Since 1.1.0
accessibleRole​
Description Allows setting a custom role. Type "None" | "Dialog" | "AlertDialog"
Default "Dialog" Since 1.10.0
preventInitialFocus​
Description Indicates whether initial focus should be prevented. Type boolean
Default false Since 2.0.0
Description Indicates if the element is open Type boolean
Default false Since 1.2.0
Description Defines the header HTML Element. Type Array<HTMLElement>
Description Defines the footer HTML Element. Type Array<HTMLElement>
default​
Description Defines the content of the Popup. Type Array<HTMLElement>
before-open​
Description Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. Type CustomEvent
Bubbles No Cancelable Yes - via preventDefault()
Description Fired after the component is opened. Type CustomEvent
Bubbles No Cancelable No
before-close​
Description Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. Type CustomEvent<PopupBeforeCloseEventDetail>
Parameters escPressed : boolean
Indicates that ESC
key has triggered the event.Bubbles No Cancelable Yes - via preventDefault()
Description Fired after the component is closed. Type CustomEvent
Bubbles No Cancelable No
Methods​
applyFocus​
Description Focuses the element denoted by initialFocus
, if provided, or the first focusable element otherwise. Return type Promise<void>
CSS Parts​
Name Description header Used to style the header of the component content Used to style the content of the component footer Used to style the footer of the 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.
Download Open in Playground Edit