Documentation
Feedback
Guides

Stack Layout

Use this layout component to show blocks on top of other blocks.

{"base64":"  ","img":{"width":612,"height":1260,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":196095,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/images/vtex-stack-layout-0.png"}}

Each children passed to stack-layout will receive an increasingly higher value of zIndex.

This means flex-layout.row#viewone will appear on the bottom, flex-layout.row#viewtwo will appear over it with zIndex of value 2, and flex-layout.row#viewthree will appear over them both with zIndex of value 3. Another thing to notice is that you pass the blockClass prop to any children of the stack-layout it will apply the blockClass to the element that wraps child element.

Configuration

  1. Import the breadcrumb's app to your theme's dependencies in the manifest.json, for example:

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

  1. Add the stack-layout block to your template. For example:

_10
"stack-layout": {
_10
"children": ["flex-layout.row#viewone", "flex-layout.row#viewtwo", "flex-layout.row#viewthree]
_10
}

Prop nameTypeDescriptionDefault value
blockClassstringAllows to pass a custom name to be added to component css classesnull
zIndexOffsetnumberAn offset to be passed to the zIndex of the children of the stack layout. If you pass 3, the first children will have zIndex of 3 and the next layer will have zIndex of 4, and so on.0

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
stackContainer
stackItem
stackItem--first
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