Titre de page

Ceci est la documentation du composant "title".

Exemples

<kuik:page-heading title="Titre de section" subTitle="Sous-titre" size="xl" />

Title sans skin avec sous-titre

Titre

Sous-titre

Titre

Sous-titre

Titre

Sous-titre

Titre

Sous-titre

Title skin a avec sous-titre

Titre

Sous-titre

Titre

Sous-titre

Titre

Sous-titre

Titre

Sous-titre

Title skin b avec sous-titre

Titre

Sous-titre

Titre

Sous-titre

Titre

Sous-titre

Titre

Sous-titre

Title avec sous-titre avec un body

Titre body

Sous-titre

Titre body sans sous-titre

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

<kuik:heading size="lg" title="Title sans skin avec sous-titre" level="3"/>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="sm"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="md"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="lg"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="xl"/>
</p>

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

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="sm" skin="a"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="md" skin="a"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="lg" skin="a"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="xl" skin="a"/>
</p>

<kuik:heading size="lg" skin="b" title="Title skin b avec sous-titre" level="3"/>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="sm" skin="b"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="md" skin="b"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="lg" skin="b"/>
</p>

<p>
    <kuik:page-heading title="Titre" subTitle="Sous-titre" size="xl" skin="b"/>
</p>

<kuik:heading size="lg" skin="b" title="Title avec sous-titre avec un body" level="3"/>

<p>
    <kuik:page-heading subTitle="Sous-titre" size="sm" skin="b">
        Titre body
    </kuik:page-heading>
</p>

<p>
    <kuik:page-heading size="sm" skin="b">
        Titre body sans sous-titre
    </kuik:page-heading>
</p>

Name	Type	Required	Description
title	java.lang.String	false	Titre. Si le tag contient un body, il se subsitue à l'attribut title
subTitle	java.lang.String	false	Sous-titre
skin	java.lang.String	false	Style du titre
size	java.lang.String	false	Taille (défaut : sm)

$prefix: 'heading-subtitle';

.heading__title {
    font-size: inherit;
    font-weight: inherit;
    line-height: 130%;
    margin-block: 0;
}

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

    line-height: 130%;
    margin: 0;
}

.heading--sm, .heading--md, .heading--lg, .heading--xl {
    .heading__subtitle {
        @include custom-typo($prefix);
    }
}

<%@ 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" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ 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="subTitle" required="false" type="java.lang.String" description="Sous-titre" %>
<%@ 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:set var="level" value="1"/>
<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>

<div class="${pageScope.classes}" ${pageScope.attributes}>
    <h1 class="heading__title"><c:out value="${pageScope.title}" escapeXml="false"/></h1>
    <c:if test="${not empty pageScope.subTitle}">
        <p class="heading__subtitle"><c:out value="${pageScope.subTitle}"/></p>
    </c:if>
</div>