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)
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.
Taille md
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.
Taille lg
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.
Taille xl
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.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
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.<%@ 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>