Stack

Stacks allow to group horizontally or vertically a set of nodes. Note that the elements will keep their size. In other words, this is not a flexbox, but a grid.

To create an stack, use the following code:

<script>
	import { Button, Stack } from '@makigas/genshi-svelte';
</script>

<Stack>
	<Button>Compose</Button>
	<Button>Reply</Button>
	<Button>Reply All</Button>
	<Button>Forward</Button>
</Stack>

Stack positioning

Use the align prop to set where to locate the elements in the stack. For instance, use align="end" to center them to the opposite border of the view.

Or center them using align="center":

Or place space between each element with align="between":

Stack direction

By default, the stack is horizontal: items are placed horizontally. You can change this with the additional modifiers:

To make a vertical stack, use the direction="vertical" prop:

You can also reverse the positioning of the elements by using the reverse prop. If you use this prop, the order of the elements will be reversed.