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
Un nouveau document est disponible
Mi accumsan sollicitudin metus interdum hendrerit massa id morbi suspendisse aliquam fusce sollicitudin tristique vivamus suspendisse sem nisi morbi sollicitudin aliquam nisl leo accumsan facilisis.
Nunc vel et interdum congue enim phasellus interdum orci consectetur molestie purus massa nunc maecenas hendrerit et consectetur mi a massa ut leo adipiscing felis.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="resources" uri="resources" %>
<%--@elvariable id="defaultViewModel" type="fr.kosmos.web.kore.attributes.interfaces.Notification"--%>
<kuik:heading size="lg" skin="a" title="Affichage par défaut" level="3" />
<kuik:notification data="${defaultViewModel}"/>
<resources:addScript path="/static/js/foldable-content.js" type="module"/>
Affichage customisé sans les actions
Un nouveau document est disponible
Mi accumsan sollicitudin metus interdum hendrerit massa id morbi suspendisse aliquam fusce sollicitudin tristique vivamus suspendisse sem nisi morbi sollicitudin aliquam nisl leo accumsan facilisis.
Nunc vel et interdum congue enim phasellus interdum orci consectetur molestie purus massa nunc maecenas hendrerit et consectetur mi a massa ut leo adipiscing felis.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="resources" uri="resources" %>
<%--@elvariable id="noactionsViewModel" type="fr.kosmos.web.kore.attributes.interfaces.Notification"--%>
<kuik:heading size="lg" skin="a" title="Affichage customisé sans les actions" level="3" />
<kuik:notification data="${noactionsViewModel}">
<kuik:notification-header data="${noactionsViewModel}" />
<kuik:notification-body data="${noactionsViewModel}" />
</kuik:notification>
<resources:addScript path="/static/js/foldable-content.js" type="module"/>
Affichage avec un body customisé
Un nouveau document est disponible
Mi accumsan sollicitudin metus interdum hendrerit massa id morbi suspendisse aliquam fusce sollicitudin tristique vivamus suspendisse sem nisi morbi sollicitudin aliquam nisl leo accumsan facilisis. Nunc vel et interdum congue enim phasellus interdum orci consectetur molestie purus massa nunc maecenas hendrerit et consectetur mi a massa ut leo adipiscing felis.
<%@ 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="custombodyViewModel" type="fr.kosmos.web.kore.attributes.interfaces.Notification"--%>
<kuik:heading size="lg" skin="a" title="Affichage avec un body customisé" level="3" />
<kuik:notification data="${custombodyViewModel}">
<kuik:notification-body data="${custombodyViewModel}" >
<kuik:icon-content icon="icon://ui/bell" iconTitle="Notification" class="notification__title" size="sm">
<div class="notification__content">
<kuik:heading title="${custombodyViewModel.title}" level="3" size="sm" skin="a"/>
<kuik:date date="${custombodyViewModel.date}" datetime="${custombodyViewModel.isoDate}"/>
<br>
<c:out value="${custombodyViewModel.message}"/><br>
<kuik:button icon="icon://ui/eye" priority="primary">Valider</kuik:button>
</div>
</kuik:icon-content>
</kuik:notification-body>
</kuik:notification>
<resources:addScript path="/static/js/foldable-content.js" type="module"/>
Affichage avec un header customisé
Un nouveau document est disponible
Mi accumsan sollicitudin metus interdum hendrerit massa id morbi suspendisse aliquam fusce sollicitudin tristique vivamus suspendisse sem nisi morbi sollicitudin aliquam nisl leo accumsan facilisis.
Nunc vel et interdum congue enim phasellus interdum orci consectetur molestie purus massa nunc maecenas hendrerit et consectetur mi a massa ut leo adipiscing felis.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="resources" uri="resources" %>
<%--@elvariable id="customheaderViewModel" type="fr.kosmos.web.kore.attributes.interfaces.Notification"--%>
<kuik:heading size="lg" skin="a" title="Affichage avec un header customisé" level="3" />
<kuik:notification data="${customheaderViewModel}">
<kuik:notification-header data="${customheaderViewModel}" >
<kuik:heading title="${customheaderViewModel.title}" level="3" size="sm" skin="a"/>
</kuik:notification-header>
<kuik:notification-body data="${customheaderViewModel}" />
<kuik:notification-actions data="${customheaderViewModel}" />
</kuik:notification>
<resources:addScript path="/static/js/foldable-content.js" type="module"/>
| Name | Type | Required | Description |
|---|---|---|---|
| data | fr.kosmos.web.kore.attributes.interfaces.Notification | true | Les données de la notification |
<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ attribute name="data" type="fr.kosmos.web.kore.attributes.interfaces.Notification" description="Les données de la notification" required="true" %>
<jsp:doBody var="body"/>
<c:choose>
<c:when test="${not empty fn:trim(pageScope.body)}">
<c:out value="${pageScope.body}" escapeXml="false" />
</c:when>
<c:otherwise>
<c:choose>
<c:when test="${not empty pageScope.data.icon}">
<kuik:icon class="notification__type notification__type--icon" source="${pageScope.data.icon}" title="${pageScope.data.type}" size="md" />
</c:when>
<c:otherwise>
<span class="notification__type"><c:out value="${pageScope.data.type}" /></span>
</c:otherwise>
</c:choose>
<kuik:heading class="notification__title" level="3" size="sm">
<c:choose>
<c:when test="${not empty pageScope.data.url}">
<a href="${pageScope.data.url}"><c:out value="${pageScope.data.title}"/></a>
</c:when>
<c:otherwise>
<c:out value="${pageScope.data.title}"/>
</c:otherwise>
</c:choose>
</kuik:heading>
<%--FIXME : voir ce que c'est (cela ressemble à un LinkViewModel, mais il n'existe pas dans ksup-component)
<c:if test="${not empty pageScope.data.thematics}">
<ul class="notification__thematics u-list-naked u-list-gaps u-list-gaps--md">
<c:forEach items="${pageScope.data.thematics.items}" var="thematic">
<li>
<a class="notification__thematic" href="${thematic.url}">
<kuik:cartouche class="cartouche--rounded" size="lg" priority="secondary">
<c:out value="${thematic.label}" />
</kuik:cartouche>
</a>
</li>
</c:forEach>
</ul>
</c:if>
--%>
</c:otherwise>
</c:choose>
.notification {
--notification-fill: var(--neutral-10);
--notification-content: var(--neutral-70);
border-block-end: var(--line-thin) var(--neutral-30);
display: flex;
gap: var(--space-4);
padding: var(--space-8) var(--space-4) var(--space-8) var(--space-8);
position: relative;
}
.notification__body {
display: flex;
flex-direction: column;
flex-grow: 1;
font-size: var(--font-size-40);
gap: var(--space-3);
}
.notification--primary {
--notification-fill: var(--color1-10);
--notification-content: var(--color1-70);
}
.notification__actions {
display: flex;
flex-direction: column;
justify-content: center;
}
.notification__badge {
inset-block-start: var(--space-4);
inset-inline-end: var(--space-4);
position: absolute;
}
.notification__type {
color: var(--neutral-70);
font-weight: var(--font-weight-700);
}
.notification__title {
font-size: var(--font-size-60);
font-weight: var(--font-weight-400);
margin-block: var(--space-0);
a {
color: inherit;
}
}
.notification__thematic {
font-weight: var(--font-weight-400);
&:focus,
&:hover {
background-color: transparent;
}
}
.notification__unfold,
.notification__fold {
border-radius: var(--radius-none);
font-weight: var(--font-weight-700);
inline-size: fit-content;
justify-content: start;
padding: var(--space-0);
}
.notification--folded {
.notification__content {
--_max-lines: var(--max-lines, Infinity);
block-size: fit-content;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: var(--_max-lines);
line-clamp: var(--_max-lines);
overflow: hidden;
}
.notification__fold {
display: none;
}
}
.notification--unfolded {
.notification__unfold {
display: none;
}
}
.notification:not(.notification--foldable) {
.notification__unfold,
.notification__fold {
display: none;
}
}
.notification__datetime {
color: var(--neutral-70);
font-size: var(--font-size-40);
inline-size: fit-content;
text-decoration: none;
}
.notification--unread {
background-color: var(--notification-fill);
.notification__type {
color: var(--notification-content);
}
.notification__title {
color: var(--notification-content);
font-weight: var(--font-weight-700);
}
}package fr.kosmos.web.kore.attributes.interfaces;
import java.util.List;
/**
* Interface représentant une notification.
*/
public interface Notification extends Foldable {
String getIcon();
void setIcon(String icon);
String getType();
void setType(String type);
List getThematics();
void setThematics(List thematics);
String getTitle();
void setTitle(String title);
String getUrl();
void setUrl(String url);
String getMessage();
void setMessage(String message);
String getIsoDate();
void setIsoDate(String date);
String getDate();
void setDate(String date);
boolean isUnread();
void setUnread(boolean unread);
Menu getActions();
void setActions(Menu actions);
}
package fr.kosmos.web.kore.attributes.interfaces;
import fr.kosmos.web.kore.attributes.DefaultLink;
/**
* Modèle d'un item de menu
*/
public interface MenuItem extends Menu {
String getTitle();
void setTitle(String title);
String getLabel();
void setLabel(String label);
String getAriaLabel();
void setAriaLabel(String label);
DefaultLink getLink();
void setLink(DefaultLink link);
String getIcon();
void setIcon(String icon);
String getId();
void setId(String id);
String getTeaser();
void setTeaser(String teaser);
String getTeaserView();
void setTeaserView(String teaserView);
boolean isCurrentAscendant();
void setCurrentAscendant(boolean currentAscendant);
boolean isCurrent();
void setCurrent(boolean current);
String getPriority();
void setPriority(String priority);
}