Liste des étapes - Documentation
Objectif
Pour donner une meilleure importance au contenu qui se trouve dans une liste ordonnée. Avoir une conception qui reflète mieux la taille et le poids des en-têtes.
Usage
Utilisez lorsque
- Les étapes et le contenu sont au centre de l'attention de la page
- Conception par défaut (cercle avec numéro à l'intérieur) :
- Utilisé pour la navigation, comme une page de sujet, ou une page d'étape de métro où les en-têtes sont des liens vers des sous-sujets ou des sous-étapes
- Recommandé d'utiliser des verbes d'action
- Doit toujours avoir des en-têtes
- Conception avec zéro en tête (bordure droite avec les étapes 1 à 9 précédées d'un zéro) :
- Utilisé pour le contenu régulier, comme des instructions étape par étape
- L'utilisation d'en-têtes est facultative
Ne pas utiliser lorsque
- Le contenu ne répond pas aux critères d'être dans une liste ordonnée
- La liste n'est pas une partie principale de la page
- Les éléments de liste ne contiennent qu'une petite quantité de contenu, utilisez une liste ordonnée normale
Soyez prudent lorsque
Correspondre le mauvais modèle avec le mauvais type de contenu.
Exemples pratiques
Évaluation et rapport
Comment mettre en œuvre
Conception par défaut pour la navigation étape par étape vers les pages web
Dans l'élément de liste de niveau supérieur :
<ol class="lst-stps">Options de configuration
Conception avec zéro en tête pour le contenu étape par étape sur la page
Dans l'élément de liste de niveau supérieur :
<ol class="lst-stps ld-zr">Sous-listes (imbriquées)
Dans les sous-listes :
...
<li>
<ol class="lst-stps-sub">
...
</ol>
</li>
...La sous-liste hérite de la conception de la liste parente (par défaut ou avec zéro en tête).
Elles apparaissent comme un élément alpha inférieur (par exemple, 2a, 2b, 2c, etc.).
Étapes de liste rayées
Cette conception doit être utilisée avec parcimonie pour éviter le risque que certains éléments de la liste paraissent « surlignés ».
Conception rayée (par défaut) :
<ol class="lst-stps stps-strpd">Conception rayée (avec zéro en tête) :
<ol class="lst-stps ld-zr stps-strpd">Sous-listes rayées
Par défaut, les sous-listes n'hériteront pas de la conception rayée sans utiliser la classe stps-strpd sur leur propre élément.
Conception de sous-liste rayée (par défaut) :
<ol class="lst-stps stps-strpd">
...
<li>
<ol class="lst-stps-sub stps-strpd">
...
</ol>
</li>
...
</ol>
Conception de sous-liste rayée (avec zéro en tête) :
<ol class="lst-stps ld-zr stps-strpd">
...
<li>
<ol class="lst-stps-sub stps-strpd">
...
</ol>
</li>
...
</ol>
Attribut de début (start)
Suivez la valeur de l'attribut <ol> start de 2 à 9.
<ol class="lst-stps" start="2">Code source
Détails de la page
- Date de modification :