Details

The devil is in the details.

Example

Show Code

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

let open = ref(true)

function toggle() {
  open.value = !open.value
}
</script>

<template>
  <RSpace vertical>
    <RDetails v-model:open="open">
      <template #summary>Hanger</template>
      Clown suits
    </RDetails>
    <RButton :filled="!open" @click="toggle">Closet Door</RButton>
    <RText>Look! The door is {{ open ? 'open' : 'closed' }}.</RText>
  </RSpace>
</template>

Hanger

Clown suits

Look! The door is open.

Usage

Props

Events

Slots

Styles