Notify

View component on Github This page on Github
Example 

<button
  x-data
  @click="$dispatch('show-notify', {id: 'notify-simple', header: 'Notify Header', text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', delay: 2000})"
  class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
  Show notification
</button>

<ul
  x-data="notify"
  id="notify-simple"
  class="fixed bottom-4 z-50 w-full space-y-4 md:right-4 md:w-[350px]"
>
  <template x-for="notify in getNotifications" :key="notify.notifyId">
    <li
      x-bind="notification"
      x-alt-transition='{
        "enter": ["opacity-0 scale-[0.92]", "transition ease-out duration-200 origin-top", "opacity-100"],
        "leave": ["opacity-100", "transition ease-in duration-200 origin-top", "opacity-0 scale-[0.92]"]
      }'
    >
      <div
        class="flex w-full items-center rounded-xl bg-secondary-100 p-4 text-sm shadow-lg dark:bg-dark-800 dark:text-secondary-300 dark:shadow-black/30"
      >
        <div>
          <header
            x-show="notify.header"
            x-text="notify.header"
            class="mb-2 px-4 font-semibold"
          ></header>
          <div
            x-text="notify.text"
            class="px-4 dark:text-secondary-300"
          ></div>
        </div>
        <template x-if="notify.dismissable">
          <button @click="close()" class="ml-auto">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 384 512"
              class="h-6 w-6 text-text-600 dark:text-text-300"
            >
              <path
                d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
              />
            </svg>
          </button>
        </template>
      </div>
    </li>
  </template>
</ul>

Usage

<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/notify/dist/cdn.min.js"></script>

This component is simply a container for notifications. With the container on the page, you can display new notifications by dispatching the show-notify event.

The data for the component is provided by the notify function in the x-data directive and the props in the data-* attributes.

Props

data-order
default String

Order of the notifications. Valid values are: default or reversed. This prop can be useful when setting container position with the top-* or bottom-* classes.

data-max-notifications
0 Number

Maximum number of displayed notifications. Notification above this number will be buffered.

data-delay
10000 Number

Default delay for auto closing notifications.

data-dismissable
true Boolean

Makes all notifications in this container dismissable by default. Dismissable notifications display close button and allows users to close them.

data-static
false Boolean

Makes all notifications in this container static by default. Static notifications must be dismissed manually by the user.

data-variant
info String

Default variant for all notifications in this container.

data-options
null Object

Default options for all notifications in this container.

Notify container position

To set up the notify container, add a few basic Tailwind classes to the main element:

  • top-* , bottom-*, left-* or right-* to set the container position
  • w-* to set notification width
  • space-y-* to optionally add spacing between notifications
  • px-* or py-* to optionally add padding to the container
  • translate-x-*, translate-y-* to optionally center container

For example, the classes bottom-4 md:right-4 w-full md:w-[350px] space-y-4 will position notifications in the bottom-right corner of the screen (centered on small screens). Notifications will be 350px wide on medium screens and up (full width on small screens), and spaced 1rem apart.

Showing new notifications

To show a new notification, simply dispatch the show-notify event anywhere in your application. The notification text and additional options are provided in the event's data. The delay, dismissable, static, variant and options properties will override the container defaults for that specific notification.

$dispatch(
    "add-notify",
    {
        id: String,
        header: String,
        text: String,
        delay: Number,
        dismissable: Boolean,
        static: Boolean,
        sticky: Boolean,
        variant: String,
        options: Object,
    }
)

Notification properties:

  • id - defines the container to display notification. id is optional when there is only one container on the page,
  • header and text - set content of the notification,
  • delay, dismissable and static - override respective props of the container for this notification,
  • sticky - sticky notifications are always displayed below or above normal notifications and ignore number set in data-max-notifications prop. Position depends on the data-order prop.
  • variant - sets the variant of the notification,
  • options - additional custom options that can be referenced in the template. This is useful for creating customized notifications.
Example 

<div class="flex flex-col gap-y-4">
  <button
    x-data
    @click="$dispatch('show-notify', {id: 'notify-new-notification', header: 'Notify Header', text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', delay: 2000})"
    class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Show basic notification
  </button>
  <button
    x-data
    @click="$dispatch('show-notify', {id: 'notify-new-notification', header: 'Success', text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', delay: 5000, variant: 'success'})"
    class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Show variant notification
  </button>
  <button
    x-data
    @click="$dispatch('show-notify', {id: 'notify-new-notification', header: 'Static Notification', text: 'This notification is static so it has to be closed manually.', static: true})"
    class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Show static notification
  </button>
  <button
    x-data
    @click="$dispatch('show-notify', {id: 'notify-new-notification', header: 'Sticky Notification', text: 'This notification is sticky so it always stays on the bottom of the list.', delay: 5000, sticky: true})"
    class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Show sticky notification
  </button>
  <button
    x-data
    @click="$dispatch('show-notify', {id: 'notify-new-notification', header: 'Notify Header', text: 'This notification uses custom options to add buttons in the template.', static: true, dismissable: false, options: { dialog: true }})"
    class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Show dialog notification
  </button>
</div>

<ul
  x-data="notify"
  id="notify-new-notification"
  class="fixed bottom-4 z-50 w-full space-y-4 md:right-4 md:w-[350px]"
>
  <template x-for="notify in getNotifications" :key="notify.notifyId">
    <li
      x-bind="notification"
      x-alt-transition='{
        "enter": ["opacity-0 scale-[0.92]", "transition ease-out duration-200 origin-top", "opacity-100"],
        "leave": ["opacity-100", "transition ease-in duration-200 origin-top", "opacity-0 scale-[0.92]"]
      }'
    >
      <div
        class="flex w-full items-center rounded-xl bg-secondary-100 p-4 text-sm shadow-lg dark:bg-dark-800 dark:text-secondary-300 dark:shadow-black/30"
        :class="{'dark:bg-success-500 bg-success-500 dark:text-text-700 text-text-700': notify.variant === 'success'}"
      >
        <div>
          <header
            x-show="notify.header"
            x-text="notify.header"
            class="mb-2 px-4 font-semibold"
          ></header>
          <div
            x-text="notify.text"
            class="px-4"
          ></div>
          <template x-if="notify.options.dialog">
            <div class="flex justify-end gap-x-4 px-4 pt-4">
              <button @click="close()" class="font-semibold">OK</button>
              <button @click="close()" class="font-semibold">Close</button>
            </div>
          </template>
        </div>
        <template x-if="notify.dismissable">
          <button @click="close()" class="ml-auto">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 384 512"
              class="h-6 w-6"
            >
              <path
                d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
              />
            </svg>
          </button>
        </template>
      </div>
    </li>
  </template>
</ul>

Pause timers on hover

By default, hovering over the container pauses all timers and restarts them when the pointer leaves the element.

Stacked notifications

You can turn notification list into stacked notifications by adding absolute class to the li element. To add a stacking effect style binding with a transform property is used.

Example 

<button
  x-data
  @click="$dispatch('show-notify', {id: 'notify-stacked', header: 'Notify Header', text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', delay: 2000})"
  class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
  Show notification
</button>

<ul
  x-data="notify"
  id="notify-stacked"
  class="fixed bottom-4 z-50 w-full space-y-4 md:right-4 md:w-[350px]"
>
  <template x-for="(notify, index) in getNotifications" :key="notify.notifyId">
    <li
      x-bind="notification"
      x-alt-transition='{
        "enter": ["opacity-0 scale-[0.92]", "transition ease-out duration-200 origin-top", "opacity-100"],
        "leave": ["opacity-100", "transition ease-in duration-200 origin-top", "opacity-0 scale-[0.92]"]
      }'
      class="absolute bottom-0 right-0"
      :style="`transform: translateY(${index * -10}px)`"
    >
      <div
        class="flex w-full items-center rounded-xl bg-secondary-100 p-4 text-sm shadow-lg dark:bg-dark-800 dark:text-secondary-300 dark:shadow-black/30"
      >
        <div>
          <header
            x-show="notify.header"
            x-text="notify.header"
            class="mb-2 px-4 font-semibold"
          ></header>
          <div
            x-text="notify.text"
            class="px-4 dark:text-secondary-300"
          ></div>
        </div>
        <template x-if="notify.dismissable">
          <button @click="close()" class="ml-auto">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 384 512"
              class="h-6 w-6 text-text-600 dark:text-text-300"
            >
              <path
                d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
              />
            </svg>
          </button>
        </template>
      </div>
    </li>
  </template>
</ul>
Litewind-alpine 0.1.0
Components Documentation