Chip

Le composant chip se compose d'un label, d'un picto et d'un bouton de fermeture facultatifs.

Il prend en paramètre les éléments suivants :

label : Le texte du composant
icon : Le picto du composant
size : Définit la taille du composant
closable : Définit si un bouton de fermeture est affiché

Chip sm Chip md Chip lg Chip xl

Chip succès Chip succès Chip succès Chip succès

Chip sans icon

Chip non fermable

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

<kuik:chip icon="icon://ui/asterisk" size="sm" label="Chip sm"/>
<kuik:chip icon="icon://ui/asterisk" size="md" label="Chip md"/>
<kuik:chip icon="icon://ui/asterisk" size="lg" label="Chip lg"/>
<kuik:chip icon="icon://ui/asterisk" size="xl" label="Chip xl"/>

<hr>

<kuik:chip icon="icon://ui/asterisk" size="sm" label="Chip succès" closable="true" />
<kuik:chip icon="icon://ui/asterisk" size="md" label="Chip succès" closable="true" />
<kuik:chip icon="icon://ui/asterisk" size="lg" label="Chip succès" closable="true" />
<kuik:chip icon="icon://ui/asterisk" size="xl" label="Chip succès" closable="true" />

<hr>

<kuik:chip size="md" label="Chip sans icon" closable="true"/>

<hr>

<kuik:chip icon="icon://ui/asterisk" label="Chip non fermable"/>

Name	Type	Required	Description
label	java.lang.String	true	Libellé du composant
icon	java.lang.String	false	Icon du libellé
size	java.lang.String	false	Taille (défaut : sm)
closable	java.lang.Boolean	false	Indique si le composant peut être fermé
closeIconTitle	java.lang.String	false	Le libellé du bouton de fermeture

$prefix: 'chip';

.chip {
  @include custom-space($prefix, true);
  @include custom-border($prefix, true);
  @include custom-color($prefix, true);
  @include custom-typo($prefix, true);

  align-items: center;
  display: inline-flex;
  line-height: var(--line-height-x-condensed);

  .icon {
    @include custom-icon-size;
  }
}

.chip--sm, .chip--md, .chip--lg, .chip--xl {
  @include custom-space($prefix);
  @include custom-border($prefix);
  @include custom-typo($prefix);

  .icon {
    @include custom-icon-size;
  }
}

.chip__close {
  @include custom-icon-color;

  background-color: transparent;
  padding: var(--space-0);
}

<%@ 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="label" required="true" type="java.lang.String" description="Libellé du composant" %>
<%@ attribute name="icon" required="false" type="java.lang.String" description="Icon du libellé" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="closable" required="false" type="java.lang.Boolean" description="Indique si le composant peut être fermé" %>
<%@ attribute name="closeIconTitle" required="false" type="java.lang.String" description="Le libellé du bouton de fermeture" %>

<c:if test="${empty pageScope.size}">
    <c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="chip--${pageScope.size}"/>

<c:set var="classes" value="chip ${pageScope.classesSize}"/>

<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>

<span class="${pageScope.classes}" ${pageScope.attributes}>
    <c:if test="${not empty pageScope.icon}">
        <kuik:icon title="" source="${pageScope.icon}" />
    </c:if>
    <span>${pageScope.label}</span>
    <c:if test="${pageScope.closable}">
        <kuik:button priority="neutral" size="${pageScope.size}" icon="true" class="chip__close">
            <kuik:icon title="${pageScope.closeIconTitle}" source="icon://ui/close" size="sm"/>
            <c:if test="${not empty pageScope.closeIconTitle}">
                <span class="visually-hidden">${pageScope.closeIconTitle}</span>
            </c:if>
        </kuik:button>
    </c:if>
</span>