Surface

Le composant surface permet de délimiter une zone.

Classes du composant

Modificateurs de tailles

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

Modificateurs de statut

.surface--neutral : Neutre
.surface--bright : Neutre renforcé (fond complètement blanc ou noir, selon le schéma de couleurs)
.surface--accent : Accent
.surface--success : Surface
.surface--error : Erreur

Attributs

L'attribut data-zone-name permet de nommer la zone délimitée par la surface. Cet attribut n'est pas exclusif à ce composant et peut être utilisé ailleurs.

Taille

Small

Medium

Large

X-Large

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

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

<kuik:surface size="sm" status="neutral">
    Small
</kuik:surface>

<div class="u-vspacer-md"></div>

<kuik:surface size="md" status="neutral">
    Medium
</kuik:surface>

<div class="u-vspacer-md"></div>

<kuik:surface size="lg" status="neutral">
    Large
</kuik:surface>

<div class="u-vspacer-md"></div>

<kuik:surface size="xl" status="neutral">
    X-Large
</kuik:surface>

Statut

Neutral

Bright

Accent

Success

Error

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

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

<kuik:surface size="md" status="neutral">
    Neutral
</kuik:surface>

<div class="u-vspacer-md"></div>

<kuik:surface size="md" status="bright">
    Bright
</kuik:surface>

<div class="u-vspacer-md"></div>

<kuik:surface size="md" status="accent">
    Accent
</kuik:surface>

<div class="u-vspacer-md"></div>

<kuik:surface size="md" status="success">
    Success
</kuik:surface>

<div class="u-vspacer-md"></div>

<kuik:surface size="md" status="error">
    Error
</kuik:surface>

Groupes

Voir documentation

Surfaces

empilées

verticalement

Surfaces

regroupées

horizontalement

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

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

<a href="/utilities/surface-group">Voir documentation</a>

<div class="u-vspacer-md"></div>

<div class="u-surface-group-block">
    <kuik:surface size="md" status="neutral">
        Surfaces
    </kuik:surface>
    <kuik:surface size="md" status="neutral">
        empilées
    </kuik:surface>
    <kuik:surface size="md" status="neutral">
        verticalement
    </kuik:surface>
</div>

<div class="u-vspacer-md"></div>

<div class="u-surface-group-inline">
    <kuik:surface size="md" status="neutral">
        Surfaces
    </kuik:surface>
    <kuik:surface size="md" status="neutral">
        regroupées
    </kuik:surface>
    <kuik:surface size="md" status="neutral">
        horizontalement
    </kuik:surface>
</div>

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

<%@ tag trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="resources" uri="resources" %>
<%@ taglib prefix="kuik" uri="kuik" %>

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

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

<c:set var="sizeClass" scope="page"><c:if test="${not empty pageScope.size}">surface--${pageScope.size}</c:if></c:set>
<c:set var="statusClass" scope="page"><c:if test="${not empty pageScope.status}">surface--${pageScope.status}</c:if></c:set>

<c:set var="classes" value="surface ${pageScope.sizeClass} ${pageScope.statusClass}" />

<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>

@use 'abstract/surface' as abstractSurface;
@use 'mixins/mixins-customizables' as custom;

$prefix: 'surface';

.surface {
    @extend %surface;
}

*:has(> .surface) {
    container-name: abstractSurface.$surface-container-name;
    container-type: inline-size;
}

@each $status in custom.$statuses {
    .surface--#{$status} {
        @extend %surface--#{$status};
    }
}

.surface--bright {
    @extend %surface--bright;
}

@each $size in custom.$sizes {
    .surface--#{$size} {
        @extend %surface--#{$size};
    }
}