Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Documentation de: GC Métro

Fonctionnalité instable

À être utilisé à vos propres risques. Toutes les fonctionnalités décrites ci-dessous pourraient être retirées à n'importe quelle version mineur/majeur ultérieure et l'ensemble des fonctionnalités provisoires sont exclues de l'API publique de GCWeb.

La documentation et/ou les exemples pratiques pourraient être incomplets ou être non disponible.

Voir l'ensemble des fonctionnalités provisoires.

Sur cette page

Objectif

Diviser du contenu long et complexe en pages qui se concentrent chacune sur une étape ou une réponse spécifique dont les gens ont besoin avant de passer à l'étape ou à la section suivante. Idéal pour présenter un service ou un processus.

Exemples pratiques

Mise en page

La mise en page de la page d'index est différente de celle des pages de sections. Vous trouverez ci-dessous des exemples de code montrant comment les éléments GC Métro sont disposés avant l'initialisation du plugin.

Page d'introduction

L'extrait de code GC Métro pour la page d'introduction peut être placé n'importe où dans le contenu de la page (<main>). Cependant, assurez-vous que le niveau de titre est approprié. De plus, les éléments de la sous-section ne doivent pas être inclus dans la page d'introduction.

<main>
	<h1 property="name" id="wb-cont" class="gc-thickline">[Nom du service]</h1>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<!-- Navigation de GC Métro -->
	<nav class="gc-subway provisional">
		<h2>Sections</h2>
		<dl>
			<dt><a href="section1-fr.html">[Page 1]</a></dt>
			<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
			<dt><a href="section2-fr.html">[Page 2]</a></dt>
			<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
			<dt><a href="section3-fr.html">[Page 3]</a></dt>
			<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
			<dt><a href="section4-fr.html">[Page 4]</a></dt>
			<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
			<dt><a href="section5-fr.html">[Page 5]</a></dt>
			<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
			<dt><a href="section6-fr.html">[Page 6]</a></dt>
			<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
		</dl>
	</nav>
	...
</main>

Page de section

L'extrait de code GC Métro d'une page de section doit être placé au début de votre contenu, avant le titre (<h1>).

<main>
	<!-- 1: Navigation de GC Métro -->
	<nav class="gc-subway provisional">
		<h1>[Nom du service]</h1>
		<ul>
			<li><a href="section1-fr.html" class="active">[Page 1]</a></li>
			<li><a href="section2-fr.html">[Page 2]</a></li>
			<li><a href="section3-fr.html">[Page 3]</a></li>
			<li><a href="section4-fr.html">[Page 4]</a></li>
			<li><a href="section5-fr.html">[Page 5]</a></li>
			<li><a href="section6-fr.html">[Page 6]</a></li>
		</ul>
	</nav>

	<!-- 2: Titre -->
	<h1 property="name" id="wb-cont" class="gc-thickline">[Page 1]</h1>

	<!-- 3: Contenu de la page -->
	<p>Contenu de la page. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae.</p>
	...

	<!-- 4: Navigation du document -->
	<nav class="gc-subway-pagination">
		<h2 class="wb-inv">Navigation du document</h2>
		<ul class="pager">
			<li class="next"><a href="section2-fr.html" rel="next"><span class="wb-inv">Suivant: </span>[Page 2]</a></li>
		</ul>
	</nav>

	<!-- 5: Information additionnelle (optionnel) -->
	<aside class="gc-subway-support">
		<h2 class="h3">Information additionnelle</h2>
		...
	</aside>
</main>

Style

Classe (obligatoire): active
À ajouter au lien de la page active (<a>) dans la navigation GC Métro.
Classe (optionnelle): noline
À appliquer sur une liste de sous-sections (<ul>). Cela supprimera la ligne verticale reliant toutes les sous-sections. Elle ajoutera également une ligne horizontale reliant la sous-section active à la ligne de métro principale. Exemple d'implémentation.

Sémantique

Page d'introduction

Le niveau du titre dépendra de la structure de votre document.

<nav class="gc-subway provisional">
	<h2>Sections</h2>
	<dl>
		<dt><a href="section1-en.html">[Page 1]</a></dt>
		<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
		<dt><a href="section2-en.html">[Page 2]</a></dt>
		<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
		<dt><a href="section3-en.html">[Page 3]</a></dt>
		<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
		<dt><a href="section4-en.html">[Page 4]</a></dt>
		<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
		<dt><a href="section5-en.html">[Page 5]</a></dt>
		<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
		<dt><a href="section6-en.html">[Page 6]</a></dt>
		<dd>Courte description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
	</dl>
</nav>

Page de section

Élément GC Métro principal

La navigation GC Métro permet jusqu'à deux (2) niveaux d'éléments de liste. Cependant, la structure par défaut et recommandée n'est qu'à un (1) niveau.

<nav class="gc-subway provisional">
	<h1>[Nom du service]</h1>
	<ul>
		<li><a href="section1-en.html" class="active">[Page 1]</a></li>
		<li><a href="section2-en.html">[Page 2]</a></li>
		<li><a href="section3-en.html">[Page 3]</a></li>
		<li><a href="section4-en.html">[Page 4]</a></li>
		<li><a href="section5-en.html">[Page 5]</a></li>
		<li><a href="section6-en.html">[Page 6]</a></li>
	</ul>
</nav>

Navigation du document

À ajouter à la fin de votre contenu, avant le bloc d'information additionnelle (le cas échéant). Cette navigation est obligatoire pour les pages de section.

<nav class="gc-subway-pagination">
	<h2 class="wb-inv">Navigation du document</h2>
	<ul class="pager">
		<li class="previous"><a href="#" rel="prev"><span class="wb-inv">Précédent: </span>[Page 3]</a></li>
		<li class="next"><a href="#" rel="next"><span class="wb-inv">Suivant: </span>[Page 3b]</a></li>
	</ul>
</nav>

Information additionnelle (optionnel)

À ajouter à la fin de votre contenu, après le bloc de navigation du document. Ce bloc est facultatif. Il sera affiché sur le côté droit sous la navigation GC Métro sur les points d'arrêt md et lg et à la fin du contenu sur les points d'arrêt xs et sm.

<aside class="gc-subway-support">
	<h2 class="h3">Information additionnelle</h2>
	...
</aside>

Configuration

Utilisation: <nav class="gc-subway provisional" data-gc-subway="{...}">

Option Description Valeur par défaut Exemple
data-sections-title Texte utilisé pour le titre créé dynamiquement, visible au-dessus de la navigation de GC Métro sur les points d'arrêt md et lg. "Sections" data-sections-title="Mes sections"

Schéma

Détails de la page

Date de modification :