ZvDrawer

ZvDrawer is a standalone component

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

TIP

This component use <Teleport to="body"> with ZvBackdrop component, so you can implement this component everywhere and it inherits all his props. But you can use static props to render the component where you implement it.

This component is a child of ZvBackdrop, so it inherits all its properties.

Basic usage

vue

<template>
  <ZvDrawer v-model="drawerOpenRight">
    <template #title> Right Drawer </template>

    <template #default="{ close }">
      Right Drawer Content

      <ZvButton @click="close"> Close </ZvButton>
    </template>
  </ZvDrawer>
  <ZvDrawer v-model="drawerOpenLeft" position="left" />
  <ZvDrawer v-model="drawerOpenTop" position="top" />
  <ZvDrawer v-model="drawerOpenRight" position="bottom" />
</template>

<script lang="ts" setup>
  import ZvDrawer from '@zadigetvoltaire/ui/components/ZvDrawer'
  import ZvButton from '@zadigetvoltaire/ui/components/ZvButton'

  import { ref } from 'vue'

  const drawerOpenRight = ref(false)
  const drawerOpenLeft = ref(false)
  const drawerOpenTop = ref(false)
  const drawerOpenBottom = ref(false)
</script>

ZvDrawer ​

Basic usage ​

ZvDrawer

Basic usage