Adresse
Le composant adresse se compose d'un nom, d'un champ adresse (numero, nom de rue, code postale et ville), ainsi que d'un numéro de téléphone et un email
Classes du composant
Modificateurs de tailles
.address--sm: Small.address--md: Medium.address--lg: Large.address--xl: Extra-large
Exemples
<kuik:address address="${addressObject}" size="xl" />
addressObject étant du type fr.kosmos.web.kore.attributes.Address
Size
sm
Kosmos
md
Kosmos
lg
Kosmos
xl
Kosmos
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%--@elvariable id="addressViewModel" type="fr.kosmos.web.kore.attributes.DefaultAddress"--%>
<kuik:heading size="lg" skin="a" title="Size" level="3" />
<kuik:heading size="lg" title="sm" level="4" />
<p>
<kuik:address address="${addressViewModel}" size="sm" />
</p>
<kuik:heading size="lg" title="md" level="4" />
<p>
<kuik:address address="${addressViewModel}" size="md" />
</p>
<kuik:heading size="lg" title="lg" level="4" />
<p>
<kuik:address address="${addressViewModel}" size="lg" />
</p>
<kuik:heading size="lg" title="xl" level="4" />
<p>
<kuik:address address="${addressViewModel}" size="xl" />
</p>
| Name | Type | Required | Description |
|---|---|---|---|
| address | fr.kosmos.web.kore.attributes.interfaces.Address | true | Information de l'adresse |
| size | java.lang.String | false | Taille (défaut : sm) |
$prefix: 'address';
$prefix-title: 'address__title';
$prefix-content: 'address__content';
.address {
@include custom-space($prefix, true);
@include custom-border($prefix, true);
@include custom-color($prefix, true);
font-style: normal;
}
.address__title {
@include custom-typo($prefix-title, true);
@include custom-color($prefix-title, true);
line-height: 130%; // FIXME : c'est une variable
margin-bottom: var(--space-2);
}
.address__content {
@include custom-space($prefix-content, true);
@include custom-border($prefix-content, true);
@include custom-color($prefix-content, true);
@include custom-typo($prefix-content, true);
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
}
// Sizes
.address--sm, .address--md, .address--lg, .address--xl {
@include custom-space($prefix);
.address__title {
@include custom-space($prefix-title);
@include custom-border($prefix-title);
@include custom-color($prefix-title);
@include custom-typo($prefix-title);
}
.address__content {
@include custom-space($prefix-content);
@include custom-border($prefix-content);
@include custom-color($prefix-content);
@include custom-typo($prefix-content);
}
}
<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ attribute name="address" required="true" type="fr.kosmos.web.kore.attributes.interfaces.Address" description="Information de l'adresse" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<c:if test="${not empty pageScope.address}">
<c:if test="${empty pageScope.size}">
<c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="address--${pageScope.size}"/>
<c:set value="address ${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>
<address class="${pageScope.classes}" ${pageScope.attributes}>
<c:if test="${not empty pageScope.address.title}">
<div class="address__title"><b><c:out value="${pageScope.address.title}"/></b></div>
</c:if>
<div class="address__content">
<c:forEach var="line" items="${pageScope.address.lines}">
<span>${line}</span>
</c:forEach>
<c:if test="${not empty pageScope.address.email}">
<a href="mailto:<c:out value="${pageScope.address.email}" />"><c:out value="${pageScope.address.email}"/></a>
</c:if>
</div>
</address>
</c:if>