Icône avec contenu

Ceci est la documentation du composant "icon-content".

Exemples

<kuik:icon-content icon="icon://ui/date" size="sm" iconTitle="Title de l'icon">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam amet autem, earum fugiat laboriosam magnam nesciunt officia ratione, sequi soluta sunt voluptas.
</kuik:icon-content>

Size

Taille sm (défault)

Taille md

Taille lg

Taille xl

Position

Position par défaut de l'icône

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam amet autem, earum fugiat laboriosam magnam nesciunt officia ratione, sequi soluta sunt voluptas. Aliquid architecto ducimus ipsa officiis omnis quas quos, reiciendis tempore. A accusamus, adipisci autem beatae delectus, dicta eaque iste, molestiae nobis perferendis porro quas qui saepe sapiente veniam! Ad asperiores dolorum ea earum iure neque nobis pariatur perspiciatis voluptas voluptate.

Icône centrée verticalement

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

<kuik:heading size="lg" skin="a" title="Size" level="3" />
<p>
    <kuik:icon-content icon="icon://ui/calendar" iconTitle="Title de l'icone" size="sm">
        <kuik:heading title="Taille sm (défault)" level="4"/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam amet autem, earum fugiat laboriosam magnam nesciunt officia ratione, sequi soluta sunt voluptas. Aliquid architecto ducimus ipsa officiis omnis quas quos, reiciendis tempore.
    </kuik:icon-content>
</p>
<p>
    <kuik:icon-content icon="icon://ui/calendar" iconTitle="Title de l'icone" size="md">
        <kuik:heading title="Taille md" level="4"/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam amet autem, earum fugiat laboriosam magnam nesciunt officia ratione, sequi soluta sunt voluptas. Aliquid architecto ducimus ipsa officiis omnis quas quos, reiciendis tempore.
    </kuik:icon-content>
</p>
<p>
    <kuik:icon-content icon="icon://ui/calendar" iconTitle="Title de l'icone" size="lg">
        <kuik:heading title="Taille lg" level="4"/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam amet autem, earum fugiat laboriosam magnam nesciunt officia ratione, sequi soluta sunt voluptas. Aliquid architecto ducimus ipsa officiis omnis quas quos, reiciendis tempore.
    </kuik:icon-content>
</p>
<p>
    <kuik:icon-content icon="icon://ui/calendar" iconTitle="Title de l'icone" size="xl">
        <kuik:heading title="Taille xl" level="4"/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam amet autem, earum fugiat laboriosam magnam nesciunt officia ratione, sequi soluta sunt voluptas. Aliquid architecto ducimus ipsa officiis omnis quas quos, reiciendis tempore.
    </kuik:icon-content>
</p>

<kuik:heading size="lg" skin="a" title="Position" level="3" />
<p>
    <kuik:icon-content icon="icon://ui/calendar" size="xl" iconTitle="">
        <kuik:heading title="Position par défaut de l'icône" level="4"/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam amet autem, earum fugiat laboriosam magnam nesciunt officia ratione, sequi soluta sunt voluptas. Aliquid architecto ducimus ipsa officiis omnis quas quos, reiciendis tempore. A accusamus, adipisci autem beatae delectus, dicta eaque iste, molestiae nobis perferendis porro quas qui saepe sapiente veniam! Ad asperiores dolorum ea earum iure neque nobis pariatur perspiciatis voluptas voluptate.
    </kuik:icon-content>
</p>
<p>
    <kuik:icon-content icon="icon://ui/calendar" size="xl" class="icon-content--centered" iconTitle="">
        <kuik:heading title="Icône centrée verticalement" level="4"/>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam amet autem, earum fugiat laboriosam magnam nesciunt officia ratione, sequi soluta sunt voluptas. Aliquid architecto ducimus ipsa officiis omnis quas quos, reiciendis tempore. A accusamus, adipisci autem beatae delectus, dicta eaque iste, molestiae nobis perferendis porro quas qui saepe sapiente veniam! Ad asperiores dolorum ea earum iure neque nobis pariatur perspiciatis voluptas voluptate.
    </kuik:icon-content>
</p>

Name	Type	Required	Description
icon	java.lang.String	true	URI de l'icone
iconTitle	java.lang.String	true	Titre de l'icone.
size	java.lang.String	false	Taille (défaut : sm)
iconTheme	java.lang.String	false	Couleur de l'icône

.icon-content {
  --gap-size: var(--space-1);

  column-gap: var(--gap-size);
  display: flex;
  row-gap: calc(2 * var(--gap-size));
}

.icon-content--sm {
  --gap-size: var(--space-2);
}

.icon-content--md {
  --gap-size: var(--space-2);
}

.icon-content--lg {
  --gap-size: var(--space-3);
}

.icon-content--xl {
  --gap-size: var(--space-4);
}

.icon-content__icon {
  align-content: center;
  flex-shrink: 0;
  height: fit-content;
}

.icon-content--centered {
  align-items: center;

  .icon-content__icon {
    height: auto;
  }
}

.icon-content__content {
  > :first-child {
    margin-block-start: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }
}

.icon-content--responsive {
  --min-width: var(--size-80);

  flex-wrap: wrap;

  .icon-content__content {
    flex-grow: 1;
    inline-size: var(--min-width);
  }
}

$palettes: (
        'color1', 'color2', 'color3',
        'neutral', 'success', 'error'
);
$variants: (
        'base',
        '10', '20', '30', '40', '50',
        '60', '70', '80', '90', '100'
);

@each $palette in $palettes {
  @each $variant in $variants {
    .icon-content--colored-#{$palette}-#{$variant} {
      .icon {
        --icon-foreground: var(--#{$palette}-#{$variant});
      }
    }
  }
}

<%@ 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="icon" required="true" type="java.lang.String" description="URI de l'icone" %>
<%@ attribute name="iconTitle" required="true" type="java.lang.String" description="Titre de l'icone." %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="iconTheme" required="false" type="java.lang.String" description="Couleur de l'icône" %>

<c:if test="${empty pageScope.size}">
    <c:set var="size" value="sm" />
</c:if>
<c:set var="classesSize" value="icon-content--${pageScope.size}" />
<c:set var="classesIconBoxSize" value="u-icon-box--${pageScope.size}" />

<c:if test="${not empty pageScope.iconTheme}">
    <c:set var="classesIconBoxTheme" value="u-icon-box--${pageScope.iconTheme}" />
</c:if>

<c:set var="classes" value="icon-content ${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>

<c:set var="classesIconBox" value="u-icon-box u-icon-box--block ${classesIconBoxSize} ${classesIconBoxTheme}" />

<div class="${pageScope.classes}" ${pageScope.attributes}>
    <c:if test="${not empty pageScope.icon}">
        <div class="icon-content__icon">
            <div class="${classesIconBox}">
                <kuik:icon source="${pageScope.icon}" size="${pageScope.size}" title="${pageScope.iconTitle}"/>
            </div>
        </div>
    </c:if>
    <div class="icon-content__content">
        <jsp:doBody />
    </div>
</div>