Notification
Le composant notification permet d'afficher un contenu sous forme de notification
Classes du composant
Modificateurs d'apparence
.notification--primary: Primaire
Affichage par défaut
Affichage customisé sans les actions
Affichage avec un body customisé
Affichage avec un header customisé
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="resources" uri="resources" %>
<%--@elvariable id="notificationViewModel" type="fr.kosmos.web.kore.attributes.interfaces.Notification"--%>
<kuik:heading size="lg" skin="a" title="Affichage par défaut" level="3" />
<kuik:notification data="${notificationViewModel}"/>
<kuik:heading size="lg" skin="a" title="Affichage customisé sans les actions" level="3" />
<kuik:notification data="${notificationViewModel}">
<kuik:notification-header data="${notificationViewModel}" />
<kuik:notification-body data="${notificationViewModel}" />
</kuik:notification>
<kuik:heading size="lg" skin="a" title="Affichage avec un body customisé" level="3" />
<kuik:notification data="${notificationViewModel}">
<kuik:notification-body data="${notificationViewModel}" >
<kuik:icon-content icon="icon://ui/bell" iconTitle="Notification" class="notification__title" size="sm">
<div class="notification__content">
<kuik:heading title="${notificationViewModel.title}" level="3" size="sm" skin="a"/>
<kuik:date date="${notificationViewModel.date}" datetime="${notificationViewModel.isoDate}"/>
<br>
<c:out value="${notificationViewModel.message}"/><br>
<kuik:button icon="icon://ui/eye" priority="primary">Valider</kuik:button>
</div>
</kuik:icon-content>
</kuik:notification-body>
</kuik:notification>
<kuik:heading size="lg" skin="a" title="Affichage avec un header customisé" level="3" />
<kuik:notification data="${notificationViewModel}">
<kuik:notification-header data="${notificationViewModel}" >
<kuik:heading title="${notificationViewModel.title}" level="3" size="sm" skin="a"/>
</kuik:notification-header>
<kuik:notification-body data="${notificationViewModel}" />
<kuik:notification-actions data="${notificationViewModel}" />
</kuik:notification>
<resources:addScript path="/static/js/foldable-content.js" type="module"/>