Identité
Ce composant présente un avatar accompagné d'un texte principal (généralement prénom et nom) et d'un texte secondaire (description, rôle, etc.)
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<kuik:identity link="/" title="Christopher MACHICOANE-HURTAUD" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut dignissimos eaque explicabo hic neque nesciunt quod saepe soluta veniam." />
| Name | Type | Required | Description |
|---|---|---|---|
| link | java.lang.String | false | URL du lien au clic sur le composant |
| avatar | java.lang.String | false | URL de l'image de l'avatar |
| title | java.lang.String | true | Texte principal (nom, prénom…) |
| content | java.lang.String | false | Texte secondaire (description, rôle…) |
| size | java.lang.String | false | Taille du composant |
| status | java.lang.String | false | Statut du composant |
.identity {
--identity-avatar-width: var(--size-8);
--identity-avatar-fill: var(--color2-40);
--identity-avatar-stroke: var(--color2-50);
--identity-column-gap: var(--space-4);
--identity-row-gap: var(--space-0);
--identity-title-font-size: var(--font-size-50);
--identity-content-font-size: var(--font-size-30);
column-gap: var(--identity-column-gap);
display: var(--disp, inline) grid;
grid-template-areas: "avatar title";
row-gap: var(--identity-row-gap);
width: fit-content;
&:has(.identity__content) {
grid-template-areas: "avatar title" "avatar content";
}
&:link {
color: inherit;
text-decoration: none;
}
}
.identity--lg {
--identity-avatar-width: var(--size-18);
--identity-column-gap: var(--space-6);
--identity-row-gap: var(--space-4);
--identity-title-font-size: var(--font-size-70);
--identity-content-font-size: var(--font-size-50);
}
.identity--primary {
--identity-avatar-fill: var(--color1-40);
--identity-avatar-stroke: var(--color1-50);
}
.identity--neutral {
--identity-avatar-fill: var(--neutral-40);
--identity-avatar-stroke: var(--neutral-50);
}
.identity__avatar {
align-self: center;
aspect-ratio: 1;
background-color: var(--identity-avatar-fill);
border-radius: var(--radius-infinite);
color: var(--black);
color-scheme: only dark;
grid-area: avatar;
object-fit: cover;
object-position: center;
overflow: hidden;
width: var(--identity-avatar-width);
}
.identity__avatar--auto {
border: var(--line-thin) var(--identity-avatar-stroke);
display: grid;
padding: var(--space-2);
place-content: center;
text-align: center;
&::after {
content: attr(data-initials);
text-transform: uppercase;
}
}
.identity__title {
align-self: center;
font-size: var(--identity-title-font-size);
font-weight: var(--font-weight-700);
grid-area: title;
}
.identity__content {
font-size: var(--identity-content-font-size);
grid-area: content;
margin-block: 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="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ attribute name="link" required="false" type="java.lang.String" description="URL du lien au clic sur le composant" %>
<%@ attribute name="avatar" required="false" type="java.lang.String" description="URL de l'image de l'avatar" %>
<%@ attribute name="title" required="true" type="java.lang.String" description="Texte principal (nom, prénom…)" %>
<%@ attribute name="content" required="false" type="java.lang.String" description="Texte secondaire (description, rôle…)" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille du composant" %>
<%@ attribute name="status" required="false" type="java.lang.String" description="Statut du composant" %>
<c:set var="tag" value="${not empty pageScope.link ? 'a' : 'span'}" />
<c:if test="${empty size}">
<c:set var="size" value="md" />
</c:if>
<c:if test="${empty status}">
<c:set var="status" value="secondary" />
</c:if>
<c:set var="classes" value="identity identity--${size} identity--${status}" />
<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:if test="${not empty pageScope.link}">href="${pageScope.link}"</c:if>
</c:set>
<c:if test="${not empty pageScope.title or not empty pageScope.content or not empty pageScope.avatar}">
<${pageScope.tag} class="${pageScope.classes}" ${pageScope.attributes}>
<c:choose>
<c:when test="${not empty pageScope.avatar}">
<img class="identity__avatar" src="<c:out value="${pageScope.avatar}" />" alt="">
</c:when>
<c:otherwise>
<span class="identity__avatar identity__avatar--auto" data-initials="${fn:substring(title, 0, 1)}"></span>
</c:otherwise>
</c:choose>
<div class="identity__title">
<c:out value="${pageScope.title}" />
</div>
<c:if test="${not empty pageScope.content}">
<p class="identity__content">
<c:out value="${pageScope.content}" escapeXml="false" />
</p>
</c:if>
</${pageScope.tag}>
</c:if>