Live demo — this example is server-driven; run the showcase locally for the interactive version.

Notification drawer

Use Notification drawer straight from a Qute template — parameters and slots instead of Java builders. This reference is generated from the runtime template sources: each template documents its parameters and slots in the header comment shown beneath its include line.

Templates

notification-drawer

{#include components/feedback/notification-drawer /}
Notification drawer — PatternFly v6. Root of the family; compose
   notification-drawer-list / notification-drawer-group includes in the main block. 
 Optional params:
     id, attrs    — root id / raw passthrough.
     ariaLabel    — region label (defaults to titleText, then "Notifications").
     hasHeader    — render the header (omit for the lightweight variant).
     titleText    — header title (default "Notifications").
     headerStatus — text for the __header-status line (e.g. "3 unread"). 
 Model mode: pass notificationDrawer=<org.sitenetsoft.quarkus.pha.model.NotificationDrawer> — items or groups.

notification-drawer-group

{#include components/feedback/notification-drawer-group /}
Notification drawer group — an expandable group of notifications. The toggle and list bind to an Alpine boolean named
by openVar; put a notification-drawer-list include in the main block. 
 Required: title, openVar (name of the x-data
boolean, e.g. "g1"). Optional: count (badge number), countRead (pf-m-read badge instead of unread).

notification-drawer-list

{#include components/feedback/notification-drawer-list /}
Notification drawer list — holds notification-drawer-list-item includes. Main-block content.

notification-drawer-list-item

{#include components/feedback/notification-drawer-list-item /}
Notification drawer list item — one notification. 
 Optional params: variant — info | warning | success | danger
| default (pf-m-*; colors the icon). read — boolean; pf-m-read (default is pf-m-unread). iconName — status icon
("set:slug"); defaults to the variant's icon. title — notification title. description — body text. timestamp —
relative/absolute time string.