Thème

Mode

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
title	java.lang.String	false	Le titre du message
level	java.lang.String	false	le niveau du titre (défault: 2)

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ attribute name="title" required="false" type="java.lang.String" description="Le titre du message" %>
<%@ attribute name="level" required="false" type="java.lang.String" description="le niveau du titre (défault: 2)" %>

<c:if test="${empty pageScope.level}">
    <c:set var="level" value="2" />
</c:if>

<c:set value="message__header" 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.title}">
        <span class="message__title"> ${pageScope.title} </span>
    </c:if>
    <jsp:doBody/>
</div>

@use 'mixins/mixins-customizables' as custom;
@use 'mixins/mixins-accessibility' as accessibility;

$prefix: 'message';
$prefix-title: 'message-title';
$prefix-content: 'message-content';
$prefix-actions: 'message-actions';

.message {
    @include custom.component($prefix, true);

    align-items: start;
    display: grid;

    .icon {
        @include custom.icon;
    }
}

.message__picture {
    display: contents;
    grid-column: 1;
    grid-row: 1;
}

.message__header {
    grid-column: 1;
    grid-row: 1;
}

.message__title {
    @include custom.component($prefix-title, true);
}

.message__close {
    display: contents;
    grid-row: 1;
}

.message__close-label {
    @include accessibility.visually-hidden;
}

.message__body {
    @include custom.component($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.component($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.component($prefix);
    @include custom.icon;

    .message__title {
        @include custom.component($prefix-title);
    }
}

.message--sm, .message--md, .message--lg, .message--xl {
    @include custom.component($prefix);

    .message__title {
        @include custom.component($prefix-title);
    }

    .message__body {
        @include custom.component($prefix-content);
    }

    .message__actions {
        @include custom.component($prefix-actions);
    }
}