Skip to content

Box

Beat the box up, like Mike in '97, I bite.

Example

Colors

Show Code
vue
<script lang="ts" setup>
import { RBox, RSpace } from 'roughness'
</script>

<template>
  <RSpace align="center">
    <RBox :style="{ padding: '0.5em 1em' }">Schrödinger's cat</RBox>
    <RBox color="primary" :style="{ padding: '0.5em 1em' }">Roughness</RBox>
    <RBox color="info" :style="{ padding: '0.5em 1em' }">Entropy</RBox>
    <RBox color="success" :style="{ padding: '0.5em 1em' }">Fallout Shelter</RBox>
    <RBox color="warning" :style="{ padding: '0.5em 1em' }">Black box</RBox>
    <RBox color="error" :style="{ padding: '0.5em 1em' }">Marxism</RBox>
    <RBox color="comment" :style="{ padding: '0.5em 1em' }">It's empty</RBox>
  </RSpace>
</template>
Schrödinger's catRoughnessEntropyFallout ShelterBlack boxMarxismIt's empty

Size

Show Code
vue
<script lang="ts" setup>
import { RBox, RSpace } from 'roughness'
</script>

<template>
  <RSpace align="center">
    <RBox size="small" :style="{ padding: '0.5em 1em' }">Tall</RBox>
    <RBox :style="{ padding: '0.5em 1em' }">Grande</RBox>
    <RBox size="large" :style="{ padding: '0.5em 1em' }">Venti</RBox>
  </RSpace>
</template>
TallGrandeVenti

Variants

Show Code
vue
<script lang="ts" setup>
import { RBox, RSpace } from 'roughness'
</script>

<template>
  <RSpace align="center">
    <RBox :style="{ padding: '0.5em 1em' }">Tiananmen Square</RBox>
    <RBox round :style="{ padding: '0.5em 1em' }">Shenzhen</RBox>
    <RBox filled size="large" :style="{ padding: '0.5em 1em' }">Epstein's</RBox>
    <RBox filled color="warning" size="large" :style="{ padding: '0.5em 1em' }">?</RBox>
  </RSpace>
</template>
TiananmenShenzhenEpstein's?

Styles

Show Code
vue
<script lang="ts" setup>
import { RBox, RSpace } from 'roughness'
</script>

<template>
  <RSpace align="center">
    <RBox :style="{ padding: '0.5em 1em' }">Paper/RBox>
    <RBox :style="{ padding: '0.5em 1em', '--r-box-border-width': '2px' }">Cardboard</RBox>
    <RBox :style="{ padding: '0.5em 1em', '--r-box-border-dash': '2' }">Crystal</RBox>
  </RSpace>
</template>
PaperCardboardCrystal

Usage

Props

Events

Slots

Styles

Graphics Selectors

Released under the ISC License.