🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Notification Vue Component

With Notification component you can show required messages that looks like Push (or Local) system notifications.

Notification Components

There are following components included:

  • Notification

Notification Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-white dark:bg-[#1e1e1e]'

Notifiaction bg color in iOS theme

colors.bgMaterialstring'bg-md-light-surface-5 dark:bg-md-dark-surface-5'

Notification bg color in Material theme

colors.deleteIconIosstring'fill-stone-400 active:fill-stone-200 dark:fill-stone-500 dark:active:fill-stone-700'

Notification Delete Icon color in IOS theme

colors.deleteIconMdstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Notification Delete Icon color in Material theme

colors.subtitleIosstring'text-black dark:text-white'

Notification subtitle color in IOS theme

colors.textMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Notification text color in Material theme

colors.titleIosstring'text-black dark:text-white'

Notification title color in IOS theme

colors.titleRightIosstring'text-opacity-45 text-black dark:text-white dark:text-opacity-45'

Notification right text color in IOS theme

colors.titleRightMdstring'text-md-light-on-surface-variant before:bg-md-light-on-surface-variant dark:text-md-dark-on-surface-variant before:dark:bg-md-dark-on-surface-variant'

Notification right text color in Material theme

componentstring'div'

Component's HTML Element

openedbooleanundefined

Allows to open/close Notification and set its initial state

subtitlestring

Content of the notification "subtitle" area

textstring

Content of the notification "text" area

titlestring

Content of the notification "title" area

titleRightTextstring

Content of the notification "title right text" area

translucentbooleantrue

Makes Notification background translucent (with backdrop-filter: blur) in iOS theme

Notification Events

NameTypeDescription
closefunction(e)

Click handler on to close element

Notification Slots

NameDescription
button

Notification button content

icon

Notification icon HTML layout or image

subtitle

Content of the notification "subtitle" area

text

Content of the notification "text" area

title

Content of the notification "title" area

titlerighttext

Content of the notification "title right text" area

Examples

Notification.vue
<template>
<k-page>
<k-navbar title="Notification" />
<k-notification
:opened="opened.notificationFull"
title="Konsta UI"
title-right-text="now"
subtitle="This is a subtitle"
text="This is a simple notification message"
>
<template #icon>
<demo-icon />
</template>
</k-notification>
<k-notification
:opened="opened.notificationWithButton"
title="Konsta UI"
subtitle="Notification with close button"
text="Click (x) button to close me"
@click="() => (opened.notificationWithButton = false)"
>
<template #icon>
<demo-icon />
</template>
<template #button />
</k-notification>
<k-notification
:opened="opened.notificationCloseOnClick"
title="Konsta UI"
title-right-text="now"
subtitle="Notification with close on click"
text="Click me to close"
@click="() => (opened.notificationCloseOnClick = false)"
>
<template #icon>
<demo-icon />
</template>
</k-notification>
<k-notification
:opened="opened.notificationCallbackOnClose"
title="Konsta UI"
title-right-text="now"
subtitle="Notification with close on click"
text="Click me to close"
@click="
() => {
opened.notificationCallbackOnClose = false;
alertOpened = true;
}
"
>
<template #icon>
<demo-icon />
</template>
</k-notification>
<k-dialog
:opened="alertOpened"
@backdropclick="() => (alertOpened = false)"
>
<template #title>Konsta UI</template>
Notification closed
<template #buttons>
<k-dialog-button @click="() => (alertOpened = false)">
Ok
</k-dialog-button>
</template>
</k-dialog>
<k-block strong-ios outline-ios class="space-y-4">
<p>
Konsta UI comes with simple Notifications component that allows you to
show some useful messages to user and request basic actions.
</p>
<p>
<k-button @click="() => openNotification('notificationFull')">
Full layout notification
</k-button>
</p>
<p>
<k-button @click="() => openNotification('notificationWithButton')">
With Close Button
</k-button>
</p>
<p>
<k-button @click="() => openNotification('notificationCloseOnClick')">
Click to Close
</k-button>
</p>
<p>
<k-button
@click="() => openNotification('notificationCallbackOnClose')"
>
Callback on Close
</k-button>
</p>
</k-block>
</k-page>
</template>
<script>
import { ref, watch } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kNotification,
kButton,
kDialog,
kDialogButton,
useTheme,
} from 'konsta/vue';
import DemoIcon from '../components/DemoIcon.vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kNotification,
kButton,
kDialog,
kDialogButton,
DemoIcon,
},
setup() {
const opened = ref({
notificationFull: false,
notificationWithButton: false,
notificationCloseOnClick: false,
notificationCallbackOnClose: false,
});
const alertOpened = ref(false);
const theme = useTheme();
const openNotification = (setter) => {
opened.value = {
notificationFull: false,
notificationWithButton: false,
notificationCloseOnClick: false,
notificationCallbackOnClose: false,
};
opened.value[setter] = true;
};
const autoCloseNotificationFull = () => {
if (opened.value.notificationFull) {
setTimeout(() => {
opened.value.notificationFull = false;
}, 3000);
}
};
watch(() => opened.value.notificationFull, autoCloseNotificationFull);
return {
opened,
alertOpened,
openNotification,
theme,
};
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.