Placement

Ce composant permet d'agencer des éléments flottants dans un coin de la fenêtre.

Classes du composant

Modificateurs de positionnement

placement--nw : Zone affichée dans le coin supérieur gauche de la fenêtre
placement--n : Zone affichée au milieu du bord supérieur de la fenêtre
placement--ne : Zone affichée dans le coin supérieur droit de la fenêtre
placement--w : Zone affichée au milieu du bord gauche de la fenêtre
placement--e : Zone affichée au milieu du bord droit de la fenêtre
placement--sw : Zone affichée dans le coin inférieur gauche de la fenêtre
placement--s : Zone affichée au milieu du bord inférieur de la fenêtre
placement--se : Zone affichée dans le coin inférieur droit de la fenêtre

Positionnement

Est (e)

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.

Urna nulla metus accumsan massa sed suspendisse gravida urna tincidunt a eu sit quisque aliquam hendrerit orci et magna id accumsan euismod erat ex adipiscing.
Non

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Positionnement" level="3" />

<kuik:heading size="lg" title="Est (e)" level="4" />

<kuik:placement position="e">
    <kuik:message icon="icon://ui/info" closeIconTitle="Sollicitudin">
        <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>
            <i>Urna nulla metus accumsan massa sed suspendisse gravida urna tincidunt a eu sit quisque aliquam hendrerit orci et magna id accumsan euismod erat ex adipiscing.</i><br>
            <a class="button button--tertiary" href="#"><kuik:icon title="Aide" source="icon://ui/help" size="md"/></a>
            <a class="button button--tertiary button--md" href="#">Non</a>
            <kuik:button class="button--primary button--md">Oui</kuik:button>
        </kuik:message-footer>
    </kuik:message>
</kuik:placement>

Name	Type	Required	Description
position	java.lang.String	true	Position de l'élément (n,ne,e, se,s,sw,w,nw)

.placement {
  display: flex;
  filter: drop-shadow(0 0.0625rem 0.6875rem rgba(0 0 0 / 12%));
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--size-130);
  padding: var(--space-4);
  position: fixed;
  width: 100%;
}

.placement--nw {
  left: 0;
  top: 0;
}

.placement--n {
  left: 50%;
  top: 0;
  translate: -50% 0;
}

.placement--ne {
  right: 0;
  top: 0;
}

.placement--w {
  left: 0;
  top: 50%;
  translate: 0 -50%;
}

.placement--e {
  right: 0;
  top: 50%;
  translate: 0 -50%;
}

.placement--sw {
  bottom: 0;
  left: 0;
}

.placement--s {
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}

.placement--se {
  bottom: 0;
  right: 0;
}

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

<%@ attribute name="position" required="true" type="java.lang.String" description="Position de l'élément (n,ne,e, se,s,sw,w,nw)" %>

<c:set value="placement placement--${pageScope.position}" 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}>
    <jsp:doBody/>
</div>