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

Name	Type	Default Value	Description
graphicsOptions
open

Events

Name	Type	Description
update:open

Slots

Name	Type	Description
summary
default

Styles

Name	Type	Default Value	Description
--r-details-summary-color
--r-details-summary-marker-size
--r-details-gap-size