The Overlay Layout app provides blocks that help you create a Dropdown, Select or a Tooltip component.
Example of a Locale Switcher using the Overlay Layout.
Configuration
- Add the Overlay Layout app to your theme's dependencies in the
manifest.json
, for example:
{
"dependencies": {
"vtex.overlay-layout": "0.x"
}
}
Now you can use the two blocks exported by the app:
Block name | Description |
---|---|
overlay-trigger | ![]() overlay-layout content. |
overlay-layout | ![]() |
- In any desired theme template, add the
overlay-trigger
and then declare it using a block of your choosing and theoverlay-layout
:
{
"overlay-trigger": {
"children": [
"rich-text#question",
"overlay-layout"
]
},
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 name | Type | Description | Default value |
---|---|---|---|
trigger | Enum | Defines whether the popover-layout will be opened by click (click ) or hover (hover ). | click |
- Configure the chosen trigger block and declare the
overlay-layout
using its props. For example:
"rich-text#question": {
"props": {
"text": "**Click to open the Overlay Layout**",
"blockClass": "question"
}
},
"overlay-layout": {
"props": {
"placement": "left"
},
"children": [
"rich-text#link"
]
},
"rich-text#link": {
"props": {
"text": "\n**Reach us at**\nwww.vtex.com.br",
"blockClass": "link"
}
}
}
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 name | Type | Description | Default value |
---|---|---|---|
placement | Enum | Defines 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 |
scrollBehavior | Enum | Defines 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 |
backdrop | Enum | Once 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 |
showArrow | Boolean | Whether an arrow pointing to the overlay-trigger component should be displayed on UI(true ) or not (false ). | false |
offsets | Object | Defines 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:
Prop | Type | Description |
---|---|---|
skidding | Number | Defines the overlay-layout component positioning side by side with the overlay-trigger . |
distance | Number | Defines 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 |