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

Notification Svelte 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

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

onClosefunction(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.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Block,
Notification,
Button,
Dialog,
DialogButton,
} from 'konsta/svelte';
import DemoIcon from '../components/DemoIcon.svelte';
let notificationFull = false;
let notificationWithButton = false;
let notificationCloseOnClick = false;
let notificationCallbackOnClose = false;
let alertOpened = false;
const openNotification = (setter) => {
notificationFull = false;
notificationWithButton = false;
notificationCloseOnClick = false;
notificationCallbackOnClose = false;
setter();
if (notificationFull) {
setTimeout(() => {
notificationFull = false;
}, 3000);
}
};
</script>
<Page>
<Navbar title="Notification" />
<Notification
opened={notificationFull}
title="Konsta UI"
titleRightText="now"
subtitle="This is a subtitle"
text="This is a simple notification message"
>
<DemoIcon slot="icon" />
</Notification>
<Notification
opened={notificationWithButton}
title="Konsta UI"
subtitle="Notification with close button"
text="Click (x) button to close me"
button
onClose={() => (notificationWithButton = false)}
>
<DemoIcon slot="icon" />
</Notification>
<Notification
opened={notificationCloseOnClick}
title="Konsta UI"
titleRightText="now"
subtitle="Notification with close on click"
text="Click me to close"
onClick={() => (notificationCloseOnClick = false)}
>
<DemoIcon slot="icon" />
</Notification>
<Notification
opened={notificationCallbackOnClose}
title="Konsta UI"
titleRightText="now"
subtitle="Notification with close on click"
text="Click me to close"
onClick={() => {
notificationCallbackOnClose = false;
alertOpened = true;
}}
>
<DemoIcon slot="icon" />
</Notification>
<Dialog opened={alertOpened} onBackdropClick={() => (alertOpened = false)}>
<svelte:fragment slot="title">Konsta UI</svelte:fragment>
Notification closed
<svelte:fragment slot="buttons">
<DialogButton onClick={() => (alertOpened = false)}>Ок</DialogButton>
</svelte:fragment>
</Dialog>
<Block strongIos outlineIos 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>
<Button onClick={() => openNotification(() => (notificationFull = true))}>
Full layout notification
</Button>
</p>
<p>
<Button
onClick={() => openNotification(() => (notificationWithButton = true))}
>
With Close Button
</Button>
</p>
<p>
<Button
onClick={() =>
openNotification(() => (notificationCloseOnClick = true))}
>
Click to Close
</Button>
</p>
<p>
<Button
onClick={() =>
openNotification(() => (notificationCallbackOnClose = true))}
>
Callback on Close
</Button>
</p>
</Block>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.