Modèle:Liste verticale-horizontale/Documentation

Ceci est la page de documentation de Modèle:Liste verticale-horizontale [modifier] [purger].

Cette sous-page contient les instructions et les catégories de son modèle d'origine et elle n'est pas destinée à être visualisée directement.

Ce modèle utilise la feuille de style Liste verticale-horizontale/styles.css en CSS. Voir l'aide de l'extension TemplateStyles si vous voulez en savoir plus.

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).

Syntaxe[modifier le code]

{{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[modifier le code]

Avec une liste à puces[modifier le code]

{{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[modifier le code]

{{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 :

Équipe 1 :
- Joueur 1
- Joueur 2
- Joueur 3
Équipe 2 :
- Joueur 1
- Joueur 2
- Joueur 3
Équipe 3 :
- Joueur 1
- Joueur 2
- Joueur 3

Paramètres[modifier le code]

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[modifier le code]

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	État
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 de texte	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 de texte	facultatif

Voir aussi[modifier le code]

{{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.

Projet Modèle