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

headerText

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"

modal

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

opener

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

open

Description	Indicates if the element is open
Type	boolean
Default	false
Since	1.2.0

Slots

header

Description	Defines the header HTML Element.
Type	Array<HTMLElement>

footer

Description	Defines the footer HTML Element.
Type	Array<HTMLElement>

default

Description	Defines the content of the Popup.
Type	Array<HTMLElement>

Events

before-open

Description	Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
Type	CustomEvent
Bubbles	Yes
Cancelable	Yes - via preventDefault()

open

Description	Fired after the component is opened.
Type	CustomEvent
Bubbles	Yes
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	Yes
Cancelable	Yes - via preventDefault()

close

Description	Fired after the component is closed.
Type	CustomEvent
Bubbles	Yes
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.