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>