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"/>