Drawer

New

​

<template>
  <PlDrawer ref="drawer" :placement="placement">
    This is drawer default.
  </PlDrawer>
  <div class="flex gap-2">
    <PlButton @click="handleClick('top')">
      top
    </PlButton>
    <PlButton @click="handleClick('right')">
      right
    </PlButton>
    <PlButton @click="handleClick('bottom')">
      bottom
    </PlButton>
    <PlButton @click="handleClick('left')">
      left
    </PlButton>
  </div>
</template>

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

const drawer = ref()
const placement = ref('')

const handleClick = (p: string) => {
  placement.value = p
  drawer.value?.open()
}
</script>

<template>
  <PlDrawer ref="drawer" :placement="placement">
    This is drawer default.
  </PlDrawer>
  <div class="flex gap-2">
    <PlButton @click="handleClick('top')">
      top
    </PlButton>
    <PlButton @click="handleClick('right')">
      right
    </PlButton>
    <PlButton @click="handleClick('bottom')">
      bottom
    </PlButton>
    <PlButton @click="handleClick('left')">
      left
    </PlButton>
  </div>
</template>

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

const drawer = ref()
const placement = ref('')

const handleClick = (p: string) => {
  placement.value = p
  drawer.value?.open()
}
</script>

<template>
  <PlDrawer ref="drawer" :shake-off="['mask']">
    This is drawer default.
  </PlDrawer>
  <PlButton @click="handleClick">
    open drawer without mask
  </PlButton>
</template>

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

const drawer = ref()

const handleClick = () => {
  drawer.value?.open()
}
</script>

<template>
  <PlDrawer ref="drawer" :shake-off="['mask']">
    This is drawer default.
  </PlDrawer>
  <PlButton @click="handleClick">
    open drawer without mask
  </PlButton>
</template>

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

const drawer = ref()

const handleClick = () => {
  drawer.value?.open()
}
</script>

<template>
  <PlDrawer ref="drawer" fullscreen>
    This is drawer default.
  </PlDrawer>
  <PlButton @click="handleClick">
    open fullscreen drawer
  </PlButton>
</template>

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

const drawer = ref()

const handleClick = () => {
  drawer.value?.open()
}
</script>

<template>
  <PlDrawer ref="drawer" fullscreen>
    This is drawer default.
  </PlDrawer>
  <PlButton @click="handleClick">
    open fullscreen drawer
  </PlButton>
</template>

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

const drawer = ref()

const handleClick = () => {
  drawer.value?.open()
}
</script>

<template>
  <PlDrawer ref="drawer">
    <template #headless>
      <div class=" w-full h-screen bg-red text-white">
        This is drawer headless.
      </div>
    </template>
  </PlDrawer>
  <PlButton @click="handleClick">
    open custom drawer
  </PlButton>
</template>

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

const drawer = ref()

const handleClick = () => {
  drawer.value?.open()
}
</script>

<template>
  <PlDrawer ref="drawer">
    <template #headless>
      <div class=" w-full h-screen bg-red text-white">
        This is drawer headless.
      </div>
    </template>
  </PlDrawer>
  <PlButton @click="handleClick">
    open custom drawer
  </PlButton>
</template>

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

const drawer = ref()

const handleClick = () => {
  drawer.value?.open()
}
</script>