Gitart is a beautiful & customizable dialog and modal component created for Vue 3 applications.
How to use it:
1. Import the Gitart Vue Dialog component.
import { GDialog } from "gitart-vue-dialog"; // stylesheet import "gitart-vue-dialog/dist/style.css";
2. Register the component.
export default { components: { GDialog, }, }
3. Create a basic dialog.
<GDialog v-model="value"> Content </GDialog> <button @click="onOpen">Open Dialog</button>
// Composition API export default { components: { GDialog, }, setup() { const value = ref(false) const onOpen = () => { value.value = true } return { value, onOpen, } }, }
// Option API export default { components: { GDialog, }, data: () => ({ value: false, }), methods: { onOpen() { this.value = true }, }, }
4. All available component props.
background: { type: [Boolean, String], default: true, }, borderRadius: { type: [Boolean, Number, String], default: true, }, contentClass: { type: String, default: '', }, /** * removes box-shadow for content */ depressed: { type: Boolean, default: false, }, fullscreen: { type: Boolean, default: false, }, height: { type: [String, Number], default: 'auto', }, /** * enables local mode for the dialog. * dialog is fixed to first "position: relative;" parent */ local: { type: Boolean, default: false, }, maxWidth: { type: [String, Number], default: 'none', }, modelValue: { type: Boolean, default: false, }, overlayBackground: { type: [Boolean, String], default: true, }, /** * clicking outside content will not close modal */ persistent: { type: Boolean, default: false, }, scrollable: { type: Boolean, default: false, }, transition: { type: String, default: 'g-dialog-transition', }, width: { type: [String, Number], default: 'auto', },
Preview:
Changelog:
v2.4.0 (07/08/2022)
- feat: add the possibility to close the dialog on navigation back
v2.3.1 (06/24/2022)
- feat: add the ability to add default props for modals using the plugin
Download Details:
Author: gitart-group
Live Demo: https://gitart-vue-dialog.gitart.org/
Download Link: https://github.com/gitart-group/vue-dialog/archive/refs/heads/main.zip
Official Website: https://github.com/gitart-group/vue-dialog
Install & Download:
# Yarn
$ yarn add gitart-vue-dialog
# NPM
$ npm i gitart-vue-dialog