dialog for AlpineJS
npm install alpinjs-dialogDialog component for Alpine.js
- @tasvet
Demo link : Click here
Github : Click here
Install alpinjs-dialog with npm
``bash`
npm install alpinejs gsap alpinjs-dialog
or
yarn add alpinejs gsap alpinjs-dialog
import :
`
import Alpine from 'alpinejs';
import dialog from "alpinjs-dialog";
Alpine.plugin(dialog);
Alpine.start();
`
` Dialog is working!
Hello Dialog
...
// or
this.$dialog("dialogName").open({
addClass: ["custom-class-1", "custom-class-2"], //class as array
data: null, // pass data into dialog
config: {
width: "500px", // dialog width
height: "200px", // dialog height
position: "center", // center , left, right, top, bottom
backdrop: true //set true click away to close
blur: 13, //set true to blur overlay,
animate: {
enter: 0.2, // seconds
leave: 0.2, // seconds
},
},
props: {
click: this.counter.bind(this), // dialog props
},
afterOpen: (dialog) => {
// callback after dialog open
console.log("after dialog opened", dialog);
},
beforeClose: (dialog) => {
// callback before dialog close
console.log("before dialog close", dialog);
},
afterClose: (dialog) => {
// callback after dialog close
console.log("after dialog closed", dialog);
}
});
// get data from dialog v1.0.54 or higher
let data = this.$dialog("dialogName").data;
// get data from dialog v1.0.53 or lower
let data = this.$dialog("dialogName").data();
// close dialog
this.$dialog("dialogName").close(/ return something after close here /);
// close dialog with validation
this.$dialog("dialogName").validClose(() => {
// return true to close dialog
return true;
});
//event listener
this.$dialog("dialogName")
.target
.addEventListener("dialogReady", (e) => {
// dialog is ready
console.log("dialogReady", e.detail);
}
);
this.$dialog("dialogName")
.target
.addEventListener("dialogClose", (e) => {
// dialog is closed
console.log("dialogClosed", e.detail);
}
);
// props
this.$dialog("dialogName").props.click(1);
// static config
width="1000px"
height="500px"
position="center"
blur="3"
animate-enter="0.5"
animate-leave="0.2"
>
....
`
| Property | Type | Description | Value |
|-----------|------|--------------|-------|
| show | boolean | Dialog active status | true,false |boolean
| persist | | Persist the dialog content | true,false |any
| data | | Data to be passed to the dialog | |string[]
| addClass | | Additional CSS classes to add to the dialog | |string[]
| addOverlayClass | | Additional CSS classes to add to the overlay | |string
| drawer | | Drawer element class | |object
| config | | Configuration options for the dialog | |string
| config.width | | Width of the dialog | |string
| config.height | | Height of the dialog | |string
| config.position | | Position of the dialog | center,right,left,top,bottom |boolean
| config.backdrop | | Show backdrop or not | true,false |number
| config.blur | | Blur the background or not | |number
| config.animate.enter | | Animation duration for enter transition | |number
| config.animate.leave | | Animation duration for leave transition | |object
| props | | Additional props to be passed to the dialog | |boolean
| processing | | Indicates if the dialog is processing or not | true,false |function
| afterOpen | | Callback function after the dialog is opened | |function
| beforeClose | | Callback function before the dialog is closed | |function
| afterClose | | Callback function after the dialog is closed | |function
| target | HTML element reference | The dialog element | |
| open(config = {}) | | Function to open the dialog with configuration options | |function
| close(data) | | Function to close the dialog and pass data | |any
| data | | Get the dialog data | |any
| rawData | | Get a clone of the dialog data | |function` | Set the function to validate if the dialog can be closed or not | |
| validClose(fn) |