Liste d'informations

Une liste d'objets possédant chacun un titre et un contenu.

Classes du composant

Modificateurs de tailles

info-list--sm : Small
info-list--md : Medium
info-list--lg : Large
info-list--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" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

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

<kuik:heading size="lg" title="sm" level="4" />
<p>
    <kuik:info-list size="sm" >
        <c:forEach items="${infoList}" var="info">
            <kuik:info-list-item title="${info.title}">
                <div class="rich_text"><c:out value="${info.content}" escapeXml="false"/></div>
            </kuik:info-list-item>
        </c:forEach>
    </kuik:info-list>
</p>

<kuik:heading size="lg" title="md" level="4" />
<p>
    <kuik:info-list size="md" >
        <c:forEach items="${infoList}" var="info">
            <kuik:info-list-item title="${info.title}">
                <div class="rich_text"><c:out value="${info.content}" escapeXml="false"/></div>
            </kuik:info-list-item>
        </c:forEach>
    </kuik:info-list>
</p>

<kuik:heading size="lg" title="lg" level="4" />
<p>
    <kuik:info-list size="lg" >
        <c:forEach items="${infoList}" var="info">
            <kuik:info-list-item title="${info.title}">
                <div class="rich_text"><c:out value="${info.content}" escapeXml="false"/></div>
            </kuik:info-list-item>
        </c:forEach>
    </kuik:info-list>
</p>

<kuik:heading size="lg" title="xl" level="4" />
<p>
    <kuik:info-list size="xl" >
        <c:forEach items="${infoList}" var="info">
            <kuik:info-list-item title="${info.title}">
                <div class="rich_text"><c:out value="${info.content}" escapeXml="false"/></div>
            </kuik:info-list-item>
        </c:forEach>
    </kuik:info-list>
</p>

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

$prefix: 'info-list';
$prefix-item: 'info-list-item';
$prefix-item-title: 'info-list-item-title';
$prefix-item-description: 'info-list-item-description';

.info-list {
  @include custom-color-content($prefix, true);
  @include custom-color-fill($prefix, true);

  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 0;
}

.info-list-item {
  @include custom-border($prefix-item, true);
  @include custom-color-stroke($prefix-item, true);

  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.info-list-item__title {
  @include custom-color-content($prefix-item-title, true);
  @include custom-padding($prefix-item-title, true);
  @include custom-typo($prefix-item-title, true);

  align-content: center;
}

.info-list-item__description {
  @include custom-padding($prefix-item-description, true);
  @include custom-typo($prefix-item-description, true);

  margin-inline-start: 0;
}

.info-list--sm, .info-list--md, .info-list--lg, .info-list--xl {
  .info-list-item {
    @include custom-border($prefix-item);
  }

  .info-list-item__title {
    @include custom-padding($prefix-item-title);
    @include custom-typo($prefix-item-title);
  }

  .info-list-item__description {
    @include custom-padding($prefix-item-description);
    @include custom-typo($prefix-item-description);
  }
}

*:has(> .info-list) {
  container-type: inline-size;
}

@container (width < 30rem) {
  .info-list {
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
  }
}

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

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

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

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

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

<div class="${pageScope.classes}" ${pageScope.attributes}>
    <jsp:doBody/>
</div>