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>