Component Name

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

Demo

React

Vue

Example

React

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

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

React

Name	Type	Default	Description
w	CssUnit	—	Minimum width of the spacer
asChild	boolean	false	Use the provided child element as the default rendered element, combining their props and behavior

Vue

Name	Type	Default	Description
w	CssUnit	—	Minimum width of the spacer
as-child	boolean	false	Use the provided child element as the default rendered element, combining their props and behavior

Types

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