Toast
They are typically used for displaying brief messages such as success, warning, or error notifications. Inkline provides a simple and effective way to handle toast notifications through the <IToastContainer> component and the useToast composable function.
The toast container component displays toast notifications within your application, in any of the 4 corners, and 4 sides of your screen.
- Add the
<IToastContainer> component to your project's root layout (usually app.vue).
<template>
<div id="app">
<!-- Your other layout components -->
<IToastContainer />
</div>
</template>
- Use the
useToast() composable in your components to show or hide toast notifications.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Toast title',
message: 'Toast message'
});
}
return {
showToast
};
}
});
</script>
<template>
<IToastContainer />
<IButton @click="showToast">Show toast</IButton>
</template>
Inkline includes several predefined toast colors that you can use within your application. You can apply a style using the color property.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showLightToast() {
toast.show({
title: 'Light Toast',
message: 'This toast is light like a feather',
color: 'light'
});
}
function showDarkToast() {
toast.show({
title: 'Dark toast',
message: 'This toast is dark like the night',
color: 'dark'
});
}
function showInfoToast() {
toast.show({
title: 'Heads up!',
message: "This toast needs your attention, but it's not super important.",
color: 'info'
});
}
function showSuccessToast() {
toast.show({
title: 'Well done!',
message: 'You successfully read this important alert message.',
color: 'success'
});
}
function showWarningToast() {
toast.show({
title: 'Warning!',
message: "Better check yourself, you're not looking too good.",
color: 'warning'
});
}
function showDangerToast() {
toast.show({
title: 'Oh snap!',
message: 'Change a few things up and try submitting again.',
color: 'danger'
});
}
return {
showLightToast,
showDarkToast,
showInfoToast,
showSuccessToast,
showWarningToast,
showDangerToast
};
}
});
</script>
<template>
<IToastContainer />
<IButton color="light" @click="showLightToast">Show light toast</IButton>
<IButton color="dark" @click="showDarkToast">Show dark toast</IButton>
<IButton color="info" @click="showInfoToast">Show info toast</IButton>
<IButton color="success" @click="showSuccessToast">Show success toast</IButton>
<IButton color="warning" @click="showWarningToast">Show warning toast</IButton>
<IButton color="danger" @click="showDangerToast">Show danger toast</IButton>
</template>
You're able to use the size modifier to control the text and spacing size of your toasts, using one of the available sizes: sm, md, and lg.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showSmallToast() {
toast.show({
title: 'Small Toast',
message: 'This toast is small',
size: 'sm'
});
}
function showMediumToast() {
toast.show({
title: 'Medium Toast',
message: 'This toast is medium',
size: 'md'
});
}
function showLargeToast() {
toast.show({
title: 'Large Toast',
message: 'This toast is large',
size: 'lg'
});
}
return {
showSmallToast,
showMediumToast,
showLargeToast
};
}
});
</script>
<template>
<IToastContainer />
<IButton size="sm" @click="showSmallToast">Show small toast</IButton>
<IButton size="md" @click="showMediumToast">Show medium toast</IButton>
<IButton size="lg" @click="showLargeToast">Show large toast</IButton>
</template>
You can dismiss toast notification using the dismissible property. Dismissible toasts have a dismiss button that can be clicked to manually hide them.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Dismissible Toast',
message: 'This toast can be dismissed by clicking the close button',
dismissible: true
});
}
return {
showToast
};
}
});
</script>
<template>
<IToastContainer />
<IButton @click="showToast">Show toast</IButton>
</template>
You can dismiss toast notification using the dismissible property. Dismissible toasts have a dismiss button that can be clicked to manually hide them.
Timed toasts are designed to automatically disappear after a set duration, providing users with brief, non-intrusive notifications. They're ideal for conveying success messages, updates, or other time-sensitive information that doesn't require prolonged user attention.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Timed Toast',
message: 'This toast will be visible for 5 seconds',
duration: 5000
});
}
return {
showToast
};
}
});
</script>
<template>
<IToastContainer />
<IButton @click="showToast">Show toast</IButton>
</template>
Sticky toasts remain visible on the screen until the user manually dismisses them. These notifications are suitable for important alerts, error messages, or other critical information that requires user acknowledgement to ensure they've been noticed and understood.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Sticky Toast',
message: 'This toast will be visible until it is dismissed',
duration: 0,
dismissible: true
});
}
return {
showToast
};
}
});
</script>
<template>
<IToastContainer />
<IButton @click="showToast">Show toast</IButton>
</template>
Controlled toasts offer a higher level of flexibility in managing your notifications. By using unique ids, timed, and sticky durations, you can tailor the behavior of each toast to fit your application's specific needs.
To individually control the visibility of a toast, assign a unique id property when creating it. By doing so, you can easily target specific toasts and hide them using the hide() method.
This approach is helpful when managing multiple toasts simultaneously and you need to dismiss a particular toast without affecting others.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toastId = 'toast';
const toast = useToast();
function showToast() {
toast.show({
id: toastId,
title: 'Controlled Toast',
message: 'This toast will be visible until it is programmatically hidden',
duration: 0
});
}
function hideToast() {
toast.hide({ id: toastId });
}
return {
showToast,
hideToast
};
}
});
</script>
<template>
<IToastContainer />
<IButton @click="showToast">Show toast</IButton>
<IButton @click="hideToast">Hide toast</IButton>
</template>
In cases where you want to dismiss all displayed toasts at once, the hideAll() method comes in handy. This method clears all toasts from the screen, providing a clean slate for subsequent notifications.
This is particularly useful in situations where you need to reset the notification stack or prepare the interface for a new user action.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Controlled Toast',
message: 'This toast will be visible until it is programmatically hidden',
duration: 0
});
}
function hideAllToasts() {
toast.hideAll();
}
return {
showToast,
hideAllToasts
};
}
});
</script>
<template>
<IToastContainer />
<IButton @click="showToast">Show toast</IButton>
<IButton @click="hideAllToasts">Hide all toasts</IButton>
</template>
Inkline's toast notifications 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 toasts.
This level of customization ensures that your notifications align seamlessly with your application's design and branding, enhancing the overall user experience.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent, h } from 'vue';
export default defineComponent({
setup() {
const toastService = useToast();
function onClickShowToast() {
toastService.show({
icon: h('span', 'ICON'),
title: h('strong', 'Toast heading'),
message: h('p', 'This message is a VNode')
});
}
return {
onClickShowToast
};
}
});
</script>
<template>
<IToastContainer />
<IButton @click="onClickShowToast">Show toast</IButton>
</template>
IToastContainer
IToast
The component used inside the <IToastContainer> component. Any of these props can be used as options when showing a toast notification.
IToast
These slots are used internally for dynamically rendering the toast content.
IToast
These events are used internally to handle the toast notification visibility.
IToast