Titre

Ceci est la documentation du composant "title".

Exemples

<kuik:heading title="Titre de section" level="3" />

Le tag est transformé en <hn>, si level est supérieur à 6, le title devient un div

Title

Niveau 1

Niveau 2

Niveau 3

Niveau 4

Niveau 5

Niveau 6

Niveau 7

Size

Niveau 3

Avec corps

Titre de la page

Habillage

Skin a

Niveau 4

Skin b

Niveau 4

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

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

<p>
    <kuik:heading title="Niveau 1" level="1" />
    <kuik:heading title="Niveau 2" level="2" />
    <kuik:heading title="Niveau 3" level="3" />
    <kuik:heading title="Niveau 4" level="4" />
    <kuik:heading title="Niveau 5" level="5" />
    <kuik:heading title="Niveau 6" level="6" />
    <kuik:heading title="Niveau 7" level="7" />
</p>

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

<p>
    <kuik:heading title="Niveau 3" level="3" size="sm" />
    <kuik:heading title="Niveau 3" level="3" size="md" />
    <kuik:heading title="Niveau 3" level="3" size="lg" />
    <kuik:heading title="Niveau 3" level="3" size="xl" />
</p>

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

<p>
    <kuik:heading level="4" size="xl" >
        <a href="#">Titre de la page</a>
    </kuik:heading>
</p>

<hr>
<kuik:heading size="lg" title="Habillage" level="3" />

<kuik:heading size="lg" skin="a" title="Skin a" level="4" />

<p>
    <kuik:heading title="Niveau 4" level="4" skin="a" />
</p>

<kuik:heading size="lg" skin="b" title="Skin b" level="4" />

<p>
    <kuik:heading title="Niveau 4" level="4" skin="b" />
</p>

Name	Type	Required	Description
title	java.lang.String	false	Titre. Si le tag contient un body, il se subsitue à l'attribut title
level	java.lang.Integer	false	Niveau du titre de 1 à 6. Devient un div au delà.
skin	java.lang.String	false	Style du titre
size	java.lang.String	false	Taille (défaut : sm)

$prefix: 'heading';

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

  :link {
    text-decoration: none;
  }
}

.heading--1, .heading--2, .heading--3, .heading--4, .heading--5, .heading--6 {
  &.heading--sm, &.heading--md, &.heading--lg, &.heading--xl {
    @include custom-typo($prefix);
  }
}

.heading--skin-a {
  line-height: 130%;

  &::after {
    background-color: currentcolor;
    content: '';
    display: block;
    height: var(--space-1);
    margin-top: var(--space-2);;
    width: var(--space-12);
  }
}

.heading--skin-b {
  line-height: 130%;
  text-decoration: underline var(--color3-20) 0.5em;
  text-decoration-skip-ink: none;
  text-underline-offset: -0.25em;

  // Pour conserver la lisibilité
  &::selection {
    background-color: var(--color);
    color: var(--white);
    text-decoration: underline var(--color) 0.5em;
  }
}

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@ attribute name="title" required="false" type="java.lang.String" description="Titre. Si le tag contient un body, il se subsitue à l'attribut title" %>
<%@ attribute name="level" required="false" type="java.lang.Integer" description="Niveau du titre de 1 à 6. Devient un div au delà." %>
<%@ attribute name="skin" required="false" type="java.lang.String" description="Style du titre" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>

<c:if test="${empty pageScope.level}">
    <c:set var="level" value="1"/>
</c:if>
<c:set var="classesLevel" value="heading--${pageScope.level}"/>

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

<c:if test="${not empty pageScope.skin}">
    <c:set var="classesSkin" value="heading--skin-${pageScope.skin}"/>
</c:if>

<c:set var="classes" value="heading ${pageScope.classesLevel} ${pageScope.classesSkin} ${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>

<jsp:doBody var="body"/>
<c:if test="${not empty fn:trim(pageScope.body)}">
    <c:set var="title" value="${fn:trim(pageScope.body)}"/>
</c:if>

<c:choose>
    <c:when test="${pageScope.level eq 1}">
        <h1 class="${pageScope.classes}" ${pageScope.attributes}>
            <c:out value="${pageScope.title}" escapeXml="false"/>
        </h1>
    </c:when>
    <c:when test="${pageScope.level eq 2}">
        <h2 class="${pageScope.classes}" ${pageScope.attributes}>
            <c:out value="${pageScope.title}" escapeXml="false"/>
        </h2>
    </c:when>
    <c:when test="${pageScope.level eq 3}">
        <h3 class="${pageScope.classes}" ${pageScope.attributes}>
            <c:out value="${pageScope.title}" escapeXml="false"/>
        </h3>
    </c:when>
    <c:when test="${pageScope.level eq 4}">
        <h4 class="${pageScope.classes}" ${pageScope.attributes}>
            <c:out value="${pageScope.title}" escapeXml="false"/>
        </h4>
    </c:when>
    <c:when test="${pageScope.level eq 5}">
        <h5 class="${pageScope.classes}" ${pageScope.attributes}>
            <c:out value="${pageScope.title}" escapeXml="false"/>
        </h5>
    </c:when>
    <c:when test="${pageScope.level eq 6}">
        <h6 class="${pageScope.classes}" ${pageScope.attributes}>
            <c:out value="${pageScope.title}" escapeXml="false"/>
        </h6>
    </c:when>
    <c:otherwise>
        <div role="heading" aria-level="${pageScope.level}" class="${pageScope.classes}" ${pageScope.attributes}>
            <c:out value="${pageScope.title}" escapeXml="false"/>
        </div>
    </c:otherwise>
</c:choose>