Modèle:Liste verticale-horizontale/Documentation

Ce modèle permet d'afficher des listes à puces ou numérotées à plusieurs niveaux d'imbrications avec une mise en forme spécifique. Les éléments de premier niveau sont affichées verticalement (comme une liste à puces ou numérotées traditionnelle), et les niveaux inférieurs sont affichés horizontalement, séparés par des puces (comme avec {{Liste horizontale}}).

Ce modèle permet de construire des listes conformes aux règles d'accessibilité WCAG 2.0 (voir aussi : Wikipédia:Atelier accessibilité/Bonnes pratiques#Listes à puces et listes numérotées).

Ce modèle utilise l'extension TemplateStyles, avec la feuille de style CSS /styles.css.

Syntaxe

{{Liste verticale-horizontale|
* Élément 1 :
** Sous-élément 1.1
** Sous-élément 1.2
* Élément 2 :
** Sous-élément 2.1
}}

Exemples

Avec une liste à puces

{{Liste verticale-horizontale|
* Fruits :
** [[Pomme]]
** [[Poire]]
* Légumes :
** [[Tomate]]
** [[Concombre]]
** [[Carotte]]
** [[Pomme de terre]]
*** [[Agata (pomme de terre)|Agata]]
*** [[Bintje]]
*** [[Charlotte (pomme de terre)|Charlotte]]
** [[Épinard]]
}}

Résultat :

• Fruits :
  • Pomme
  • Poire
• Légumes :
  • Tomate
  • Concombre
  • Carotte
  • Pomme de terre
    • Agata
    • Bintje
    • Charlotte
  • Épinard

Avec une liste numérotée

{{Liste verticale-horizontale|
# Équipe 1 :
#* Joueur 1
#* Joueur 2
#* Joueur 3
# Équipe 2 :
#* Joueur 1
#* Joueur 2
#* Joueur 3
# Équipe 3 :
#* Joueur 1
#* Joueur 2
#* Joueur 3
}}

Résultat :

1. Équipe 1 :
   • Joueur 1
   • Joueur 2
   • Joueur 3
2. Équipe 2 :
   • Joueur 1
   • Joueur 2
   • Joueur 3
3. Équipe 3 :
   • Joueur 1
   • Joueur 2
   • Joueur 3

Paramètres

1

Contenu de la liste (pour la création de listes à puces, voir Aide:Syntaxe#Générer une liste).

Si le contenu contient un signe = à l'extérieur d'un modèle, il faut utiliser la syntaxe 1= suivi du contenu de la liste.

classe

Permet d'ajouter une classe à la balise englobante <div>.

style

Permet d'ajouter des styles CSS supplémentaires à la balise englobante <div>. Il est préférable d'éviter au maximum son utilisation.

TemplateData

Met en forme une liste avec les éléments de premier niveau affichés verticalement (comme une liste traditionnelle), et les éléments de niveaux inférieurs affichés horizontalement (comme avec le modèle {{Liste horizontale}}).

Paramètres du modèle

Paramètre		Description	Type	Statut
Contenu	1	Contenu de la liste. Exemple * Élément 1	Contenu	obligatoire
CSS - classes additionnelles	classe	Permet d'ajouter une ou plusieurs classes CSS à la balise <div> englobante.	Ligne	facultatif
CSS - styles additionnels	style	Permet d'ajouter un style CSS spécifique à la balise englobante <div>. Il est préférable d'éviter au maximum son utilisation.	Ligne	facultatif

Voir aussi

• {{Liste horizontale}} - pour afficher une liste horizontale, avec les éléments séparés par des puces.
• {{Liste simple}} - pour afficher une liste verticale classique, sans afficher les puces.
• {{Liste éléments}} - ancien modèle, non accessible, permet d'afficher une liste horizontale d'éléments séparés par des puces.