Cartouche

Le composant cartouche se compose d'un label entouré de 2 pictos.

Classes du composant

Modificateurs d'apparence

.cartouche--primary : Primaire
.cartouche--secondary : Secondaire

Modificateurs de tailles

.cartouche--sm : Small
.cartouche--md : Medium
.cartouche--lg : Large
.cartouche--xl : Extra-large

Exemples

<kuik:cartouche size="sm">Cartouche sm</kuik:cartouche>
<kuik:cartouche priority="secondary">Secondary</kuik:cartouche>
<kuik:cartouche priority="tertiary" size="lg">Secondary</kuik:cartouche>

Priority

Primary Secondary

Size

Cartouche sm Cartouche md Cartouche lg Cartouche xl

Size

Cartouche icon Cartouche icon Cartouche icon Cartouche icon

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

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

<p>
    <kuik:cartouche>Primary</kuik:cartouche>
    <kuik:cartouche priority="secondary">Secondary</kuik:cartouche>
</p>

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

<p>
    <kuik:cartouche size="sm">Cartouche sm</kuik:cartouche>
    <kuik:cartouche size="md">Cartouche md</kuik:cartouche>
    <kuik:cartouche size="lg">Cartouche lg</kuik:cartouche>
    <kuik:cartouche size="xl">Cartouche xl</kuik:cartouche>
</p>

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

<p>
    <kuik:cartouche size="sm">
        <kuik:icon title="" source="icon://ui/info" />Cartouche icon
    </kuik:cartouche>
    <kuik:cartouche size="md">
        <kuik:icon title="" source="icon://ui/info" />Cartouche icon
    </kuik:cartouche>
    <kuik:cartouche size="lg">
        <kuik:icon title="" source="icon://ui/info" />Cartouche icon
    </kuik:cartouche>
    <kuik:cartouche size="xl">
        <kuik:icon title="" source="icon://ui/info" />Cartouche icon
    </kuik:cartouche>

</p>

Name	Type	Required	Description
priority	java.lang.String	false	Priorité du composant
size	java.lang.String	false	Taille (défaut : sm)

$prefix: 'cartouche';

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

  align-items: center;
  display: inline-flex;


  .icon {
    @include custom-icon;
  }
}

.cartouche--primary, .cartouche--secondary {
  @include custom-color($prefix);

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

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

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

.cartouche--rounded {
  border-radius: var(--radius-infinite);
}

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ attribute name="priority" required="false" type="java.lang.String" description="Priorité du composant" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>

<c:if test="${empty pageScope.priority}">
    <c:set var="priority" value="primary" />
</c:if>
<c:set var="classesPriority" value="cartouche--${pageScope.priority}"/>

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

<c:set var="classes" value="cartouche ${pageScope.classesPriority} ${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}>
    <jsp:doBody/>
</span>