Twilight
EngineWeb components

salla-notification-item

One notification row: a bell icon, title, sub title and date, as a link to the notification's URL.

Used inside salla-notifications

<salla-notifications> renders this component for you. You rarely use it directly.

One notification row: a bell icon, title, sub title and date, as a link to the notification's URL. Used inside salla-notifications; a theme rarely places it directly. An unread notification (is_new) gets an extra icon class and a read one gets the s-notifications-item-read class.

Use it

In HTML or JSX, use the tag <salla-notification-item> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaNotificationItem } from '@salla.sa/twilight-components-react/notification-item';

Example

import { useEffect } from 'react';
import { SallaNotificationItem } from '@salla.sa/twilight-components-react/notification-item';

export function Example() {
  useEffect(() => {
    document.getElementById('item').notification = {
      title: 'Order shipped', sub_title: 'Order #123 is on its way', date: '2 hours ago', is_new: true, url: '/orders/123'
    };
  }, []);

  return (
    <SallaNotificationItem id="item" />
  );
}

Properties

PropertyAttributeDescriptionTypeDefault
notificationnotificationThe notification to render: { title, sub_title, date, is_new, url }. date is shown as given text, is_new marks it unread, and url is the link target.Notification

Used inside: <salla-notifications>.

On this page

Use itExamplePropertiesRelated