Lieu

Le composant place se compose d'une icone et d'un lieu.

Classes du composant

Modificateurs de tailles

.place--sm : Small
.place--md : Medium
.place--lg : Large
.place--xl : Extra-large

Size

Lieu

<%@ 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:place size="sm">Lieu</kuik:place>
    <kuik:place size="md">Lieu</kuik:place>
    <kuik:place size="lg">Lieu</kuik:place>
    <kuik:place size="xl">Lieu</kuik:place>
</p>

Name	Type	Required	Description
size	java.lang.String	false	Taille (défaut : sm)
icon	java.lang.String	false	Icon (défaut : icon://ui/place)

$prefix: 'place';
$prefix-name: 'place-name';

.place {
  @include custom-border($prefix, true);
  @include custom-color($prefix, true);
  @include custom-gap($prefix, true);
  @include custom-padding($prefix, true);

  align-items: center;
  display: inline-flex;
}

.place__icon {
  @include custom-icon;
}

.place__name {
  @include custom-typo($prefix-name, true);

  line-height: 130%;
}

.place--sm, .place--md, .place--lg, .place--xl {
  @include custom-border($prefix);
  @include custom-gap($prefix);
  @include custom-padding($prefix);

  .place__icon {
    @include custom-icon;
  }

  .place__name {
    @include custom-typo($prefix-name);
  }
}

.placement {
  display: flex;
  filter: drop-shadow(0 0.0625rem 0.6875rem rgba(0 0 0 / 12%));
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--size-130);
  padding: var(--space-4);
  position: fixed;
  width: 100%;
}

.placement--nw {
  left: 0;
  top: 0;
}

.placement--n {
  left: 50%;
  top: 0;
  translate: -50% 0;
}

.placement--ne {
  right: 0;
  top: 0;
}

.placement--w {
  left: 0;
  top: 50%;
  translate: 0 -50%;
}

.placement--e {
  right: 0;
  top: 50%;
  translate: 0 -50%;
}

.placement--sw {
  bottom: 0;
  left: 0;
}

.placement--s {
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}

.placement--se {
  bottom: 0;
  right: 0;
}

<%@ 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="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="icon" required="false" type="java.lang.String" description="Icon (défaut : icon://ui/place)" %>

<c:if test="${empty pageScope.icon}">
    <c:set var="icon" value="icon://ui/place" />
</c:if>

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

<c:set value="place ${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>

<div class="${pageScope.classes}" ${pageScope.attributes}>
    <%-- FIXME : pas de libellé en dur dans le tag --%>
    <kuik:icon class="place__icon" source="${pageScope.icon}" title="Lieu" size="${pageScope.size}" />
    <span class="place__name">
        <jsp:doBody />
    </span>
</div>