- Vue.js
2.x
# npm
$ npm install vue-jackbox
# yarn
$ yarn add vue-jackboxAvailable methods inside a VueJS component
The same parameters apply to all the methods in $alert expect the method hide and clearDefault
| Parameter | Type | Default | Description |
|---|---|---|---|
| title | HTML/string |
empty | The dialog title |
| message | HTML/string |
empty | The dialog message |
| question | HTML/string |
empty | The dialog question |
| placeholder | string |
empty | Input placeholder for prompt |
| value | string |
empty | Input value for prompt |
| label | HTML/string |
empty | Input label for prompt |
| centerButtons | boolean |
false | Center action buttons in dialog footer |
| cancelOnBackdrop | boolean |
false | Cancel dialog on backdrop click |
| showBackdrop | boolean |
true | Option to display backdrop |
| cancelOnEsc | boolean |
true | Cancel dialog on esc |
| duration | number |
-1 | The duration for which the alert will be shown, -1 = infinite |
| ok | object |
{text: 'Continue', action: null} | Text and callback on ok button. |
| cancel | object |
{text: 'Cancel', action: null} | Text and callback on cancel button. |
| state | string |
information | Sets color on dialog, options: information, critical, warning ,success |
| buttons | string[] |
['cancel', 'ok'] | Select which buttons to show, you can add a custom button, but you will also need to add property for that. |
| icon | HTML/String |
! | What icon to display, can me svg, text or img tag |
| darkTheme | boolean |
false | Display dark dialog and darker backdrop color. |
this.$alert({
title: 'This is an test alert',
message: 'I´m just testing',
retry: { text: 'Retry', className: 'jb-dialog__button--action', action: () => { this.doRetry(); } },
buttons: ['cancel', 'retry', 'ok'],
})If any of the values is not present on the method call then the default values will be used.
All dialogs use the same code in the background, so all options are always available, the diffrent methods are just short hands. (Except for the prompt, that is the only one that supports the input.)
this.$alert({
title: 'This is an test alert',
message: 'I´m just testing'
})this.$confirm({
title: 'Unsaved changes',
message: 'You have made changes that are not yet saved, if you continue these will get lost.',
question: 'Do you want to discard changes and continue?',
state: 'critical',
ok: {
action: () => { this.$emit('close'); },
},
});this.$prompt({
title: 'Change name',
message: 'Enter the new first name',
placeholder: 'Enter first name',
value: this.firstName,
ok: {
action: (value) => { this.firstName = value; }
}
})this.$alert({
title: 'Name changed!',
message: `Your name has successfully been changed to <strong>${this.firstName}</strong>`,
state: 'success'
})main.js
import Vue from 'vue'
import VueJackBox from 'vue-jackbox'
import App from './App'
Vue.use(VueJackBox)import 'vue-jackbox/dist/vue-jackbox.css';App.vue
<template>
<div id="app"></div>
</template>
<script>
export default {
mounted () {
this.$notification(
{
title: 'App loaded',
text: 'The app has loaded successfully!',
state: 'success'
});
}
}
</script>
<style>
</style>