Notification Svelte Component

Notification Components
Notification Props
Notification Slots
Examples

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

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-white dark:bg-[#1e1e1e]'	Notifiaction bg color in iOS theme
colors.bgMaterial	string	'bg-md-light-surface-5 dark:bg-md-dark-surface-5'	Notification bg color in Material theme
colors.deleteIconIos	string	'fill-stone-400 active:fill-stone-200 dark:fill-stone-500 dark:active:fill-stone-700'	Notification Delete Icon color in IOS theme
colors.deleteIconMd	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'	Notification Delete Icon color in Material theme
colors.subtitleIos	string	'text-black dark:text-white'	Notification subtitle color in IOS theme
colors.textMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'	Notification text color in Material theme
colors.titleIos	string	'text-black dark:text-white'	Notification title color in IOS theme
colors.titleRightIos	string	'text-opacity-45 text-black dark:text-white dark:text-opacity-45'	Notification right text color in IOS theme
colors.titleRightMd	string	'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
opened	boolean	undefined	Allows to open/close Notification and set its initial state
subtitle	string		Content of the notification "subtitle" area
text	string		Content of the notification "text" area
title	string		Content of the notification "title" area
titleRightText	string		Content of the notification "title right text" area
translucent	boolean	true	Makes Notification background translucent (with `backdrop-filter: blur`) in iOS theme
onClose	function(e)		Click handler on to close element

Notification Slots

Name	Description
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>