UNPKG

@gechiui/components

Version:
42 lines (27 loc) 1.09 kB
# ZStack <div class="callout callout-alert"> This feature is still experimental. “Experimentalmeans this is an early implementation subject to drastic and breaking changes. </div> ## Usage `ZStack` allows you to stack things along the Z-axis. ```jsx import { __experimentalZStack as ZStack } from '@gechiui/components'; function Example() { return ( <ZStack offset={ 20 } isLayered> <ExampleImage /> <ExampleImage /> <ExampleImage /> </ZStack> ); } ``` ## Props ### `isLayered`: `boolean` When `true`, the children are stacked on top of each other. When `false`, the children follow the normal flow of the layout. Defaults to `true`. ### `isReversed`: `boolean` Reverse the layer ordering. When `true`, the first child has the lowest `z-index` and the last child has the highest `z-index`. When `false`, the first child has the highest `z-index` and the last child has the lowest `z-index`. Defaults to `false`. ### `offset`: `number` The amount of space between each child element. Defaults to `0`. ### `children`: `ReactNode` The children to stack.