Baseline

Tailles

Valeurs possibles du paramètre size

sm

Ceci est une baseline

md

Ceci est une baseline

lg

Ceci est une baseline

xl

Ceci est une baseline

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

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

<p>Valeurs possibles du paramètre <code>size</code></p>

<div class="u-vspacer-xs">
    <kuik:heading size="lg" title="sm" level="4"/>
    <kuik:baseline size="sm">Ceci est une baseline</kuik:baseline>
</div>

<div class="u-vspacer-xs">
    <kuik:heading size="lg" title="md" level="4"/>
    <kuik:baseline size="md">Ceci est une baseline</kuik:baseline>
</div>

<div class="u-vspacer-xs">
    <kuik:heading size="lg" title="lg" level="4"/>
    <kuik:baseline size="lg">Ceci est une baseline</kuik:baseline>
</div>

<div class="u-vspacer-xs">
    <kuik:heading size="lg" title="xl" level="4"/>
    <kuik:baseline size="xl">Ceci est une baseline</kuik:baseline>
</div>

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

<%@ 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="sm"/>
</c:if>
<c:set var="classesSize" value="baseline--${pageScope.size}"/>

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

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

@use 'mixins/mixins-customizables' as custom;

$prefix: 'baseline';

.baseline {
    @include custom.component($prefix, true);

    .icon {
        @include custom.icon;
    }

    display: block;
}

.baseline--sm, .baseline--md, .baseline--lg, .baseline--xl {
    @include custom.component($prefix);
}