Documentation
Feedback
Guides

Overlay Layout

The Overlay Layout app provides blocks that help you create a Dropdown, Select or a Tooltip component.

{"base64":"  ","img":{"width":935,"height":310,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":126013,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-overlay-layout-0.gif"}}

Example of a Locale Switcher using the Overlay Layout.

Configuration

  1. Add the Overlay Layout app to your theme's dependencies in the manifest.json, for example:

_10
{
_10
"dependencies": {
_10
"vtex.overlay-layout": "0.x"
_10
}
_10
}

Now you can use the two blocks exported by the app:

Block nameDescription
overlay-trigger
{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNIYmD4P7v5c1m8OwMDACBaBI9Db7FhAAAAAElFTkSuQmCC","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-overlay-layout-1.png","width":69,"height":20,"type":"svg"}}
Declares a renderable children block responsible for triggering the overlay-layout content.
overlay-layout
{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNIYmD4P7v5c1m8OwMDACBaBI9Db7FhAAAAAElFTkSuQmCC","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-overlay-layout-2.png","width":69,"height":20,"type":"svg"}}
Declares a renderable children block responsible for building the
  1. In any desired theme template, add the overlay-trigger and then declare it using a block of your choosing and the overlay-layout:

_10
{
_10
"overlay-trigger": {
_10
"children": [
_10
"rich-text#question",
_10
"overlay-layout"
_10
]
_10
},

Notice that the overlay-trigger is not rendered. Following the example stated above, the rich-text block will be the one rendered and responsible for effectively triggering the Overlay Layout content (defined by the children block of overlay-layout).

overlay-trigger props

Prop nameTypeDescriptionDefault value
triggerEnumDefines whether the popover-layout will be opened by click (click) or hover (hover).click
  1. Configure the chosen trigger block and declare the overlay-layout using its props. For example:

_21
"rich-text#question": {
_21
"props": {
_21
"text": "**Click to open the Overlay Layout**",
_21
"blockClass": "question"
_21
}
_21
},
_21
"overlay-layout": {
_21
"props": {
_21
"placement": "left"
_21
},
_21
"children": [
_21
"rich-text#link"
_21
]
_21
},
_21
"rich-text#link": {
_21
"props": {
_21
"text": "\n**Reach us at**\nwww.vtex.com.br",
_21
"blockClass": "link"
_21
}
_21
}
_21
}

The overlay-layout defines which block will be rendered in order to build the Overlay Layout content. This means that you will have to pass to it a children block to be rendered.

overlay-layout props

Prop nameTypeDescriptionDefault value
placementEnumDefines the Overlay Layout content placement when it is triggered according to the Trigger component positioning. Possible values are: bottom, left, right or top. If there is no page space in the placement that you choose, it will fit in a fallback position.bottom
scrollBehaviorEnumDefines the Overlay Layout content behavior when users try to scroll the page. Possible values are: lock-page-scroll (in which users can't scroll), close-on-scroll (the block is closed when users start scrolling) or default (Scroll does not affect the Overlay Layout content).default
backdropEnumOnce the Overlay Layout content is rendered, it defines whether a backdrop overlay will be displayed (visible) or not (none). When set as visible, the backdrop will close Overlay Layout content when clicked on. Otherwise, the content will be closed only if any component from the page is clicked on.none
showArrowBooleanWhether an arrow pointing to the overlay-trigger component should be displayed on UI(true) or not (false).false
offsetsObjectDefines the overlay-layout component positioning when compared to the overlay-trigger (unit used is px). For more details, check out the offsets object table stated below.{ skidding: 0, distance: 0 }
  • offsets object:
PropTypeDescription
skiddingNumberDefines the overlay-layout component positioning side by side with the overlay-trigger.
distanceNumberDefines the distance between the overlay-layout and the overlay-trigger components in the UI. A positive number places the overlay-layout component farther, while a negative number lets it overlap the overlay-trigger.

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
arrow
container
outsideClickHandler
paper
popper
popperArrow
trigger
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page