Component Name

An adjustable, empty space that can be used to tune the spacing between child elements.

Demo

React

Vue

Usage

React

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

return (
  <Placeholder className="flex no-wrap w-100 p-4">
    <Placeholder className="w-20 h-20" />

    <Spacer />

    <Placeholder className="w-20 h-20" />
  </Placeholder>
);

Vue

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

<template>
  <Placeholder class="flex no-wrap w-100 p-4">
    <Placeholder class="w-20 h-20" />

    <Spacer />

    <Placeholder class="w-20 h-20" />
  </Placeholder>
</template>

Props

Name	Type	Default	Description
w	CssUnit	—	Minimum width of the spacer

Types

type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`