Stack

Used to layout its children in a vertical or horizontal stack.

Demo

React

Item 1

Item 2

Item 1

Item 2

Vue

Item 1

Item 2

Item 1

Item 2

Usage

React

import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/react';

return (
  <Stack className="gap-4">
    <Placeholder className="h-20 w-40">
      Item 1
    </Placeholder>

    <Placeholder className="h-20 w-40">
      Item 2
    </Placeholder>
  </Stack>
);

import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/react';

return (
  <Stack
    orientation="horizontal"
    class="gap-4"
  >
    <Placeholder className="h-40 w-20">
      Item 1
    </Placeholder>

    <Placeholder className="h-40 w-20">
      Item 2
    </Placeholder>
  </Stack>
);

Vue

<script setup lang="ts">
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Stack class="gap-4">
    <Placeholder class="h-20 w-40">
      Item 1
    </Placeholder>

    <Placeholder class="h-20 w-40">
      Item 2
    </Placeholder>
  </Stack>
</template>

<script setup lang="ts">
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Stack
    orientation="horizontal"
    class="gap-4"
  >
    <Placeholder class="h-40 w-20">
      Item 1
    </Placeholder>

    <Placeholder class="h-40 w-20">
      Item 2
    </Placeholder>
  </Stack>
</template>

Props

Name	Type	Default	Description
orientation	Orientation	vertical	Stack orientation

Types

export type Orientation = 'vertical' | 'horizontal'