Modal Service
The Modal Service allows you to programmatically control modals in your application. It provides a composable useModal() function that returns methods for showing, hiding, and hiding all modals.
Inkline automatically injects an <IModalContainer> component within your application, used to display on-demand modals using the modal service.
Use the useModal() composable in your components to show or hide modal dialogs.
show({ id, ...props }) - Shows a modal with the provided optionshide({ id }) - Hides a modal with the provided idhideAll() - Hides all currently displayed modals.
<script lang="ts">
import { useModal } from '@inkline/inkline';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const modal = useModal();
function showModal() {
modal.show({
header: 'Modal title',
body: 'Modal body text goes here',
footer: 'Modal footer'
});
}
return {
showModal
};
}
});
</script>
<template>
<IButton @click="showModal">Show modal</IButton>
</template>
Inkline includes several predefined modal colors that you can use within your application. You can apply a style using the color property.
<script lang="ts">
import { useModal } from '@inkline/inkline';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const modal = useModal();
function showLightModal() {
modal.show({
header: 'Light Modal',
body: 'This modal is light like a feather',
footer: 'Modal footer',
color: 'light'
});
}
function showDarkModal() {
modal.show({
header: 'Dark modal',
body: 'This modal is dark like the night',
footer: 'Modal footer',
color: 'dark'
});
}
function showInfoModal() {
modal.show({
header: 'Heads up!',
body: "This modal needs your attention, but it's not super important.",
footer: 'Modal footer',
color: 'info'
});
}
function showSuccessModal() {
modal.show({
header: 'Well done!',
body: 'You successfully read this important alert message.',
footer: 'Modal footer',
color: 'success'
});
}
function showWarningModal() {
modal.show({
header: 'Warning!',
body: "Better check yourself, you're not looking too good.",
footer: 'Modal footer',
color: 'warning'
});
}
function showDangerModal() {
modal.show({
header: 'Oh snap!',
body: 'Change a few things up and try submitting again.',
footer: 'Modal footer',
color: 'danger'
});
}
return {
showLightModal,
showDarkModal,
showInfoModal,
showSuccessModal,
showWarningModal,
showDangerModal
};
}
});
</script>
<template>
<IButton color="light" @click="showLightModal">Show light modal</IButton>
<IButton color="dark" @click="showDarkModal">Show dark modal</IButton>
<IButton color="info" @click="showInfoModal">Show info modal</IButton>
<IButton color="success" @click="showSuccessModal">Show success modal</IButton>
<IButton color="warning" @click="showWarningModal">Show warning modal</IButton>
<IButton color="danger" @click="showDangerModal">Show danger modal</IButton>
</template>
You're able to use the size modifier to control the text and spacing size of your modals, using one of the available sizes: sm, md, and lg.
<script lang="ts">
import { useModal } from '@inkline/inkline';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const modal = useModal();
function showSmallModal() {
modal.show({
header: 'Small Modal',
body: 'This modal is small',
footer: 'Modal footer',
size: 'sm'
});
}
function showMediumModal() {
modal.show({
header: 'Medium Modal',
body: 'This modal is medium',
footer: 'Modal footer',
size: 'md'
});
}
function showLargeModal() {
modal.show({
header: 'Large Modal',
body: 'This modal is large',
footer: 'Modal footer',
size: 'lg'
});
}
return {
showSmallModal,
showMediumModal,
showLargeModal
};
}
});
</script>
<template>
<IButton size="sm" @click="showSmallModal">Show small modal</IButton>
<IButton size="md" @click="showMediumModal">Show medium modal</IButton>
<IButton size="lg" @click="showLargeModal">Show large modal</IButton>
</template>
Controlled modals offer a higher level of flexibility in managing your dialogs. By using unique ids, timed, and sticky durations, you can tailor the behavior of each modal to fit your application's specific needs.
To individually control the visibility of a modal, assign a unique id property when creating it. By doing so, you can easily target specific modals and hide them using the hide() method.
This approach is helpful when managing multiple modals simultaneously, and you need to dismiss a particular modal without affecting others.
<script lang="ts">
import { useModal } from '@inkline/inkline';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const modalId = 'modal';
const modal = useModal();
function showModal() {
modal.show({
id: modalId,
header: 'Controlled Modal',
body: 'This modal will be visible for 3 seconds'
});
hideModal();
}
function hideModal() {
setTimeout(() => {
modal.hide({ id: modalId });
}, 3000);
}
return {
showModal,
hideModal
};
}
});
</script>
<template>
<IButton @click="showModal">Show modal</IButton>
</template>
In cases where you want to dismiss all displayed modals at once, the hideAll() method comes in handy. This method clears all modals from the screen, providing a clean slate for subsequent dialogs.
This is particularly useful in situations where you need to reset the dialog stack or prepare the interface for a new user action.
Inkline's modal dialogs allow you to fully customize the content displayed, including icons, titles, and messages. By utilizing hoisting, you can render your own custom elements, giving you complete control over the look and feel of your modals.
This level of customization ensures that your dialogs align seamlessly with your application's design and branding, enhancing the overall user experience.
<script lang="ts">
import { useModal, useToast, IButton } from '@inkline/inkline';
import { defineComponent, h } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
const modal = useModal();
const modalId = 'custom-modal-id';
function showModal() {
modal.show({
id: modalId,
header: h('strong', 'Modal heading'),
body: h('div', [
h('p', 'This message is a VNode'),
h('ul', [
h('li', 'List item 1'),
h('li', 'List item 2'),
h('li', 'List item 3')
])
]),
footer: h('div', { class: '_display:flex _justify-content:flex-end' }, [
h(IButton, { onClick: cancelModal, class: '_margin-right:1' }, () => 'Cancel'),
h(IButton, { onClick: confirmModal, color: 'primary' }, () => 'Confirm')
])
});
}
function cancelModal() {
modal.hide({ id: modalId });
}
function confirmModal() {
toast.show({
message: 'Confirmed',
color: 'success'
});
modal.hide({ id: modalId });
}
return {
showModal
};
}
});
</script>
<template>
<IButton @click="showModal">Show modal</IButton>
</template>
Inkline provides several built-in modals that you can use to display common dialogs in your application. These modals are designed to be used with the modal service, allowing you to easily handle them as promises.
The alert modal is a simple dialog that displays a message and an optional title. It's useful for displaying information to the user without requiring any action.
<script lang="ts">
import { useModal } from '@inkline/inkline';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const { alert } = useModal();
async function showAlert() {
await alert({
title: 'Alert Title',
message:
'This is a basic alert message. It informs the user of something important.',
confirmButtonText: 'OK'
});
console.log('Alert closed');
}
return {
showAlert
};
}
});
</script>
<template>
<IButton @click="showAlert">Show alert</IButton>
</template>
The confirm modal is a dialog that displays a message and an optional title, along with a confirmation and cancel button. It's useful for asking the user to confirm or cancel an action.
<script lang="ts">
import { useModal, useToast } from '@inkline/inkline';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
const { confirm } = useModal();
async function showConfirm() {
const confirmed = await confirm({
title: 'Confirm',
message: 'Are you sure you want to delete this item?',
confirmButtonText: 'Delete',
cancelButtonText: 'Cancel'
});
if (confirmed) {
toast.show({
message: 'Item deleted successfully',
color: 'success'
});
}
}
return {
showConfirm
};
}
});
</script>
<template>
<IButton @click="showConfirm">Show confirm</IButton>
</template>
The prompt modal is a dialog that displays a message and an optional title, along with a text input and a confirmation and cancel button. It's useful for asking the user to confirm or cancel an action, along with providing additional information.
<script lang="ts">
import { useModal, useToast } from '@inkline/inkline';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
const { prompt } = useModal();
async function showPrompt() {
try {
const form = await prompt<{
input: string;
}>({
title: 'Prompt Title',
message: 'This prompt requires you to enter something:',
inputProps: {
placeholder: 'Enter something'
},
confirmButtonText: 'Submit',
cancelButtonText: 'Cancel'
});
toast.show({
title: 'Prompt result',
message: form.input,
color: 'info'
});
} catch (error) {
console.log('Prompt cancelled');
}
}
return {
showPrompt
};
}
});
</script>
<template>
<IButton @click="showPrompt">Show prompt</IButton>
</template>
These slots are used internally for dynamically rendering the modal content.
These events are used internally to handle the modal dialog visibility.