Use this layout component to show blocks on top of other blocks.
Each child 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 if you pass the blockClass prop to any children of the stack-layout, it will apply the blockClass to the element that wraps the child element.
- Import the Stack Layout app to your theme's dependencies to the
manifest.json:
"dependencies": {
"vtex.stack-layout": "0.x"
}- Add the
stack-layoutblock to the desired template. For example:
"stack-layout": {
"children": ["flex-layout.row#viewone", "flex-layout.row#viewtwo", "flex-layout.row#viewthree]
}| Prop name | Type | Description | Default value |
|---|---|---|---|
blockClass |
string |
Allows to pass a custom name to be added to component CSS classes. | null |
zIndexOffset |
number |
An 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 |
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 |