Stack Layout
1 min read
Use this layout component to show blocks on top of other blocks.
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 a zIndex of 2, and flex-layout.row#viewthree will appear over them both with a zIndex of 3. Also notice 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.
Configuration
- Import the Stack Layout app to your theme's dependencies in the
manifest.jsonfile, for example:
_10 "dependencies": {_10 "vtex.stack-layout": "0.x"_10 }
- Add the
stack-layoutblock to your template. For example:
_10"stack-layout": {_10 "children": ["flex-layout.row#viewone", "flex-layout.row#viewtwo", "flex-layout.row#viewthree"]_10}
| Prop name | Type | Description | Default value |
|---|---|---|---|
blockClass | string | Allows you to pass a custom name to be added to the 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 child will have a zIndex of 3 and the next layer will have a 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 |