Box

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

Example

Colors

Show Code

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

const boxStyle = { padding: 'var(--r-common-box-padding-block) var(--r-common-box-padding-inline)' }
</script>

<template>
  <RSpace align="center">
    <RBox :style="boxStyle">Schrödinger's cat</RBox>
    <RBox color="primary" :style="boxStyle">Roughness</RBox>
    <RBox color="info" :style="boxStyle">Entropy</RBox>
    <RBox color="success" :style="boxStyle">Fallout Shelter</RBox>
    <RBox color="warning" :style="boxStyle">Black box</RBox>
    <RBox color="error" :style="boxStyle">Marxism</RBox>
    <RBox color="comment" :style="boxStyle">It's empty</RBox>
  </RSpace>
</template>

Schrödinger's catRoughnessEntropyFallout ShelterBlack boxMarxismIt's empty

Size

Show Code

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

const boxStyle = { padding: 'var(--r-common-box-padding-block) var(--r-common-box-padding-inline)' }
</script>

<template>
  <RSpace align="center">
    <RBox size="small" :style="boxStyle">Tall</RBox>
    <RBox :style="boxStyle">Grande</RBox>
    <RBox size="large" :style="boxStyle">Venti</RBox>
  </RSpace>
</template>

TallGrandeVenti

Variants

Show Code

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

const boxStyle = { padding: 'var(--r-common-box-padding-block) var(--r-common-box-padding-inline)' }
</script>

<template>
  <RSpace align="center">
    <RBox :style="boxStyle">Tiananmen Square</RBox>
    <RBox round :style="boxStyle">Shenzhen</RBox>
    <RBox filled :stroked="false"size="large" :style="boxStyle">Epstein's</RBox>
    <RBox filled round color="warning" size="small" :style="boxStyle">$</RBox>
  </RSpace>
</template>

TiananmenShenzhenEpstein's$

Styles

Show Code

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

const boxStyle = { padding: 'var(--r-common-box-padding-block) var(--r-common-box-padding-inline)' }
</script>

<template>
  <RSpace align="center">
    <RBox :style="boxStyle">Paper/RBox>
    <RBox :style="{ ...boxStyle, '--r-box-border-width': '2px' }">Cardboard</RBox>
    <RBox :style="{ ...boxStyle, '--r-box-border-dash': '2' }">Crystal</RBox>
  </RSpace>
</template>

PaperCardboardCrystal

Usage

Props

Events

Slots

Styles

Graphics Selectors