TOC (Table Of Contents)
Le composant TOC affiche un sommaire.
Classes du composant
Ce composant ne possède pas de classes de personnalisation.
Utilisation
Ce composant peut être utilisé manuellement sans lire les titres de la page.
<kuik:toc label="Table des matières" useScrollSpy="true">
<kuik:toc-item for="section-foo">Section Foo</kuik:toc-item>
<kuik:toc-item for="section-bar">Section Bar</kuik:toc-item>
</kuik:toc>
<section id="section-foo">...</section>
<section id="section-bar">...</section>
Ou automatiquement en spécifiant le selecteur à appliquer.
<kuik:toc label="Table des matières" useScrollSpy="true" generate="true" generateSelector="#generate-parent h3" />
<div id="generate-parent">
<section>
<h3>Section 1</h3>
</section>
<section>
<h3>Section 2</h3>
</section>
</div>
⚠️ Note sur les IDs ⚠️ : un ID est généré s'il n'est pas déja présent sur la cible. Pour maitriser l'ID présent dans les URLs le plus simple et de le préciser ur les cibles dans le flux HTML.
Scroll Spy
Il est aussi possible de lui spécifier la cible du scroll spy.
3 valeurs sont possibles :
- 'self'
- 'parent' (valeur par défaut)
- un selecteur css
Le sélecteur css sera utilisé avec closest pour remonter l'arbre du dom depuis la cible de l'item de la toc, avec un fallback sur le parent si rien n'est trouvé.
<kuik:toc label="Table des matières" useScrollSpy="true" useScrollSpyTargetSelector="section" generate="true" generateSelector="#generate-parent h3" />
<div id="generate-parent">
<section>
<h3>Section 1</h3>
</section>
<section>
<h3>Section 2</h3>
</section>
</div>
Foo
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, beatae distinctio eius expedita facere illum in molestias perferendis perspiciatis quod temporibus veniam! Blanditiis deserunt dignissimos distinctio id molestias necessitatibus neque nisi optio quis reprehenderit. Accusamus adipisci alias aliquid, asperiores aspernatur cum, delectus dolore ducimus eos excepturi id inventore ipsum laudantium molestias mollitia nihil nostrum numquam placeat quae, recusandae reprehenderit sapiente similique temporibus totam vel velit voluptates? Aliquam est fugiat harum illo illum modi quia voluptatibus voluptatum! Accusantium corporis cumque doloribus illum placeat quis rerum voluptatum! Animi, aperiam assumenda at beatae commodi corporis deleniti dolores error esse eum facere facilis fuga id maxime nam nemo nobis nostrum, obcaecati odio odit possimus quas quasi quibusdam, quisquam repellendus unde veritatis. Aliquam aperiam aut consectetur corporis cum ea enim error ex ipsa modi perspiciatis praesentium reiciendis similique, tempora velit. Ab eius est in nam nesciunt nobis obcaecati, quae quod sed temporibus. Ad adipisci amet cum deleniti dicta dolor dolore eaque eos hic inventore itaque labore laudantium minima nam nihil, nulla, officiis perspiciatis quasi qui quis, quod sequi vel voluptas voluptates voluptatibus. Accusantium adipisci atque dignissimos dolor exercitationem expedita labore mollitia nesciunt nostrum odio officiis pariatur praesentium, quidem repudiandae similique, soluta temporibus! Alias animi asperiores blanditiis, cum deleniti dolores eius facere iste itaque laboriosam laborum magnam maxime minima perspiciatis quae reiciendis rem sed sequi sint sit soluta ut vitae, voluptate? Accusantium, eaque esse expedita id nemo totam. Animi aperiam architecto aspernatur earum eligendi exercitationem expedita facere fugiat, id illum incidunt minus nesciunt nisi omnis pariatur perspiciatis placeat praesentium quia recusandae reprehenderit sed sequi sunt tempora unde, vel. A ad aperiam architecto corporis cum dolor dolorem doloribus, earum enim esse eum facilis harum incidunt ipsam iure magnam maxime minus molestias nesciunt nihil nobis non officiis omnis optio perferendis perspiciatis, provident quaerat quasi quibusdam quidem sed similique, tempora tempore unde ut vero voluptate! Consectetur consequatur corporis, cum laudantium magni odit quisquam repellendus voluptatibus. Adipisci consequatur corporis dicta explicabo fugit ipsa labore optio rem similique voluptas! Iusto, numquam soluta. Aspernatur, autem harum incidunt necessitatibus possimus sed. A animi autem consequuntur deleniti deserunt distinctio doloremque eos impedit incidunt ipsa ipsam, iste laborum nesciunt perferendis quaerat quasi rerum saepe similique totam voluptate. Adipisci animi autem consequuntur dolore error eveniet harum laborum mollitia, neque omnis optio, quae, quidem vel? Assumenda, deserunt fugiat illo illum itaque magnam minima natus non quasi recusandae repellendus saepe sequi suscipit temporibus vel, veritatis vitae, voluptas voluptate.
Bar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium asperiores at atque consequuntur cumque debitis delectus dolore dolorem dolorum esse eum ex illum laboriosam laborum, modi neque non nostrum nulla numquam omnis optio quae quis reiciendis, rem repudiandae soluta voluptas. Accusamus culpa obcaecati perspiciatis repudiandae? A aliquam consequatur deserunt, dolorem doloremque ex facilis modi porro reiciendis reprehenderit sit tempore vel voluptatibus! Doloribus, facere, reprehenderit. Ab atque cumque deserunt distinctio, neque quae similique tenetur veniam vero voluptatum. Accusamus aut dolorem, ea eos ipsa itaque nostrum totam ullam. A ad, assumenda cumque delectus eaque et ex excepturi facere impedit ipsum iste iusto maiores, minus mollitia numquam omnis, quisquam quod quos sint sunt! Laborum, officiis vel. Animi aperiam incidunt nisi quia quod? Ad error facere labore maxime natus nesciunt officia officiis recusandae repudiandae sed! Architecto atque explicabo maiores nihil vitae? Alias aspernatur at commodi consequuntur cupiditate dignissimos eaque eveniet, facere hic illo illum in ipsum magnam nihil nobis quibusdam quisquam quos, reiciendis totam unde! A accusamus alias aliquam aperiam, assumenda autem blanditiis, consequatur cumque cupiditate error est et eum exercitationem facilis harum impedit iusto laboriosam minus molestias natus nostrum officia optio placeat porro quam quos reiciendis repellendus, rerum sapiente sed soluta temporibus voluptas voluptatum? Ad dolorem facere ipsa minus modi, natus necessitatibus nulla officiis sapiente vitae. Asperiores consequatur debitis, distinctio dolorem explicabo molestias. Dicta ea facilis nesciunt quisquam sint tenetur voluptas voluptate voluptatem? Ab beatae, eos ex ipsam iste libero mollitia natus perferendis tenetur ullam. Aliquam cumque debitis explicabo in ipsam pariatur reprehenderit similique, tenetur voluptas voluptatibus! Aliquid corporis deserunt dolorum minima, velit voluptatibus? Aspernatur, atque, delectus enim exercitationem hic maiores modi mollitia natus nemo quos recusandae repudiandae sed velit! Accusantium adipisci aliquam aspernatur assumenda at delectus dolorem doloremque eligendi fuga id itaque libero molestias mollitia nam nesciunt nisi numquam officiis perspiciatis porro praesentium quam qui quis, similique temporibus veniam voluptates voluptatibus! Blanditiis doloremque error facere hic numquam optio perspiciatis provident! Distinctio maiores modi quis reiciendis rerum. Ab, laborum, quisquam! A alias aperiam asperiores atque commodi deleniti eaque esse eveniet explicabo facilis magni nam nemo neque nisi numquam perferendis perspiciatis placeat qui quibusdam reiciendis repellendus repudiandae saepe sapiente, sequi tenetur unde ut voluptatibus. Aliquid consequuntur dolores ea, excepturi explicabo fuga neque nostrum odit officia placeat porro quas quo recusandae similique voluptas voluptatem voluptates. Assumenda autem ex exercitationem nihil porro possimus qui repellendus similique voluptatum. Autem eius laudantium minima nisi repudiandae, temporibus veritatis.
Baz
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aspernatur at commodi consequatur cum, cumque deleniti dolor dolorem ea enim facilis id in incidunt laboriosam laudantium molestias nemo neque nesciunt nisi obcaecati praesentium, quaerat quam qui quisquam ratione recusandae reiciendis repudiandae rerum saepe sequi soluta sunt tempora ullam veniam veritatis vitae! Accusamus adipisci aliquid consectetur corporis delectus distinctio eius eligendi eos eveniet, facilis itaque molestiae mollitia necessitatibus non numquam officia quis reprehenderit sed sit sunt suscipit totam veniam. Accusamus fugit quam quasi rem sed veritatis voluptatibus! Accusantium beatae consequuntur, cupiditate debitis ducimus eos incidunt ipsum iure necessitatibus neque nesciunt non quidem quisquam quod sapiente tempora, veritatis. Architecto cumque ducimus facilis incidunt ipsa itaque modi perspiciatis ratione sit vitae. Accusamus accusantium adipisci aliquam aliquid animi asperiores blanditiis commodi culpa doloremque doloribus esse exercitationem harum iste iure iusto maxime minima neque nostrum odio odit, pariatur perferendis perspiciatis quaerat qui quis repudiandae sed suscipit! At beatae culpa cum dignissimos eius error excepturi impedit odit quam reiciendis sed tempora unde, vitae voluptate voluptatum? Animi aperiam, atque debitis enim eos, error iure minus molestiae reprehenderit rerum, vel velit voluptatibus. Ab aliquid aspernatur at beatae dicta dolores facere, facilis, illo incidunt laborum officiis quasi quia quidem quo quos, repellat sapiente? Ab atque itaque nulla odit qui, sed. Accusamus, architecto consectetur consequatur, distinctio ducimus expedita harum hic libero, modi quia velit vero voluptatum. Aliquid autem corporis dicta doloribus ducimus earum enim est eveniet exercitationem facilis fuga hic, id incidunt ipsum iusto labore laudantium magnam magni modi nemo nihil nobis numquam perferendis quisquam reprehenderit saepe, unde vitae! Accusantium amet animi commodi debitis deserunt dolore doloremque eos eveniet, expedita fugiat ipsa libero magnam optio porro rem rerum sed sunt totam vero vitae! Accusantium architecto asperiores atque beatae corporis dolorum eaque, eius enim eum eveniet excepturi explicabo, fuga fugit iste iusto, maiores nulla praesentium quibusdam quod quos sed veritatis vero vitae. Aut distinctio fugit in libero natus optio provident. A architecto aspernatur at commodi consequuntur deserunt doloremque, ducimus enim eos esse, et excepturi expedita iste laboriosam nisi nobis, non obcaecati perferendis ratione reiciendis sapiente sequi sint. Amet dolore eius facere hic nemo optio perferendis quaerat quis. Commodi consectetur cum dignissimos eligendi fugit in nam odio quod reiciendis sit. Ad architecto aspernatur at cupiditate dolor ducimus eius enim error eum ex facere id, nostrum quasi quia repellendus rerum sapiente sit sunt, tenetur voluptatum. Ea fugiat illo necessitatibus odit provident quaerat.
Qux
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cumque enim omnis pariatur perspiciatis quod repudiandae tenetur! Ad aliquam aliquid animi architecto beatae, consectetur delectus distinctio dolor dolorem doloribus dolorum ducimus eos error et eveniet fuga in incidunt iusto laboriosam laudantium maiores nemo nulla numquam obcaecati odit quaerat quas quasi quos ratione reiciendis rem reprehenderit sequi, sint suscipit totam voluptatibus voluptatum? Aliquid animi, architecto, at atque, consectetur delectus doloremque eligendi ex harum incidunt magni neque omnis quia quis quisquam recusandae reprehenderit sapiente tempora ullam velit. Ab autem cumque, deserunt doloribus eum iusto possimus quos totam vero voluptas. Adipisci architecto at corporis cum doloremque eaque eligendi enim eos excepturi exercitationem explicabo hic id in incidunt, ipsam laborum natus necessitatibus neque nesciunt non porro qui quos ratione rerum sequi unde vitae! Accusamus aspernatur at, autem beatae delectus deserunt, earum eveniet ex illum ipsum laborum magni maiores nihil non nulla omnis perferendis ut. Adipisci consequatur deserunt dolor, esse exercitationem inventore maiores pariatur ratione sequi voluptatum. Ad corporis harum quis. Ab atque dolor dolorum fugiat possimus repellat vitae voluptate. Accusamus dolorum est et excepturi expedita facilis fugiat laudantium neque nihil, odio optio pariatur placeat quidem ratione reiciendis repellat vel velit. Excepturi fugiat harum, laborum nobis non odio recusandae velit vero? At beatae earum eligendi fugiat illum molestiae non nulla possimus quidem quisquam? Accusantium debitis ex impedit natus necessitatibus qui sit voluptates! Accusamus alias aliquam, cupiditate deserunt distinctio fuga fugiat illum perferendis placeat quisquam sed, sint sit. Accusantium amet aspernatur eligendi explicabo harum ipsam libero magnam molestiae nam quae quo ratione repudiandae sint totam, vero? A atque blanditiis consectetur doloribus enim et, facilis laudantium nam nisi nostrum possimus quasi repudiandae sit sunt temporibus veniam voluptatum. A alias aliquid amet blanditiis consequuntur corporis, cum, cumque dolor dolorem dolores ea est et expedita facere fugit ipsam ipsum laudantium minus nam nemo nihil odio odit perferendis quae reprehenderit repudiandae sapiente temporibus unde vel veniam vitae, voluptas voluptate voluptatum? Accusamus asperiores autem culpa cumque dolore et harum, id impedit ipsa iste iusto minus nobis odio officiis porro, quos saepe tempora vel. Accusamus, accusantium dignissimos et eum magni molestias nemo neque officiis omnis pariatur quia sed vitae voluptas. Adipisci aliquam amet aperiam aspernatur cupiditate doloremque eligendi error exercitationem expedita fuga fugiat inventore, ipsa ipsum itaque molestias mollitia nihil obcaecati odio omnis perferendis porro praesentium quae quia quo suscipit tempora temporibus tenetur totam vel voluptate. Cum id magnam perferendis quos vitae?
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="resources" uri="resources" %>
<div class="l-grid" data-layout="columns">
<div class="l-col-4">
<kuik:toc label="Table des matières" useScrollSpy="true" style="inset-block-start: 5rem; position: sticky;">
<kuik:toc-item target="section-foo" label="Foo" />
<kuik:toc-item target="section-bar" label="Bar" />
<kuik:toc-item target="section-baz" label="Baz" />
<kuik:toc-item target="section-qux" label="Qux" />
</kuik:toc>
</div>
<div class="l-col-8">
<section id="section-foo">
<h3>Foo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, beatae distinctio eius expedita facere illum in molestias perferendis perspiciatis quod temporibus veniam! Blanditiis deserunt dignissimos distinctio id molestias necessitatibus neque nisi optio quis reprehenderit. Accusamus adipisci alias aliquid, asperiores aspernatur cum, delectus dolore ducimus eos excepturi id inventore ipsum laudantium molestias mollitia nihil nostrum numquam placeat quae, recusandae reprehenderit sapiente similique temporibus totam vel velit voluptates? Aliquam est fugiat harum illo illum modi quia voluptatibus voluptatum! Accusantium corporis cumque doloribus illum placeat quis rerum voluptatum! Animi, aperiam assumenda at beatae commodi corporis deleniti dolores error esse eum facere facilis fuga id maxime nam nemo nobis nostrum, obcaecati odio odit possimus quas quasi quibusdam, quisquam repellendus unde veritatis. Aliquam aperiam aut consectetur corporis cum ea enim error ex ipsa modi perspiciatis praesentium reiciendis similique, tempora velit. Ab eius est in nam nesciunt nobis obcaecati, quae quod sed temporibus. Ad adipisci amet cum deleniti dicta dolor dolore eaque eos hic inventore itaque labore laudantium minima nam nihil, nulla, officiis perspiciatis quasi qui quis, quod sequi vel voluptas voluptates voluptatibus. Accusantium adipisci atque dignissimos dolor exercitationem expedita labore mollitia nesciunt nostrum odio officiis pariatur praesentium, quidem repudiandae similique, soluta temporibus! Alias animi asperiores blanditiis, cum deleniti dolores eius facere iste itaque laboriosam laborum magnam maxime minima perspiciatis quae reiciendis rem sed sequi sint sit soluta ut vitae, voluptate? Accusantium, eaque esse expedita id nemo totam. Animi aperiam architecto aspernatur earum eligendi exercitationem expedita facere fugiat, id illum incidunt minus nesciunt nisi omnis pariatur perspiciatis placeat praesentium quia recusandae reprehenderit sed sequi sunt tempora unde, vel. A ad aperiam architecto corporis cum dolor dolorem doloribus, earum enim esse eum facilis harum incidunt ipsam iure magnam maxime minus molestias nesciunt nihil nobis non officiis omnis optio perferendis perspiciatis, provident quaerat quasi quibusdam quidem sed similique, tempora tempore unde ut vero voluptate! Consectetur consequatur corporis, cum laudantium magni odit quisquam repellendus voluptatibus. Adipisci consequatur corporis dicta explicabo fugit ipsa labore optio rem similique voluptas! Iusto, numquam soluta. Aspernatur, autem harum incidunt necessitatibus possimus sed. A animi autem consequuntur deleniti deserunt distinctio doloremque eos impedit incidunt ipsa ipsam, iste laborum nesciunt perferendis quaerat quasi rerum saepe similique totam voluptate. Adipisci animi autem consequuntur dolore error eveniet harum laborum mollitia, neque omnis optio, quae, quidem vel? Assumenda, deserunt fugiat illo illum itaque magnam minima natus non quasi recusandae repellendus saepe sequi suscipit temporibus vel, veritatis vitae, voluptas voluptate.</p>
</section>
<section id="section-bar">
<h3>Bar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium asperiores at atque consequuntur cumque debitis delectus dolore dolorem dolorum esse eum ex illum laboriosam laborum, modi neque non nostrum nulla numquam omnis optio quae quis reiciendis, rem repudiandae soluta voluptas. Accusamus culpa obcaecati perspiciatis repudiandae? A aliquam consequatur deserunt, dolorem doloremque ex facilis modi porro reiciendis reprehenderit sit tempore vel voluptatibus! Doloribus, facere, reprehenderit. Ab atque cumque deserunt distinctio, neque quae similique tenetur veniam vero voluptatum. Accusamus aut dolorem, ea eos ipsa itaque nostrum totam ullam. A ad, assumenda cumque delectus eaque et ex excepturi facere impedit ipsum iste iusto maiores, minus mollitia numquam omnis, quisquam quod quos sint sunt! Laborum, officiis vel. Animi aperiam incidunt nisi quia quod? Ad error facere labore maxime natus nesciunt officia officiis recusandae repudiandae sed! Architecto atque explicabo maiores nihil vitae? Alias aspernatur at commodi consequuntur cupiditate dignissimos eaque eveniet, facere hic illo illum in ipsum magnam nihil nobis quibusdam quisquam quos, reiciendis totam unde! A accusamus alias aliquam aperiam, assumenda autem blanditiis, consequatur cumque cupiditate error est et eum exercitationem facilis harum impedit iusto laboriosam minus molestias natus nostrum officia optio placeat porro quam quos reiciendis repellendus, rerum sapiente sed soluta temporibus voluptas voluptatum? Ad dolorem facere ipsa minus modi, natus necessitatibus nulla officiis sapiente vitae. Asperiores consequatur debitis, distinctio dolorem explicabo molestias. Dicta ea facilis nesciunt quisquam sint tenetur voluptas voluptate voluptatem? Ab beatae, eos ex ipsam iste libero mollitia natus perferendis tenetur ullam. Aliquam cumque debitis explicabo in ipsam pariatur reprehenderit similique, tenetur voluptas voluptatibus! Aliquid corporis deserunt dolorum minima, velit voluptatibus? Aspernatur, atque, delectus enim exercitationem hic maiores modi mollitia natus nemo quos recusandae repudiandae sed velit! Accusantium adipisci aliquam aspernatur assumenda at delectus dolorem doloremque eligendi fuga id itaque libero molestias mollitia nam nesciunt nisi numquam officiis perspiciatis porro praesentium quam qui quis, similique temporibus veniam voluptates voluptatibus! Blanditiis doloremque error facere hic numquam optio perspiciatis provident! Distinctio maiores modi quis reiciendis rerum. Ab, laborum, quisquam! A alias aperiam asperiores atque commodi deleniti eaque esse eveniet explicabo facilis magni nam nemo neque nisi numquam perferendis perspiciatis placeat qui quibusdam reiciendis repellendus repudiandae saepe sapiente, sequi tenetur unde ut voluptatibus. Aliquid consequuntur dolores ea, excepturi explicabo fuga neque nostrum odit officia placeat porro quas quo recusandae similique voluptas voluptatem voluptates. Assumenda autem ex exercitationem nihil porro possimus qui repellendus similique voluptatum. Autem eius laudantium minima nisi repudiandae, temporibus veritatis.</p>
</section>
<section id="section-baz">
<h3>Baz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aspernatur at commodi consequatur cum, cumque deleniti dolor dolorem ea enim facilis id in incidunt laboriosam laudantium molestias nemo neque nesciunt nisi obcaecati praesentium, quaerat quam qui quisquam ratione recusandae reiciendis repudiandae rerum saepe sequi soluta sunt tempora ullam veniam veritatis vitae! Accusamus adipisci aliquid consectetur corporis delectus distinctio eius eligendi eos eveniet, facilis itaque molestiae mollitia necessitatibus non numquam officia quis reprehenderit sed sit sunt suscipit totam veniam. Accusamus fugit quam quasi rem sed veritatis voluptatibus! Accusantium beatae consequuntur, cupiditate debitis ducimus eos incidunt ipsum iure necessitatibus neque nesciunt non quidem quisquam quod sapiente tempora, veritatis. Architecto cumque ducimus facilis incidunt ipsa itaque modi perspiciatis ratione sit vitae. Accusamus accusantium adipisci aliquam aliquid animi asperiores blanditiis commodi culpa doloremque doloribus esse exercitationem harum iste iure iusto maxime minima neque nostrum odio odit, pariatur perferendis perspiciatis quaerat qui quis repudiandae sed suscipit! At beatae culpa cum dignissimos eius error excepturi impedit odit quam reiciendis sed tempora unde, vitae voluptate voluptatum? Animi aperiam, atque debitis enim eos, error iure minus molestiae reprehenderit rerum, vel velit voluptatibus. Ab aliquid aspernatur at beatae dicta dolores facere, facilis, illo incidunt laborum officiis quasi quia quidem quo quos, repellat sapiente? Ab atque itaque nulla odit qui, sed. Accusamus, architecto consectetur consequatur, distinctio ducimus expedita harum hic libero, modi quia velit vero voluptatum. Aliquid autem corporis dicta doloribus ducimus earum enim est eveniet exercitationem facilis fuga hic, id incidunt ipsum iusto labore laudantium magnam magni modi nemo nihil nobis numquam perferendis quisquam reprehenderit saepe, unde vitae! Accusantium amet animi commodi debitis deserunt dolore doloremque eos eveniet, expedita fugiat ipsa libero magnam optio porro rem rerum sed sunt totam vero vitae! Accusantium architecto asperiores atque beatae corporis dolorum eaque, eius enim eum eveniet excepturi explicabo, fuga fugit iste iusto, maiores nulla praesentium quibusdam quod quos sed veritatis vero vitae. Aut distinctio fugit in libero natus optio provident. A architecto aspernatur at commodi consequuntur deserunt doloremque, ducimus enim eos esse, et excepturi expedita iste laboriosam nisi nobis, non obcaecati perferendis ratione reiciendis sapiente sequi sint. Amet dolore eius facere hic nemo optio perferendis quaerat quis. Commodi consectetur cum dignissimos eligendi fugit in nam odio quod reiciendis sit. Ad architecto aspernatur at cupiditate dolor ducimus eius enim error eum ex facere id, nostrum quasi quia repellendus rerum sapiente sit sunt, tenetur voluptatum. Ea fugiat illo necessitatibus odit provident quaerat.</p>
</section>
<section id="section-qux">
<h3>Qux</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cumque enim omnis pariatur perspiciatis quod repudiandae tenetur! Ad aliquam aliquid animi architecto beatae, consectetur delectus distinctio dolor dolorem doloribus dolorum ducimus eos error et eveniet fuga in incidunt iusto laboriosam laudantium maiores nemo nulla numquam obcaecati odit quaerat quas quasi quos ratione reiciendis rem reprehenderit sequi, sint suscipit totam voluptatibus voluptatum? Aliquid animi, architecto, at atque, consectetur delectus doloremque eligendi ex harum incidunt magni neque omnis quia quis quisquam recusandae reprehenderit sapiente tempora ullam velit. Ab autem cumque, deserunt doloribus eum iusto possimus quos totam vero voluptas. Adipisci architecto at corporis cum doloremque eaque eligendi enim eos excepturi exercitationem explicabo hic id in incidunt, ipsam laborum natus necessitatibus neque nesciunt non porro qui quos ratione rerum sequi unde vitae! Accusamus aspernatur at, autem beatae delectus deserunt, earum eveniet ex illum ipsum laborum magni maiores nihil non nulla omnis perferendis ut. Adipisci consequatur deserunt dolor, esse exercitationem inventore maiores pariatur ratione sequi voluptatum. Ad corporis harum quis. Ab atque dolor dolorum fugiat possimus repellat vitae voluptate. Accusamus dolorum est et excepturi expedita facilis fugiat laudantium neque nihil, odio optio pariatur placeat quidem ratione reiciendis repellat vel velit. Excepturi fugiat harum, laborum nobis non odio recusandae velit vero? At beatae earum eligendi fugiat illum molestiae non nulla possimus quidem quisquam? Accusantium debitis ex impedit natus necessitatibus qui sit voluptates! Accusamus alias aliquam, cupiditate deserunt distinctio fuga fugiat illum perferendis placeat quisquam sed, sint sit. Accusantium amet aspernatur eligendi explicabo harum ipsam libero magnam molestiae nam quae quo ratione repudiandae sint totam, vero? A atque blanditiis consectetur doloribus enim et, facilis laudantium nam nisi nostrum possimus quasi repudiandae sit sunt temporibus veniam voluptatum. A alias aliquid amet blanditiis consequuntur corporis, cum, cumque dolor dolorem dolores ea est et expedita facere fugit ipsam ipsum laudantium minus nam nemo nihil odio odit perferendis quae reprehenderit repudiandae sapiente temporibus unde vel veniam vitae, voluptas voluptate voluptatum? Accusamus asperiores autem culpa cumque dolore et harum, id impedit ipsa iste iusto minus nobis odio officiis porro, quos saepe tempora vel. Accusamus, accusantium dignissimos et eum magni molestias nemo neque officiis omnis pariatur quia sed vitae voluptas. Adipisci aliquam amet aperiam aspernatur cupiditate doloremque eligendi error exercitationem expedita fuga fugiat inventore, ipsa ipsum itaque molestias mollitia nihil obcaecati odio omnis perferendis porro praesentium quae quia quo suscipit tempora temporibus tenetur totam vel voluptate. Cum id magnam perferendis quos vitae?</p>
</section>
</div>
</div>
Foo
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, beatae distinctio eius expedita facere illum in molestias perferendis perspiciatis quod temporibus veniam! Blanditiis deserunt dignissimos distinctio id molestias necessitatibus neque nisi optio quis reprehenderit. Accusamus adipisci alias aliquid, asperiores aspernatur cum, delectus dolore ducimus eos excepturi id inventore ipsum laudantium molestias mollitia nihil nostrum numquam placeat quae, recusandae reprehenderit sapiente similique temporibus totam vel velit voluptates? Aliquam est fugiat harum illo illum modi quia voluptatibus voluptatum! Accusantium corporis cumque doloribus illum placeat quis rerum voluptatum! Animi, aperiam assumenda at beatae commodi corporis deleniti dolores error esse eum facere facilis fuga id maxime nam nemo nobis nostrum, obcaecati odio odit possimus quas quasi quibusdam, quisquam repellendus unde veritatis. Aliquam aperiam aut consectetur corporis cum ea enim error ex ipsa modi perspiciatis praesentium reiciendis similique, tempora velit. Ab eius est in nam nesciunt nobis obcaecati, quae quod sed temporibus. Ad adipisci amet cum deleniti dicta dolor dolore eaque eos hic inventore itaque labore laudantium minima nam nihil, nulla, officiis perspiciatis quasi qui quis, quod sequi vel voluptas voluptates voluptatibus. Accusantium adipisci atque dignissimos dolor exercitationem expedita labore mollitia nesciunt nostrum odio officiis pariatur praesentium, quidem repudiandae similique, soluta temporibus! Alias animi asperiores blanditiis, cum deleniti dolores eius facere iste itaque laboriosam laborum magnam maxime minima perspiciatis quae reiciendis rem sed sequi sint sit soluta ut vitae, voluptate? Accusantium, eaque esse expedita id nemo totam. Animi aperiam architecto aspernatur earum eligendi exercitationem expedita facere fugiat, id illum incidunt minus nesciunt nisi omnis pariatur perspiciatis placeat praesentium quia recusandae reprehenderit sed sequi sunt tempora unde, vel. A ad aperiam architecto corporis cum dolor dolorem doloribus, earum enim esse eum facilis harum incidunt ipsam iure magnam maxime minus molestias nesciunt nihil nobis non officiis omnis optio perferendis perspiciatis, provident quaerat quasi quibusdam quidem sed similique, tempora tempore unde ut vero voluptate! Consectetur consequatur corporis, cum laudantium magni odit quisquam repellendus voluptatibus. Adipisci consequatur corporis dicta explicabo fugit ipsa labore optio rem similique voluptas! Iusto, numquam soluta. Aspernatur, autem harum incidunt necessitatibus possimus sed. A animi autem consequuntur deleniti deserunt distinctio doloremque eos impedit incidunt ipsa ipsam, iste laborum nesciunt perferendis quaerat quasi rerum saepe similique totam voluptate. Adipisci animi autem consequuntur dolore error eveniet harum laborum mollitia, neque omnis optio, quae, quidem vel? Assumenda, deserunt fugiat illo illum itaque magnam minima natus non quasi recusandae repellendus saepe sequi suscipit temporibus vel, veritatis vitae, voluptas voluptate.
Bar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium asperiores at atque consequuntur cumque debitis delectus dolore dolorem dolorum esse eum ex illum laboriosam laborum, modi neque non nostrum nulla numquam omnis optio quae quis reiciendis, rem repudiandae soluta voluptas. Accusamus culpa obcaecati perspiciatis repudiandae? A aliquam consequatur deserunt, dolorem doloremque ex facilis modi porro reiciendis reprehenderit sit tempore vel voluptatibus! Doloribus, facere, reprehenderit. Ab atque cumque deserunt distinctio, neque quae similique tenetur veniam vero voluptatum. Accusamus aut dolorem, ea eos ipsa itaque nostrum totam ullam. A ad, assumenda cumque delectus eaque et ex excepturi facere impedit ipsum iste iusto maiores, minus mollitia numquam omnis, quisquam quod quos sint sunt! Laborum, officiis vel. Animi aperiam incidunt nisi quia quod? Ad error facere labore maxime natus nesciunt officia officiis recusandae repudiandae sed! Architecto atque explicabo maiores nihil vitae? Alias aspernatur at commodi consequuntur cupiditate dignissimos eaque eveniet, facere hic illo illum in ipsum magnam nihil nobis quibusdam quisquam quos, reiciendis totam unde! A accusamus alias aliquam aperiam, assumenda autem blanditiis, consequatur cumque cupiditate error est et eum exercitationem facilis harum impedit iusto laboriosam minus molestias natus nostrum officia optio placeat porro quam quos reiciendis repellendus, rerum sapiente sed soluta temporibus voluptas voluptatum? Ad dolorem facere ipsa minus modi, natus necessitatibus nulla officiis sapiente vitae. Asperiores consequatur debitis, distinctio dolorem explicabo molestias. Dicta ea facilis nesciunt quisquam sint tenetur voluptas voluptate voluptatem? Ab beatae, eos ex ipsam iste libero mollitia natus perferendis tenetur ullam. Aliquam cumque debitis explicabo in ipsam pariatur reprehenderit similique, tenetur voluptas voluptatibus! Aliquid corporis deserunt dolorum minima, velit voluptatibus? Aspernatur, atque, delectus enim exercitationem hic maiores modi mollitia natus nemo quos recusandae repudiandae sed velit! Accusantium adipisci aliquam aspernatur assumenda at delectus dolorem doloremque eligendi fuga id itaque libero molestias mollitia nam nesciunt nisi numquam officiis perspiciatis porro praesentium quam qui quis, similique temporibus veniam voluptates voluptatibus! Blanditiis doloremque error facere hic numquam optio perspiciatis provident! Distinctio maiores modi quis reiciendis rerum. Ab, laborum, quisquam! A alias aperiam asperiores atque commodi deleniti eaque esse eveniet explicabo facilis magni nam nemo neque nisi numquam perferendis perspiciatis placeat qui quibusdam reiciendis repellendus repudiandae saepe sapiente, sequi tenetur unde ut voluptatibus. Aliquid consequuntur dolores ea, excepturi explicabo fuga neque nostrum odit officia placeat porro quas quo recusandae similique voluptas voluptatem voluptates. Assumenda autem ex exercitationem nihil porro possimus qui repellendus similique voluptatum. Autem eius laudantium minima nisi repudiandae, temporibus veritatis.
Baz
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aspernatur at commodi consequatur cum, cumque deleniti dolor dolorem ea enim facilis id in incidunt laboriosam laudantium molestias nemo neque nesciunt nisi obcaecati praesentium, quaerat quam qui quisquam ratione recusandae reiciendis repudiandae rerum saepe sequi soluta sunt tempora ullam veniam veritatis vitae! Accusamus adipisci aliquid consectetur corporis delectus distinctio eius eligendi eos eveniet, facilis itaque molestiae mollitia necessitatibus non numquam officia quis reprehenderit sed sit sunt suscipit totam veniam. Accusamus fugit quam quasi rem sed veritatis voluptatibus! Accusantium beatae consequuntur, cupiditate debitis ducimus eos incidunt ipsum iure necessitatibus neque nesciunt non quidem quisquam quod sapiente tempora, veritatis. Architecto cumque ducimus facilis incidunt ipsa itaque modi perspiciatis ratione sit vitae. Accusamus accusantium adipisci aliquam aliquid animi asperiores blanditiis commodi culpa doloremque doloribus esse exercitationem harum iste iure iusto maxime minima neque nostrum odio odit, pariatur perferendis perspiciatis quaerat qui quis repudiandae sed suscipit! At beatae culpa cum dignissimos eius error excepturi impedit odit quam reiciendis sed tempora unde, vitae voluptate voluptatum? Animi aperiam, atque debitis enim eos, error iure minus molestiae reprehenderit rerum, vel velit voluptatibus. Ab aliquid aspernatur at beatae dicta dolores facere, facilis, illo incidunt laborum officiis quasi quia quidem quo quos, repellat sapiente? Ab atque itaque nulla odit qui, sed. Accusamus, architecto consectetur consequatur, distinctio ducimus expedita harum hic libero, modi quia velit vero voluptatum. Aliquid autem corporis dicta doloribus ducimus earum enim est eveniet exercitationem facilis fuga hic, id incidunt ipsum iusto labore laudantium magnam magni modi nemo nihil nobis numquam perferendis quisquam reprehenderit saepe, unde vitae! Accusantium amet animi commodi debitis deserunt dolore doloremque eos eveniet, expedita fugiat ipsa libero magnam optio porro rem rerum sed sunt totam vero vitae! Accusantium architecto asperiores atque beatae corporis dolorum eaque, eius enim eum eveniet excepturi explicabo, fuga fugit iste iusto, maiores nulla praesentium quibusdam quod quos sed veritatis vero vitae. Aut distinctio fugit in libero natus optio provident. A architecto aspernatur at commodi consequuntur deserunt doloremque, ducimus enim eos esse, et excepturi expedita iste laboriosam nisi nobis, non obcaecati perferendis ratione reiciendis sapiente sequi sint. Amet dolore eius facere hic nemo optio perferendis quaerat quis. Commodi consectetur cum dignissimos eligendi fugit in nam odio quod reiciendis sit. Ad architecto aspernatur at cupiditate dolor ducimus eius enim error eum ex facere id, nostrum quasi quia repellendus rerum sapiente sit sunt, tenetur voluptatum. Ea fugiat illo necessitatibus odit provident quaerat.
Qux
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cumque enim omnis pariatur perspiciatis quod repudiandae tenetur! Ad aliquam aliquid animi architecto beatae, consectetur delectus distinctio dolor dolorem doloribus dolorum ducimus eos error et eveniet fuga in incidunt iusto laboriosam laudantium maiores nemo nulla numquam obcaecati odit quaerat quas quasi quos ratione reiciendis rem reprehenderit sequi, sint suscipit totam voluptatibus voluptatum? Aliquid animi, architecto, at atque, consectetur delectus doloremque eligendi ex harum incidunt magni neque omnis quia quis quisquam recusandae reprehenderit sapiente tempora ullam velit. Ab autem cumque, deserunt doloribus eum iusto possimus quos totam vero voluptas. Adipisci architecto at corporis cum doloremque eaque eligendi enim eos excepturi exercitationem explicabo hic id in incidunt, ipsam laborum natus necessitatibus neque nesciunt non porro qui quos ratione rerum sequi unde vitae! Accusamus aspernatur at, autem beatae delectus deserunt, earum eveniet ex illum ipsum laborum magni maiores nihil non nulla omnis perferendis ut. Adipisci consequatur deserunt dolor, esse exercitationem inventore maiores pariatur ratione sequi voluptatum. Ad corporis harum quis. Ab atque dolor dolorum fugiat possimus repellat vitae voluptate. Accusamus dolorum est et excepturi expedita facilis fugiat laudantium neque nihil, odio optio pariatur placeat quidem ratione reiciendis repellat vel velit. Excepturi fugiat harum, laborum nobis non odio recusandae velit vero? At beatae earum eligendi fugiat illum molestiae non nulla possimus quidem quisquam? Accusantium debitis ex impedit natus necessitatibus qui sit voluptates! Accusamus alias aliquam, cupiditate deserunt distinctio fuga fugiat illum perferendis placeat quisquam sed, sint sit. Accusantium amet aspernatur eligendi explicabo harum ipsam libero magnam molestiae nam quae quo ratione repudiandae sint totam, vero? A atque blanditiis consectetur doloribus enim et, facilis laudantium nam nisi nostrum possimus quasi repudiandae sit sunt temporibus veniam voluptatum. A alias aliquid amet blanditiis consequuntur corporis, cum, cumque dolor dolorem dolores ea est et expedita facere fugit ipsam ipsum laudantium minus nam nemo nihil odio odit perferendis quae reprehenderit repudiandae sapiente temporibus unde vel veniam vitae, voluptas voluptate voluptatum? Accusamus asperiores autem culpa cumque dolore et harum, id impedit ipsa iste iusto minus nobis odio officiis porro, quos saepe tempora vel. Accusamus, accusantium dignissimos et eum magni molestias nemo neque officiis omnis pariatur quia sed vitae voluptas. Adipisci aliquam amet aperiam aspernatur cupiditate doloremque eligendi error exercitationem expedita fuga fugiat inventore, ipsa ipsum itaque molestias mollitia nihil obcaecati odio omnis perferendis porro praesentium quae quia quo suscipit tempora temporibus tenetur totam vel voluptate. Cum id magnam perferendis quos vitae?
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="resources" uri="resources" %>
<div class="l-grid" data-layout="columns">
<div class="l-col-4">
<kuik:toc label="Table des matières générée" useScrollSpy="true" useScrollSpyTargetSelector="parent" generate="true" generateSelector="#generate-parent h3" style="inset-block-start: 5rem; position: sticky;" />
</div>
<div class="l-col-8" id="generate-parent">
<section>
<h3>Foo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, beatae distinctio eius expedita facere illum in molestias perferendis perspiciatis quod temporibus veniam! Blanditiis deserunt dignissimos distinctio id molestias necessitatibus neque nisi optio quis reprehenderit. Accusamus adipisci alias aliquid, asperiores aspernatur cum, delectus dolore ducimus eos excepturi id inventore ipsum laudantium molestias mollitia nihil nostrum numquam placeat quae, recusandae reprehenderit sapiente similique temporibus totam vel velit voluptates? Aliquam est fugiat harum illo illum modi quia voluptatibus voluptatum! Accusantium corporis cumque doloribus illum placeat quis rerum voluptatum! Animi, aperiam assumenda at beatae commodi corporis deleniti dolores error esse eum facere facilis fuga id maxime nam nemo nobis nostrum, obcaecati odio odit possimus quas quasi quibusdam, quisquam repellendus unde veritatis. Aliquam aperiam aut consectetur corporis cum ea enim error ex ipsa modi perspiciatis praesentium reiciendis similique, tempora velit. Ab eius est in nam nesciunt nobis obcaecati, quae quod sed temporibus. Ad adipisci amet cum deleniti dicta dolor dolore eaque eos hic inventore itaque labore laudantium minima nam nihil, nulla, officiis perspiciatis quasi qui quis, quod sequi vel voluptas voluptates voluptatibus. Accusantium adipisci atque dignissimos dolor exercitationem expedita labore mollitia nesciunt nostrum odio officiis pariatur praesentium, quidem repudiandae similique, soluta temporibus! Alias animi asperiores blanditiis, cum deleniti dolores eius facere iste itaque laboriosam laborum magnam maxime minima perspiciatis quae reiciendis rem sed sequi sint sit soluta ut vitae, voluptate? Accusantium, eaque esse expedita id nemo totam. Animi aperiam architecto aspernatur earum eligendi exercitationem expedita facere fugiat, id illum incidunt minus nesciunt nisi omnis pariatur perspiciatis placeat praesentium quia recusandae reprehenderit sed sequi sunt tempora unde, vel. A ad aperiam architecto corporis cum dolor dolorem doloribus, earum enim esse eum facilis harum incidunt ipsam iure magnam maxime minus molestias nesciunt nihil nobis non officiis omnis optio perferendis perspiciatis, provident quaerat quasi quibusdam quidem sed similique, tempora tempore unde ut vero voluptate! Consectetur consequatur corporis, cum laudantium magni odit quisquam repellendus voluptatibus. Adipisci consequatur corporis dicta explicabo fugit ipsa labore optio rem similique voluptas! Iusto, numquam soluta. Aspernatur, autem harum incidunt necessitatibus possimus sed. A animi autem consequuntur deleniti deserunt distinctio doloremque eos impedit incidunt ipsa ipsam, iste laborum nesciunt perferendis quaerat quasi rerum saepe similique totam voluptate. Adipisci animi autem consequuntur dolore error eveniet harum laborum mollitia, neque omnis optio, quae, quidem vel? Assumenda, deserunt fugiat illo illum itaque magnam minima natus non quasi recusandae repellendus saepe sequi suscipit temporibus vel, veritatis vitae, voluptas voluptate.</p>
</section>
<section>
<h3>Bar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium asperiores at atque consequuntur cumque debitis delectus dolore dolorem dolorum esse eum ex illum laboriosam laborum, modi neque non nostrum nulla numquam omnis optio quae quis reiciendis, rem repudiandae soluta voluptas. Accusamus culpa obcaecati perspiciatis repudiandae? A aliquam consequatur deserunt, dolorem doloremque ex facilis modi porro reiciendis reprehenderit sit tempore vel voluptatibus! Doloribus, facere, reprehenderit. Ab atque cumque deserunt distinctio, neque quae similique tenetur veniam vero voluptatum. Accusamus aut dolorem, ea eos ipsa itaque nostrum totam ullam. A ad, assumenda cumque delectus eaque et ex excepturi facere impedit ipsum iste iusto maiores, minus mollitia numquam omnis, quisquam quod quos sint sunt! Laborum, officiis vel. Animi aperiam incidunt nisi quia quod? Ad error facere labore maxime natus nesciunt officia officiis recusandae repudiandae sed! Architecto atque explicabo maiores nihil vitae? Alias aspernatur at commodi consequuntur cupiditate dignissimos eaque eveniet, facere hic illo illum in ipsum magnam nihil nobis quibusdam quisquam quos, reiciendis totam unde! A accusamus alias aliquam aperiam, assumenda autem blanditiis, consequatur cumque cupiditate error est et eum exercitationem facilis harum impedit iusto laboriosam minus molestias natus nostrum officia optio placeat porro quam quos reiciendis repellendus, rerum sapiente sed soluta temporibus voluptas voluptatum? Ad dolorem facere ipsa minus modi, natus necessitatibus nulla officiis sapiente vitae. Asperiores consequatur debitis, distinctio dolorem explicabo molestias. Dicta ea facilis nesciunt quisquam sint tenetur voluptas voluptate voluptatem? Ab beatae, eos ex ipsam iste libero mollitia natus perferendis tenetur ullam. Aliquam cumque debitis explicabo in ipsam pariatur reprehenderit similique, tenetur voluptas voluptatibus! Aliquid corporis deserunt dolorum minima, velit voluptatibus? Aspernatur, atque, delectus enim exercitationem hic maiores modi mollitia natus nemo quos recusandae repudiandae sed velit! Accusantium adipisci aliquam aspernatur assumenda at delectus dolorem doloremque eligendi fuga id itaque libero molestias mollitia nam nesciunt nisi numquam officiis perspiciatis porro praesentium quam qui quis, similique temporibus veniam voluptates voluptatibus! Blanditiis doloremque error facere hic numquam optio perspiciatis provident! Distinctio maiores modi quis reiciendis rerum. Ab, laborum, quisquam! A alias aperiam asperiores atque commodi deleniti eaque esse eveniet explicabo facilis magni nam nemo neque nisi numquam perferendis perspiciatis placeat qui quibusdam reiciendis repellendus repudiandae saepe sapiente, sequi tenetur unde ut voluptatibus. Aliquid consequuntur dolores ea, excepturi explicabo fuga neque nostrum odit officia placeat porro quas quo recusandae similique voluptas voluptatem voluptates. Assumenda autem ex exercitationem nihil porro possimus qui repellendus similique voluptatum. Autem eius laudantium minima nisi repudiandae, temporibus veritatis.</p>
</section>
<section>
<h3>Baz</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aspernatur at commodi consequatur cum, cumque deleniti dolor dolorem ea enim facilis id in incidunt laboriosam laudantium molestias nemo neque nesciunt nisi obcaecati praesentium, quaerat quam qui quisquam ratione recusandae reiciendis repudiandae rerum saepe sequi soluta sunt tempora ullam veniam veritatis vitae! Accusamus adipisci aliquid consectetur corporis delectus distinctio eius eligendi eos eveniet, facilis itaque molestiae mollitia necessitatibus non numquam officia quis reprehenderit sed sit sunt suscipit totam veniam. Accusamus fugit quam quasi rem sed veritatis voluptatibus! Accusantium beatae consequuntur, cupiditate debitis ducimus eos incidunt ipsum iure necessitatibus neque nesciunt non quidem quisquam quod sapiente tempora, veritatis. Architecto cumque ducimus facilis incidunt ipsa itaque modi perspiciatis ratione sit vitae. Accusamus accusantium adipisci aliquam aliquid animi asperiores blanditiis commodi culpa doloremque doloribus esse exercitationem harum iste iure iusto maxime minima neque nostrum odio odit, pariatur perferendis perspiciatis quaerat qui quis repudiandae sed suscipit! At beatae culpa cum dignissimos eius error excepturi impedit odit quam reiciendis sed tempora unde, vitae voluptate voluptatum? Animi aperiam, atque debitis enim eos, error iure minus molestiae reprehenderit rerum, vel velit voluptatibus. Ab aliquid aspernatur at beatae dicta dolores facere, facilis, illo incidunt laborum officiis quasi quia quidem quo quos, repellat sapiente? Ab atque itaque nulla odit qui, sed. Accusamus, architecto consectetur consequatur, distinctio ducimus expedita harum hic libero, modi quia velit vero voluptatum. Aliquid autem corporis dicta doloribus ducimus earum enim est eveniet exercitationem facilis fuga hic, id incidunt ipsum iusto labore laudantium magnam magni modi nemo nihil nobis numquam perferendis quisquam reprehenderit saepe, unde vitae! Accusantium amet animi commodi debitis deserunt dolore doloremque eos eveniet, expedita fugiat ipsa libero magnam optio porro rem rerum sed sunt totam vero vitae! Accusantium architecto asperiores atque beatae corporis dolorum eaque, eius enim eum eveniet excepturi explicabo, fuga fugit iste iusto, maiores nulla praesentium quibusdam quod quos sed veritatis vero vitae. Aut distinctio fugit in libero natus optio provident. A architecto aspernatur at commodi consequuntur deserunt doloremque, ducimus enim eos esse, et excepturi expedita iste laboriosam nisi nobis, non obcaecati perferendis ratione reiciendis sapiente sequi sint. Amet dolore eius facere hic nemo optio perferendis quaerat quis. Commodi consectetur cum dignissimos eligendi fugit in nam odio quod reiciendis sit. Ad architecto aspernatur at cupiditate dolor ducimus eius enim error eum ex facere id, nostrum quasi quia repellendus rerum sapiente sit sunt, tenetur voluptatum. Ea fugiat illo necessitatibus odit provident quaerat.</p>
</section>
<section>
<h3>Qux</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cumque enim omnis pariatur perspiciatis quod repudiandae tenetur! Ad aliquam aliquid animi architecto beatae, consectetur delectus distinctio dolor dolorem doloribus dolorum ducimus eos error et eveniet fuga in incidunt iusto laboriosam laudantium maiores nemo nulla numquam obcaecati odit quaerat quas quasi quos ratione reiciendis rem reprehenderit sequi, sint suscipit totam voluptatibus voluptatum? Aliquid animi, architecto, at atque, consectetur delectus doloremque eligendi ex harum incidunt magni neque omnis quia quis quisquam recusandae reprehenderit sapiente tempora ullam velit. Ab autem cumque, deserunt doloribus eum iusto possimus quos totam vero voluptas. Adipisci architecto at corporis cum doloremque eaque eligendi enim eos excepturi exercitationem explicabo hic id in incidunt, ipsam laborum natus necessitatibus neque nesciunt non porro qui quos ratione rerum sequi unde vitae! Accusamus aspernatur at, autem beatae delectus deserunt, earum eveniet ex illum ipsum laborum magni maiores nihil non nulla omnis perferendis ut. Adipisci consequatur deserunt dolor, esse exercitationem inventore maiores pariatur ratione sequi voluptatum. Ad corporis harum quis. Ab atque dolor dolorum fugiat possimus repellat vitae voluptate. Accusamus dolorum est et excepturi expedita facilis fugiat laudantium neque nihil, odio optio pariatur placeat quidem ratione reiciendis repellat vel velit. Excepturi fugiat harum, laborum nobis non odio recusandae velit vero? At beatae earum eligendi fugiat illum molestiae non nulla possimus quidem quisquam? Accusantium debitis ex impedit natus necessitatibus qui sit voluptates! Accusamus alias aliquam, cupiditate deserunt distinctio fuga fugiat illum perferendis placeat quisquam sed, sint sit. Accusantium amet aspernatur eligendi explicabo harum ipsam libero magnam molestiae nam quae quo ratione repudiandae sint totam, vero? A atque blanditiis consectetur doloribus enim et, facilis laudantium nam nisi nostrum possimus quasi repudiandae sit sunt temporibus veniam voluptatum. A alias aliquid amet blanditiis consequuntur corporis, cum, cumque dolor dolorem dolores ea est et expedita facere fugit ipsam ipsum laudantium minus nam nemo nihil odio odit perferendis quae reprehenderit repudiandae sapiente temporibus unde vel veniam vitae, voluptas voluptate voluptatum? Accusamus asperiores autem culpa cumque dolore et harum, id impedit ipsa iste iusto minus nobis odio officiis porro, quos saepe tempora vel. Accusamus, accusantium dignissimos et eum magni molestias nemo neque officiis omnis pariatur quia sed vitae voluptas. Adipisci aliquam amet aperiam aspernatur cupiditate doloremque eligendi error exercitationem expedita fuga fugiat inventore, ipsa ipsum itaque molestias mollitia nihil obcaecati odio omnis perferendis porro praesentium quae quia quo suscipit tempora temporibus tenetur totam vel voluptate. Cum id magnam perferendis quos vitae?</p>
</section>
</div>
</div>
| Name | Type | Required | Description |
|---|---|---|---|
| target | java.lang.String | true | Cible du lien |
| label | java.lang.String | true | Libellé du lien |
<%@ tag trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ attribute name="target" required="true" type="java.lang.String" description="Cible du lien" %>
<%@ attribute name="label" required="true" type="java.lang.String" description="Libellé du lien" %>
<c:set var="classes" value="toc__item ${pageScope.sizeClass}" />
<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>
<c:set var="dataScrollSpyAttr"><c:if test="${requestScope.__useScrollSpy}">data-scrollspyfor="${pageScope.target}"</c:if></c:set>
<li class="${classes}" ${pageScope.attributes}>
<a class="toc__link" href="#${pageScope.target}" ${dataScrollSpyAttr}>
<c:out value="${pageScope.label}" />
</a>
</li>@use 'mixins/mixins-lists' as lists;
.toc__list {
@include lists.list-reset;
display: flex;
flex-direction: column;
position: relative;
&::before {
background-color: var(--neutral-40);
content: '';
inline-size: var(--line-2xs);
inset-block-end: var(--space-0);
inset-block-start: var(--space-0);
inset-inline-start: calc(var(--space-2) - var(--line-2xs) / 2);
position: absolute;
}
}
.toc__link {
align-items: center;
color: var(--neutral-80);
display: flex;
font-size: var(--font-size-60);
gap: var(--space-4);
isolation: isolate;
padding-block: calc(var(--space-1) / 2);
text-decoration: none;
&:hover {
text-decoration: underline;
}
&::before {
aspect-ratio: 1;
background-color: var(--color1-30);
block-size: var(--size-4);
content: '';
transition: 0.15s all ease-out;
}
&[aria-current="true"] {
&::before {
background-color: var(--color1-60);
}
}
}import { autorunScrollSpies } from '/static/js/scroll-spy/scroll-spy.js';
document.querySelectorAll('.js-generate-not-initialized').forEach(generateToc);
/**
* Génère la toc à partir des éléments pointés par data-generate-selector
* @param {HTMLElement} tocContainer le conteneur
*/
function generateToc(tocContainer) {
tocContainer.classList.remove('js-generate-not-initialized');
if (!tocContainer.dataset.generateSelector) {
return;
}
const tocItemTargets = document.querySelectorAll(tocContainer.dataset.generateSelector);
if (tocItemTargets.length === 0) {
return;
}
tocItemTargets.forEach(generateItem(tocContainer));
autorunScrollSpies({
blockThreshold: 0.25
});
}
/**
* Génère un élement de la liste de la toc
* @param {HTMLElement} tocContainer le conteneur
*/
function generateItem(tocContainer) {
return (tocItemTarget) => {
const tocListItemDom = document.createElement('li');
tocListItemDom.classList.add('toc__item');
const tocListItemLinkDom = document.createElement('a');
tocListItemLinkDom.classList.add('toc__link');
tocListItemLinkDom.innerText = tocItemTarget.innerText;
if (tocListItemLinkDom.innerText) {
if (tocContainer.dataset.useScrollSpy === 'true') {
prepareScrollSpy(tocContainer, tocItemTarget, tocListItemLinkDom);
} else {
tocItemTarget.id ||= generateIdFromContent(tocItemTarget.innerText);
tocListItemLinkDom.href = `#${tocItemTarget.id}`;
}
tocListItemDom.append(tocListItemLinkDom);
}
const tocListDom = tocContainer.querySelector(':scope > .toc__list');;
tocListDom.append(tocListItemDom);
};
}
/**
* Génère un ID unique pour les éléments de la toc
* @returns {string} id unique
*/
function generateTocID() {
return `toc_${globalThis.crypto.randomUUID()}`;
}
/**
* Génère un ID à partir du texte contenu
* @param content le contenu (un titre par exemple
* @returns {string} l'id généré
*/
function generateIdFromContent(content) {
let id_temp = content
.normalize('NFD')
.replaceAll(/[\u0300-\u036f]/g, '')
.toLocaleLowerCase()
.replaceAll(/[^a-z0-9]/g, '-')
.replaceAll(/-+/g, '-')
.replaceAll(/(^-|-$)/g, '');
let id = id_temp;
let index = 0;
while (document.getElementById(id)) {
id = `${id_temp}_${index++}`;
}
return id || generateTocID();
}
/**
* Paramètre le scroll spy sur la toc
* @param {HTMLElement} tocContainer la toc
* @param {HTMLElement} target l'item cible de la toc
* @param {HTMLElement} item l'élément de la toc
*/
function prepareScrollSpy(tocContainer, target, item) {
let targetElement = target.parentElement;
if (tocContainer.dataset.useScrollSpyTargetSelector === 'self') {
targetElement = target;
} else if (target.closest(tocContainer.dataset.useScrollSpyTargetSelector)) {
targetElement = target.closest(tocContainer.dataset.useScrollSpyTargetSelector);
}
targetElement.id ||= generateTocID();
item.href = `#${targetElement.id}`;
item.dataset.scrollspyfor = targetElement.id;
}
import { autorunScrollSpies } from '/static/js/scroll-spy/scroll-spy.js';
import { onPageReady } from '/static/js/script-loader-helper.js';
onPageReady(() => {
autorunScrollSpies({
blockThreshold: 0.25
});
});