Message
Un composant présentant un encart informatif, composé d'un texte descriptif, et possiblement un pictogramme, un titre, des actions et une croix de fermeture.
Classes du composant
Modificateurs d'apparence
message--neutral: Message neutre (gris)message--success: Message informant d'une réussite (vert)message--error: Message informant d'un échec (jaune)
Note : ces classes peuvent être omises. Par défaut, le message présentera une apparence informative (neutre).
Taille
sm
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
md
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
lg
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
xl
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
Apparence
Neutral
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
Accent
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
Success
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
Error
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
Icon
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
Title
Titre du message
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
Bouton de fermeture
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
Exemple complet
Titre du message
Diam eu maximus fusce sollicitudin placerat lorem molestie leo gravida interdum nunc cursus condimentum felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<kuik:heading size="lg" skin="a" title="Taille" level="3" />
<kuik:heading size="lg" title="sm" level="4" />
<p>
<kuik:message size="sm">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" title="md" level="4" />
<p>
<kuik:message size="md">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" title="lg" level="4" />
<p>
<kuik:message size="lg">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" title="xl" level="4" />
<p>
<kuik:message size="xl">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" skin="a" title="Apparence" level="3" />
<kuik:heading size="lg" title="Neutral" level="4" />
<p>
<kuik:message>
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" title="Accent" level="4" />
<p>
<kuik:message type="accent">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" title="Success" level="4" />
<p>
<kuik:message type="success">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" title="Error" level="4" />
<p>
<kuik:message type="error">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" skin="a" title="Icon" level="3" />
<p>
<kuik:message icon="icon://ui/help">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" skin="a" title="Title" level="3" />
<p>
<kuik:message>
<kuik:message-header title="Titre du message" />
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" skin="a" title="Bouton de fermeture" level="3" />
<p>
<kuik:message closeIconTitle="Sollicitudin">
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
</kuik:message>
</p>
<kuik:heading size="lg" skin="a" title="Exemple complet" level="3" />
<p>
<kuik:message icon="icon://ui/info" closeIconTitle="Sollicitudin" type="success">
<kuik:message-header title="Titre du message" />
<kuik:message-body>
Diam eu maximus fusce <strong>sollicitudin</strong> placerat lorem <i>molestie</i> leo gravida interdum nunc <u>cursus condimentum</u> felis facilisis nisi rutrum condimentum sollicitudin purus purus ipsum suspendisse nisl.
</kuik:message-body>
<kuik:message-footer>
<kuik:button priority="tertiary" status="neutral" icon="true" size="md"><kuik:icon title="Aide" source="icon://ui/help" size="md"/></kuik:button>
<kuik:button priority="tertiary" status="neutral" size="md">Non</kuik:button>
<kuik:button priority="primary" status="success" size="md">Oui</kuik:button>
</kuik:message-footer>
</kuik:message>
</p>
| Name | Type | Required | Description |
|---|---|---|---|
| type | java.lang.String | false | Type de message (défault: neutral) |
| icon | java.lang.String | false | URI de l'icone |
| iconTitle | java.lang.String | false | Title de l'icone |
| closeIconTitle | java.lang.String | false | Le libellé du bouton de fermeture |
| size | java.lang.String | false | Taille (défaut : sm) |
$prefix: "message";
$prefix-title: "message-title";
$prefix-content: "message-content";
$prefix-actions: "message-actions";
.message {
@include custom-space($prefix, true);
@include custom-border($prefix, true);
@include custom-color($prefix, true);
@include custom-icon;
align-items: start;
display: grid;
}
.message__picture {
display: contents;
grid-column: 1;
grid-row: 1;
}
.message__header {
grid-column: 1;
grid-row: 1;
}
.message__title {
@include custom-color-content($prefix-title, true);
@include custom-typo($prefix-title, true);
}
.message__close {
display: contents;
grid-row: 1;
}
.message__close-label {
@include visually-hidden;
}
.message__body {
@include custom-typo($prefix-content, true);
grid-column: 1;
grid-row: 1;
}
.message__header,
.message__body {
> :first-child {
margin-block-start: 0;
}
> :last-child {
margin-block-end: 0;
}
}
.message__footer {
grid-column: 1 / -1;
}
.message__actions {
@include custom-gap($prefix-actions, true);
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin-block: var(--space-2) 0;
}
// Cas spécifiques d'affichages selon les éléments présents
.message:has(.message__picture) {
grid-template-columns: min-content 1fr;
.message__header,
.message__body {
grid-column-start: 2;
}
}
.message:has(.message__header) {
.message__body {
grid-column-end: -1;
grid-row-start: 2;
}
}
.message:has(.message__close) {
grid-template-columns: 1fr min-content;
}
.message:has(.message__picture):has(.message__close) {
grid-template-columns: min-content 1fr min-content;
}
// Variantes de couleurs
.message--neutral, .message--accent, .message--success, .message--error {
@include custom-color($prefix);
@include custom-icon;
.message__title {
@include custom-color-content($prefix-title);
}
}
.message--sm, .message--md, .message--lg, .message--xl {
@include custom-space($prefix);
@include custom-border($prefix);
.message__title {
@include custom-typo($prefix-title);
}
.message__body {
@include custom-typo($prefix-content);
}
.message__actions {
@include custom-gap($prefix-actions);
}
}
<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ attribute name="type" required="false" type="java.lang.String" description="Type de message (défault: neutral)" %>
<%@ attribute name="icon" required="false" type="java.lang.String" description="URI de l'icone" %>
<%@ attribute name="iconTitle" required="false" type="java.lang.String" description="Title de l'icone" %>
<%@ attribute name="closeIconTitle" required="false" type="java.lang.String" description="Le libellé du bouton de fermeture" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<c:if test="${empty pageScope.size}">
<c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="message--${pageScope.size}"/>
<c:if test="${not empty pageScope.type}">
<c:set var="classesType" value="message--${pageScope.type}" />
</c:if>
<c:set value="message ${classesType} ${classesSize}" var="classes"/>
<c:set var="attributes">
<c:forEach items="${dynattrs}" var="a">
<c:choose>
<c:when test="${a.key == 'class'}">
<c:set value="${classes} ${a.value}" var="classes"/>
</c:when>
<c:otherwise>${a.key}="${a.value}" </c:otherwise>
</c:choose>
</c:forEach>
</c:set>
<div class="${pageScope.classes}" ${pageScope.attributes}>
<c:if test="${not empty pageScope.icon}">
<div class="message__picture">
<kuik:icon title="${pageScope.iconTitle}" source="${pageScope.icon}" size="md"/>
<c:if test="${not empty pageScope.iconTitle}">
<span class="visually-hidden">${pageScope.iconTitle}</span>
</c:if>
</div>
</c:if>
<c:if test="${not empty pageScope.closeIconTitle}">
<div class="message__close">
<kuik:button priority="tertiary" status="${pageScope.type}" icon="true">
<kuik:icon title="${pageScope.closeIconTitle}" source="icon://ui/close" />
<span class="message__close-label">${pageScope.closeIconTitle}</span>
</kuik:button>
</div>
</c:if>
<jsp:doBody/>
</div>