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

Example

React

// Import components
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
import '@fintech-sandpit/ui/style/components/stack.css';

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 components
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
import '@fintech-sandpit/ui/style/components/stack.css';

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 components
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
import '@fintech-sandpit/ui/style/components/stack.css';
</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 components
import {
  Placeholder,
  Stack,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/placeholder.css';
import '@fintech-sandpit/ui/style/components/stack.css';
</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'