Drawer

There is a time machine hidden in the drawer.

Example

Basic

Show Code

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

let open = ref(false)

function show() {
  open.value = true
}
</script>

<template>
  <RButton @click="show">Show Lyrics</RButton>
  <RDrawer v-model:open="open">
    <template #title>Doraemon no uta</template>
      This sort of thing is good<br>
      I wish I could do it<br>
      This sort of dream<br>
      This sort of dream, I have many of them but<br>
      All of them, all of them, all of them<br>
      He grants my dreams<br>
      He grants my dreams with a mysterious pocket<br>
      I want to fly freely in the sky<br>
      (Here! Bamboo-copter!)<br>
      Ah ah ah, I love you so much, Doraemon
    <template #footer>
      <RButton>Close</RButton>
    </template>
  </RDrawer>
</template>

Doraemon no uta

This sort of thing is good
I wish I could do it
This sort of dream
This sort of dream, I have many of them but
All of them, all of them, all of them
He grants my dreams
He grants my dreams with a mysterious pocket
I want to fly freely in the sky
(Here! Bamboo-copter!)
Ah ah ah, I love you so much, Doraemon

Side

Show Code

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

let bottomOpen = ref(false)

function showBottom() {
  bottomOpen.value = true
}
</script>

<template>
  <RButton @click="showBottom">Cookie Jar</RButton>
  <RDrawer v-model:open="bottomOpen" side="bottom">
    <template #title>This site eats cookies.</template>
      We eat cookies to fill our bellies. By using our site you agree to our cookie policy.
    <template #footer>
      <RButton type="primary">Accept</RButton>
    </template>
  </RDrawer>
</template>

This site eats cookies.

We eat cookies to fill our bellies. By using our site you agree to our cookie policy.

Usage

Props

Name	Type	Default Value	Description
side
...			See Dialog Props.

Slots

Name	Type	Description
...		See Dialog Slots.

Styles

Name	Type	Default Value	Description
...			See Dialog Slots.