# Drawer Examples (vue)

```vue
<template>
  <h1>DBDrawer Documentation Examples</h1>
  <h2>1. Default Drawer</h2>
  <div>
    <DBButton
      :onClick="
        (event) => {
          open = true;
        }
      "
    >
      Open Me </DBButton
    ><DBDrawer
      :open="open"
      :onClose="
        (event) => {
          open = false;
        }
      "
      :drawerHeader="<header>Optional drawer header</header>"
    >
      My Drawer content
    </DBDrawer>
  </div>
  <h2>2. Drawer Variants</h2>
  <div>
    <DBButton
      :onClick="
        (event) => {
          open = true;
        }
      "
    >
      Open Modal Drawer </DBButton
    ><DBDrawer
      variant="modal"
      :open="open"
      :onClose="
        (event) => {
          open = false;
        }
      "
    >
      Modal Drawer content
    </DBDrawer>
  </div>
  <div>
    <DBButton
      :onClick="
        (event) => {
          open = true;
        }
      "
    >
      Open Inside Drawer </DBButton
    ><DBDrawer
      variant="inside"
      :open="open"
      :onClose="
        (event) => {
          open = false;
        }
      "
    >
      Inside Drawer content
    </DBDrawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import { DBButton } from "@db-ux/v-v-core-components";
import { DBDrawer } from "@db-ux/v-v-core-components";

const open = ref<boolean>(false);
</script>
```