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
component	string	'div'	Component's HTML Element
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

Notification Events

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

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>

React

import React, { useState, useEffect } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  Notification,
  Button,
  Dialog,
  DialogButton,
} from 'ina-ui/react';
import DemoIcon from '../components/DemoIcon';

export default function NotificationPage() {
  const [notificationFull, setNotificationFull] = useState(false);
  const [notificationWithButton, setNotificationWithButton] = useState(false);
  const [notificationCloseOnClick, setNotificationCloseOnClick] =
    useState(false);
  const [notificationCallbackOnClose, setNotificationCallbackOnClose] =
    useState(false);
  const [alertOpened, setAlertOpened] = useState(false);

  const openNotification = (setter) => {
    setNotificationFull(false);
    setNotificationWithButton(false);
    setNotificationCloseOnClick(false);
    setNotificationCallbackOnClose(false);
    setter(true);
  };

  useEffect(() => {
    let timer;
    if (notificationFull) {
      timer = setTimeout(() => {
        setNotificationFull(false);
      }, 3000);
    }
    return () => clearTimeout(timer);
  }, [notificationFull]);

  return (
    <Page>
      <Navbar
        title="Notification"
        />
      <Notification
        opened={notificationFull}
        icon={<DemoIcon />}
        title="ina-ui UI"
        titleRightText="now"
        subtitle="This is a subtitle"
        text="This is a simple notification message"
      />
      <Notification
        opened={notificationWithButton}
        icon={<DemoIcon />}
        title="ina-ui UI"
        button
        onClick={() => setNotificationWithButton(false)}
        subtitle="Notification with close button"
        text="Click (x) button to close me"
      />
      <Notification
        opened={notificationCloseOnClick}
        icon={<DemoIcon />}
        title="ina-ui UI"
        titleRightText="now"
        subtitle="Notification with close on click"
        text="Click me to close"
        onClick={() => setNotificationCloseOnClick(false)}
      />
      <Notification
        opened={notificationCallbackOnClose}
        icon={<DemoIcon />}
        title="ina-ui UI"
        titleRightText="now"
        subtitle="Notification with close on click"
        text="Click me to close"
        onClick={() => {
          setNotificationCallbackOnClose(false);
          setAlertOpened(true);
        }}
      />
      <Dialog
        opened={alertOpened}
        onBackdropClick={() => setAlertOpened(false)}
        title="ina-ui UI"
        content="Notification closed"
        buttons={
          <DialogButton onClick={() => setAlertOpened(false)}>Ok</DialogButton>
        }
      />
      <Block strongIos outlineIos className="space-y-4">
        <p>
          ina-ui 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(setNotificationFull)}>
            Full layout notification
          </Button>
        </p>
        <p>
          <Button onClick={() => openNotification(setNotificationWithButton)}>
            With Close Button
          </Button>
        </p>
        <p>
          <Button onClick={() => openNotification(setNotificationCloseOnClick)}>
            Click to Close
          </Button>
        </p>
        <p>
          <Button
            onClick={() => openNotification(setNotificationCallbackOnClose)}
          >
            Callback on Close
          </Button>
        </p>
      </Block>
    </Page>
  );
}