ZvDialog

ZvDialog is a standalone component

INFO

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

Basic usage

vue

<template>
  <ZvDialog v-model="isOpened" title="Title Dialog"> Content Dialog </ZvDialog>

  <ZvButton @click="isOpened = true"> Open Dialog </ZvButton>
</template>

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

  import { ref } from 'vue'

  const isOpened = ref(false)
</script>

Scrollable

For long content, you can enable scrolling in the content part (Header and footer slot remain visible at the top and bottom)

WARNING

With this option, an overflow is applied: So, some problems with absolute content may appear

Show code

vue

<template>
  <ZvDialog v-model="isScrollableOpened" title="Scrollable Dialog" scrollable max-height="400px">
    <template #title> Scrollable Dialog Title </template>

    <template #default>
      <div class="flex flex-col gap-10">
        <p>Scroll Start</p>
        <p>Scroll</p>
        <p>Scroll</p>
        <p>Scroll</p>
        <p>Scroll</p>
        <p>Scroll</p>
        <p>Scroll</p>
        <p>Scroll</p>
        <p>Scroll End</p>
      </div>
    </template>
    <template #footer="{ close }">
      <ZvButton @click="close"> Close </ZvButton>
    </template>
  </ZvDialog>

  <ZvButton @click="isScrollableOpened = true"> Open Scrollable Dialog </ZvButton>
</template>

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

  import { ref } from 'vue'

  const isScrollableOpened = ref(false)
</script>

No padding content & no close

Show code

vue

<template>
  <ZvDialog v-model="isNoPaddingOpened" no-padding no-close v-slot="{ close }">
    <div class="flex flex-col flex-center">
      Content Dialog
      <br />
      <br />
      <ZvButton @click="close">Close</ZvButton>
    </div>
  </ZvDialog>

  <ZvButton @click="isNoPaddingOpened = true"> Open No Padding Dialog </ZvButton>
</template>

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

  import { ref } from 'vue'

  const isOpened = ref(false)
</script>

ZvDialog ​

Basic usage ​

Scrollable ​

No padding content & no close ​

ZvDialog

Basic usage

Scrollable

No padding content & no close