---
{
	"title": "Alertes repliables",
	"language": "fr",
	"category": "Plugiciels",
	"categoryfile": "plugins",
	"description": "Créer des alertes que les utilisateurs peuvent replier.",
	"altLangPrefix": "collapsible-alerts",
	"dateModified": "2016-06-09"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>But</h2>
	<p>Ce plugiciel a pour but de permettre à la classe <code>.alert</code> d'être utilisé avec un bloc <code>details</code> / <code>summary</code> afin de permettre la création d'alertes qui peuvent être repliées par l'utilisateur. Le plugiciel utilise la technologie «&nbsp;<span lang="en">Local Storage</span>&nbsp;» pour permettre au navigateur Web de se rappeler de l'état de l'alerte (ouverte ou repliées).</p>
</section>

<section>
	<h2>Exemples pratiques</h2>
	<ul>
		<li><a href="../../../demos/collapsible-alerts/collapsible-alerts-en.html">Exemple anglais</a></li>
		<li><a href="../../../demos/collapsible-alerts/collapsible-alerts-fr.html">Exemple français</a></li>
	</ul>
</section>

<section>
	<h2>Comment mettre en œuvre</h2>
	<p>Pour utiliser les alertes repliables, un bloc <code>details</code>/<code>summary</code> doit posséder ce qui suit&nbsp;:</p>
	<ul>
		<li>
			<p>L'élément <code>details</code> doit posséder&nbsp;:</p>
			<ul>
				<li>
					<p>Une classe alerte valide&nbsp;:<br>
					p. ex. <code>alert alert-success</code>.</p>
				</li>
				<li>
					<p>Un attribut <code>id</code> d'une valeur unique. Réutiliser cette valeur sur toutes les pages où il est souhaité que l'état de l'alerte soit maintenu. Par exemple, si l'utilisateur replie une alerte avec un attribute <code>id</code> d'une valeur de «&nbsp;alerte-123&nbsp;» sur une page A et navigue ensuite vers une page B où il existe aussi une alerte dont le <code>id</code> est de «&nbsp;alerte-123&nbsp;», l'arte de la page B sera déjà repliée lorsque l'utilisateur chargera la page.</p>
				</li>
				<li>
					<p>Un attribut <code>open</code> pour que son état par défaut soit ouvert. Omettre l'attribut <code>open</code> rendera l'état par défaut replié.</p>
				</li>
			</ul>
		</li>
		<li>
			<p>L'élément <code>summary</code> doit posséder une classe qui correspond à celle de son élément enfant pour que le pointeur (le triangle) soit de la bonne taille. Par exemple, lorsque l'enfant de <code>summary</code> est un <code>h3</code>, <code>summary</code> doit avoir une classe <code>h3</code>.</p>
		</li>
		<li>
			<p>Finalement, toute alerte repliée devrait être contenue à l'intérieur d'un élément <code>section</code> ou <code>aside</code> et l'enfant de l'élément <code>summary</code> devrait être un élément titre.</p>
		</li>
	</ul>
	<pre><code>&lt;section>
	&lt;details class="alert alert-success" id="alert-success" open="open"&gt;
		&lt;summary class="h2"&gt;
			&lt;h2&gt;Bien joué!&lt;/h2&gt;
		&lt;/summary&gt;
		&lt;p&gt;Vous avez lue une &lt;a href="#" class="alert-link"&gt;alerte importante&lt;/a&gt;.&lt;/p&gt;
	&lt;/details&gt;
&lt;/section&gt;</code></pre>
</section>

<section>
	<h2>Code source</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/collapsible-alerts">Code source du plugiciel Alertes repliables sur GitHub</a></p>
</section>