ResponsivePopover

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
Default	""

placementType

Description	Determines on which side the component is placed at.
Type	"Left" | "Right" | "Top" | "Bottom"
Default	"Right"

horizontalAlign

Description	Determines the horizontal alignment of the component.
Type	"Center" | "Left" | "Right" | "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

hideBackdrop

Description	Defines whether the block layer will be shown if modal property is set to true.
Type	boolean
Default	false
Since	1.0.0-rc.10

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 that the popover is shown at
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.
Type	string
Default	""

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

open

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

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
Default	""
Since	1.1.0

accessibleRole

Description	Allows setting a custom role.
Type	"None" | "Dialog" | "AlertDialog"
Default	"Dialog"
Since	1.10.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. This event does not bubble.
Type	CustomEvent

after-open

Description	Fired after the component is opened. This event does not bubble.
Type	CustomEvent

before-close

Description	Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble.
Type	CustomEvent<PopupBeforeCloseEventDetail>
Parameters	escPressed: boolean Indicates that ESC key has triggered the event.

after-close

Description	Fired after the component is closed. This event does not bubble.
Type	CustomEvent

Methods

showAt

Description	Shows popover on desktop and dialog on mobile.
Return type	Promise<void>
Parameters	opener: HTMLElement the element that the popover is shown at preventInitialFocus: boolean Prevents applying the focus inside the popup

close

Description	Closes the popover/dialog.
Return type	void

isOpen

Description	Tells if the responsive popover is open.
Return type	boolean

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.