Component Usage #

• GDialog Details

The GDialog component is the main part of the package. Install it and use it like any other component.

All props you can find here.

Installation #

yarn add gitart-vue-dialog
npm i gitart-vue-dialog

You can install the component globally or locally. We will do it globally

// main.js
import { GDialog } from 'gitart-vue-dialog'
import 'gitart-vue-dialog/dist/style.css'

const app = Vue.createApp(/* ... */)
app.component('GDialog', GDialog)

Minimal working example #

Let's use a standalone component (don't forget to install). In this example, we assume that you installed the component globally.

<template>
  <GDialog v-model="dialogState">
    Content 
  </GDialog>

  <button @click="dialogState = true">
    Open Dialog
  </button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data: () => ({
    dialogState: false,
  }),
})
</script>

<script>
import { ref, defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const dialogState = ref(false)

    return {
      dialogState,
    }
  },
})
</script>

Pretty ugly dialog, right? Let's add background and some content. Take a look:

Examples #

Activator slot #

v1.1.0

GDialog has an activator slot that helps activate the component when clicked on inside. default slot has onClose scoped function to close the dialog.

Fullscreen #

Due to limited space, full-screen dialogs may be more appropriate for mobile devices.

Transition #

You can customize appearing with custom transitions.

Persistent #

With persistent clicking on the outside does not close the dialog

Scrollable #

scrollable allows you to make scroll content somewhere inside your dialog. To make fixed actions or header, etc...

Local #

local allows you to show your dialog above a specific part of your app. It disables teleportation to the body, so the dialog attaches the closest parent element with position: relative;.