Dropdown
Un dropdown affiche une liste d'actions ou d'options à l'intention d'un utilisateur.
Tailles
Avec icône
Aligné à droite
Autres formes
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<kuik:heading size="lg" skin="a" title="Tailles" level="3" />
<kuik:dropdown description="Simple sm" title="Simple sm" id="test1" size="sm">
<img src="https://picsum.photos/400/300?random=1" alt="">
</kuik:dropdown>
<kuik:dropdown description="Simple md" title="Simple md" id="test2" size="md">
<img src="https://picsum.photos/400/300?random=2" alt="">
</kuik:dropdown>
<kuik:dropdown description="Simple lg" title="Simple lg" id="test3" size="lg">
<img src="https://picsum.photos/400/300?random=3" alt="">
</kuik:dropdown>
<kuik:dropdown description="Simple xl" title="Simple xl" id="test4" size="xl">
<img src="https://picsum.photos/400/300?random=4" alt="">
</kuik:dropdown>
<kuik:heading size="lg" skin="a" title="Avec icône" level="3" />
<kuik:dropdown description="test" title="test" id="test5" icon="icon://ui/search">
<img src="https://picsum.photos/600/300?random=5" alt="">
</kuik:dropdown>
<kuik:heading size="lg" skin="a" title="Aligné à droite" level="3" />
<kuik:dropdown description="test" title="test" id="test6" icon="icon://ui/search" popoverClasses="u-popover__content--right">
<img src="https://picsum.photos/200/300?random=6" alt="">
</kuik:dropdown>
<kuik:heading size="lg" skin="a" title="Autres formes" level="3" />
<kuik:dropdown priority="secondary" status="error" description="test" title="test" id="test6" icon="icon://ui/search">
<img src="https://picsum.photos/200/300?random=7" alt="">
</kuik:dropdown>
| Name | Type | Required | Description |
|---|---|---|---|
| title | java.lang.String | true | |
| description | java.lang.String | false | |
| size | java.lang.String | false | Taille (défaut : md) |
| popoverClasses | java.lang.String | false | Classes ajoutées au popover |
| icon | java.lang.String | false | Icone à ajouter avant le titre |
| priority | java.lang.String | false | |
| status | java.lang.String | false | |
| iconOnly | java.lang.Boolean | false | N'affiche que l'icône dans le bouton |
| defaultPopoverInlinePosition | java.lang.String | false | Position par défaut du popover sur l'axe inline |
<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ tag import="java.util.UUID" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ attribute name="title" required="true" type="java.lang.String" %>
<%@ attribute name="description" required="false" type="java.lang.String" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : md)" %>
<%@ attribute name="popoverClasses" required="false" type="java.lang.String" description="Classes ajoutées au popover" %>
<%@ attribute name="icon" required="false" type="java.lang.String" description="Icone à ajouter avant le titre" %>
<%@ attribute name="priority" required="false" type="java.lang.String" %>
<%@ attribute name="status" required="false" type="java.lang.String" %>
<%@ attribute name="iconOnly" required="false" type="java.lang.Boolean" description="N'affiche que l'icône dans le bouton" %>
<%@ attribute name="defaultPopoverInlinePosition" required="false" type="java.lang.String" description="Position par défaut du popover sur l'axe inline" %>
<c:if test="${empty pageScope.priority}">
<c:set var="priority" value="primary" />
</c:if>
<c:set var="classesPriority" value="button--${pageScope.priority}"/>
<c:if test="${empty pageScope.status}">
<c:set var="status" value="accent" />
</c:if>
<c:set var="classesStatus" value="button--${pageScope.status}"/>
<c:if test="${not empty pageScope.size}">
<c:set var="classesSize" value="button--${pageScope.size}"/>
</c:if>
<c:if test="${pageScope.iconOnly}">
<c:set var="classesIconOnly" value="button--icon-only" />
</c:if>
<c:if test="${empty pageScope.popovertargetaction}">
<c:set var="popovertargetaction" value="toggle" />
</c:if>
<c:if test="${not empty pageScope.defaultPopoverInlinePosition}">
<c:set var="classesDefaultPopoverInlinePosition" value="u-popover__content--${pageScope.defaultPopoverInlinePosition}" />
</c:if>
<c:set var="classes" value="u-popover button button--no-wrap ${pageScope.classesPriority} ${pageScope.classesStatus} ${pageScope.classesSize} ${pageScope.classesIconOnly}" />
<c:set var="classesPopover" value="u-popover__content ${pageScope.classesDefaultPopoverInlinePosition} ${pageScope.popoverClasses}" />
<c:set var="key" value="${UUID.randomUUID().toString()}" />
<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:when test="${a.key == 'popovertargetaction'}">
<c:set var="popovertargetaction" value="${a.value}" />
</c:when>
<c:otherwise>${a.key}="${a.value}" </c:otherwise>
</c:choose>
</c:forEach>
</c:set>
<button
type="button"
popovertarget="${pageScope.key}-popover"
popovertargetaction="${pageScope.popovertargetaction}"
style="anchor-name: --${pageScope.key}"
class="${pageScope.classes}"
${pageScope.attributes}
>
<c:if test="${not empty pageScope.icon}">
<kuik:icon title="${pageScope.iconOnly ? pageScope.title : ''}" source="${pageScope.icon}" size="${pageScope.size}"/>
</c:if>
<c:if test="${not empty pageScope.description}">
<span class="visually-hidden">${pageScope.description}</span>
</c:if>
<c:if test="${not pageScope.iconOnly}">
<span class="u-popover__title u-text-ellipsis">${pageScope.title}</span>
</c:if>
<c:if test="${not pageScope.iconOnly or empty pageScope.icon}">
<kuik:icon class="u-mis-auto" title="${empty pageScope.icon and pageScope.iconOnly ? pageScope.title : ''}" source="icon://ui/chevron-down" size="${pageScope.size}"/>
</c:if>
</button>
<div
popover
id="${pageScope.key}-popover"
style="--anchor-name: --${pageScope.key}"
class="${pageScope.classesPopover}"
>
<jsp:doBody />
</div>