Drawer ​

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

const isDrawerShown = ref(false)
</script>

<template>
  <ADrawer
    v-model="isDrawerShown"
    title="Drawer title"
    subtitle="Chocolate cake tiramisu donut"
  />

  <ABtn @click="isDrawerShown = true">
    Show drawer
  </ABtn>
</template>

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

const isDrawerLeftShown = ref(false)
const isDrawerRightShown = ref(false)
const isDrawerTopShown = ref(false)
const isDrawerBottomShown = ref(false)
</script>

<template>
  <ABtn
    class="mr-4"
    @click="isDrawerLeftShown = true"
  >
    Left
  </ABtn>
  <ABtn
    class="mr-4"
    @click="isDrawerRightShown = true"
  >
    Right
  </ABtn>
  <ABtn
    class="mr-4"
    @click="isDrawerTopShown = true"
  >
    Top
  </ABtn>
  <ABtn @click="isDrawerBottomShown = true">
    Bottom
  </ABtn>

  <!-- 👉 Left drawer -->
  <ADrawer
    v-model="isDrawerLeftShown"
    anchor="left"
    title="Drawer title"
    subtitle="Chocolate cake tiramisu donut"
  />

  <!-- 👉 Right drawer -->
  <ADrawer
    v-model="isDrawerRightShown"
    anchor="right"
    title="Drawer title"
    subtitle="Chocolate cake tiramisu donut"
  />

  <!-- 👉 Top drawer -->
  <ADrawer
    v-model="isDrawerTopShown"
    anchor="top"
    title="Drawer title"
    subtitle="Chocolate cake tiramisu donut"
  />

  <!-- 👉 Bottom drawer -->
  <ADrawer
    v-model="isDrawerBottomShown"
    anchor="bottom"
    title="Drawer title"
    subtitle="Chocolate cake tiramisu donut"
  />
</template>

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

const isDrawerShown = ref(false)
</script>

<template>
  <ADrawer
    v-model="isDrawerShown"
    title="Drawer title"
    subtitle="Chocolate cake tiramisu donut"
    class="!w-[400px]"
  />

  <ABtn @click="isDrawerShown = true">
    Show drawer
  </ABtn>
</template>

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

const isDrawerShown = ref(false)
</script>

<template>
  <ADrawer
    v-model="isDrawerShown"
    title="Drawer title"
    subtitle="Chocolate cake tiramisu donut"
    text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
    persistent
  >
    <div class="a-card-body">
      <ABtn
        variant="light"
        class="text-sm"
        @click="isDrawerShown = false"
      >
        Close
      </ABtn>
    </div>
  </ADrawer>

  <ABtn @click="isDrawerShown = true">
    Show drawer
  </ABtn>
</template>