ResponsivePopover

v1.0.0-rc.6
@ui5/webcomponents
<ui5-responsive-popover>

Basic ResponsivePopover

Open ResponsivePopover
Email: Note: If you open the page in mobile, dialog would be displayed.
<ui5-button id="openBtn" design="Emphasized">Open Popover</ui5-button>

<ui5-responsive-popover id="hello-popover" header-text="Newsletter subscription">
	<div class="popover-content">
		<div class="flex-column">
			<ui5-label for="emailInput" required>Email: </ui5-label>
			<ui5-input id="emailInput" class="samples-margin-top" placeholder="Enter Email"></ui5-input>
			<ui5-label>Note: If you open the page in mobile, dialog would be displayed.</ui5-label>
		</div>
	</div>
	<div slot="footer" class="popover-footer">
		<div style="flex: 1;"></div>
		<ui5-button id="closePopoverButton" design="Emphasized">Subscribe</ui5-button>
	</div>
</ui5-responsive-popover>

<script>
	var popover = document.getElementById("hello-popover");
	var popoverOpener = document.getElementById("openBtn");
	var popoverCloser = document.getElementById("closePopoverButton");

	popoverOpener.addEventListener("click", function() {
		popover.showAt(popoverOpener);
	});
	popoverCloser.addEventListener("click", function() {
		popover.close();
	});
</script>
	

Overview

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.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
allowTargetOverlap
allow-target-overlap
boolean
false
Determines if there is no enough space, the component can be placed over the target.
headerText
header-text
string
""
Defines the header text.

Note: If header slot is provided, the headerText is ignored.
hideArrow
hide-arrow
boolean
false
Determines whether the component arrow is hidden.
since v1.0.0-rc.15
hideBackdrop
hide-backdrop
boolean
false
Defines whether the block layer will be shown if modal property is set to true.
since v1.0.0-rc.10
horizontalAlign
horizontal-align
PopoverHorizontalAlign
"Center"
Determines the horizontal alignment of the component.

Available options are:
  • Center
  • Left
  • Right
  • Stretch
modal
boolean
false
Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
placementType
placement-type
PopoverPlacementType
"Right"
Determines on which side the component is placed at.

Available options are:
  • Left
  • Right
  • Top
  • Bottom
verticalAlign
vertical-align
PopoverVerticalAlign
"Center"
Determines the vertical alignment of the component.

Available options are:
  • Center
  • Top
  • Bottom
  • Stretch
accessibleName
accessible-name
String
""
Sets the accessible aria name of the component.
since v1.0.0-rc.15
initialFocus
initial-focus
string
""
Defines the ID of the HTML Element, which will get the initial focus.
preventFocusRestore
prevent-focus-restore
boolean
false
Defines if the focus should be returned to the previously focused element, when the popup closes.
since v1.0.0-rc.8

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
footer
HTMLElement [0..n]
Defines the footer HTML Element.
header
HTMLElement [0..n]
Defines the header HTML Element.
default
HTMLElement [0..n]
Defines the content of the Popup.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
after-close
Fired after the component is closed. This event does not bubble.
after-open
Fired after the component is opened. This event does not bubble.
before-close
Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble.
escPressed
type: boolean
description: Indicates that ESC key has triggered the event.
before-open
Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
close
Closes the popover/dialog.
isOpen
Tells if the responsive popover is open
showAt
Shows popover on desktop and dialog on mobile.
opener
type: HTMLElement
description: the element that the popover is shown at
preventInitialFocus
type: boolean
description: Prevents applying the focus inside the popup
applyFocus
Focuses the element denoted by initialFocus, if provided, or the first focusable element otherwise.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel