Component Usage

To use the package you don't need install the plugin. Just styles and register GDialog component. In some cases it's enough

// main.js or YourComponent.vue
import 'gitart-vue-dialog/dist/style.css'
<GDialog v-model="value">
  Content
</GDialog>

<button @click="onOpen">Open Dialog</button>
// YourComponent.vue
import { ref } from 'vue'
import { GDialog } from 'gitart-vue-dialog'

export default {
  components: {
    GDialog,
  },
  setup() {
    const value = ref(false)
    const onOpen = () => {
      value.value = true
    }

    return {
      value,
      onOpen,
    }
  },
}
Live Example

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

Live Example

Examples

Activator slot

v1.1.0

In some cases, you only need one button to open a dialog. An activator slot can help here

Live Example

Fullscreen

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

Live Example

Transitions

You can customize appearing with a custom transitions

Live Example

Persistent

With persistent clicking ouside doesn't close the dialog

Live Example

Scrollable

scrollable allows you to make scroll content somewhere inside your dialog

Live Example

Last Updated: