Date
Le composant date se compose d'une icone et d'une date.
Note : si la date fournie est vide, rien n'est affiché.
Classes du composant
Modificateurs de tailles
.date--sm: Small.date--md: Medium.date--lg: Large.date--xl: Extra-large
Size
sm
md
lg
xl
<%@ 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" />
<kuik:heading size="lg" title="sm" level="4" />
<p>
<kuik:date size="sm" date="Du 15 octobre 2023 au 17 juin 2024"/>
</p>
<kuik:heading size="lg" title="md" level="4" />
<p>
<kuik:date size="md" date="Du 15 octobre 2023 au 17 juin 2024"/>
</p>
<kuik:heading size="lg" title="lg" level="4" />
<p>
<kuik:date size="lg" date="Du 15 octobre 2023 au 17 juin 2024"/>
</p>
<kuik:heading size="lg" title="xl" level="4" />
<p>
<kuik:date size="xl" date="Du 15 octobre 2023 au 17 juin 2024"/>
</p>
| Name | Type | Required | Description |
|---|---|---|---|
| date | java.lang.String | true | Données de la date à afficher |
| size | java.lang.String | false | Taille (défaut : sm) |
| icon | java.lang.String | false | Icône (défaut : calendar) |
$prefix: 'date';
$prefix-item: 'date-item';
.date {
@include custom-space($prefix, true);
@include custom-border($prefix, true);
@include custom-color($prefix, true);
align-items: center;
display: inline-flex;
.icon {
@include custom-icon;
}
}
.date__item {
@include custom-typo($prefix-item, true);
}
.date--sm, .date--md, .date--lg, .date--xl {
@include custom-space($prefix);
@include custom-border($prefix);
.date__item {
@include custom-typo($prefix-item);
}
.icon {
@include custom-icon-size;
}
}
<%@ 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="date" required="true" type="java.lang.String" description="Données de la date à afficher" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="icon" required="false" type="java.lang.String" description="Icône (défaut : calendar)" %>
<c:if test="${not empty pageScope.date}">
<c:if test="${empty pageScope.icon}">
<c:set var="icon" value="icon://ui/calendar" />
</c:if>
<c:if test="${empty pageScope.size}">
<c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="date--${pageScope.size}"/>
<c:set value="date ${pageScope.classesSize}" var="classes"/>
<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>
<time class="${pageScope.classes}" ${pageScope.attributes}>
<kuik:icon title="" class="date__icon" source="${pageScope.icon}" />
<span class="date__item"><c:out value="${pageScope.date}"/></span>
</time>
</c:if>