@gechiui/components
Version:
UI components for GeChiUI.
42 lines (27 loc) • 1.09 kB
Markdown
# ZStack
<div class="callout callout-alert">
This feature is still experimental. “Experimental” means 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.