Space

We need to keep our distance.

Example

Basic

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace :style="{ 'max-width': '600px' }">
    <RButton>Rocket to the moon</RButton>
    <RButton>Bring newton back to life</RButton>
    <RButton type="warning">Single loop of Never Gonna Give You Up</RButton>
  </RSpace>
</template>

Direction

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace vertical>
    <RSpace reverse>
      <RButton>Moon</RButton>
      <RButton>Earth</RButton>
    </RSpace>
    <RButton>Mars</RButton>
    <RButton>Jupiter</RButton>
    <RButton>Saturn</RButton>
  </RSpace>
</template>

From Center

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace justify="center">
    <RButton>Squidward</RButton>
    <RButton type="warning">SpongeBob</RButton>
    <RButton>Patrick</RButton>
  </RSpace>
</template>

Size

Show Code

<script lang="ts" setup>
import { RSpace, RText } from 'roughness'
</script>

<template>
  <RSpace vertical>
    <RSpace size="small">
      <RText>You</RText>
      <RText>Your primary school classmates</RText>
    </RSpace>
    <RSpace>
      <RText>You</RText>
      <RText>Your middle school classmates</RText>
    </RSpace>
    <RSpace size="large">
      <RText>You</RText>
      <RText>Your college classmates</RText>
    </RSpace>
  </RSpace>
</template>

YouYour primary school classmates

YouYour middle school classmates

YouYour college classmates

Usage

Props

Name	Type	Default Value	Description
align
inline
justify
reverse
size
tag
vertical
wrap

Slots

Name	Type	Description
default

Styles

Name	Type	Default Value	Description
--r-space-gap-size