Modèle:Boîte déroulante

La bibliothèque libre.
Aller à la navigation Aller à la recherche
Documentation


OOjs UI icon information-progressive.svg Cette documentation est commune aux modèles : {{Boîte déroulante}}, {{Boîte déroulante/début}} et {{Boîte déroulante/fin}}.

Note : Les modèles {{Boîte déroulante/début}} et {{Boîte déroulante/fin}} s'utilisent ensemble et permet de mettre un contenu plus varié.

Utilisation[modifier]

Permet de placer un cadre d’une zone de texte rétractable sur une ligne.

Remarques[modifier]

  • Le « contenu » peut contenir des tableaux.
  • Cela permet d'améliorer la présentation de la page.
  • Utiliser {{Boîte déroulante/début}} pour mettre un tableau dans une boîte déroulante.

Un modèle alternatif existe, composé de deux morceaux indissociables : {{Boîte déroulante/début}} et {{Boîte déroulante/fin}}, le premier accepte les mêmes paramètres que {{Boîte déroulante}}, la différence est que le contenu peut être arbitraire alors que ({{Boîte déroulante}} ne permet pas de caractères « | » dans le contenu).

Recommandations[modifier]

  • Il faut limiter l'utilisation de boîtes déroulantes. (Pourquoi ?)
  • Ne pas utiliser de boîte déroulante à l’intérieur d’une boîte déroulante. (Sinon que ce passera-t-il ?)

Syntaxe[modifier]

Syntaxe de {{Boîte déroulante}}[modifier]

  • {{boîte déroulante|titre=TITRE|contenu=CONTENU}}

ou

  • {{boîte déroulante|align=ALIGN|alignT=ALIGNT|titre=TITRE|label=LABEL|contenu=CONTENU|largeur=LARGEUR|hauteur=HAUTEUR}}

Syntaxe de {{Boîte déroulante/début}}[modifier]

{{boîte déroulante/début|titre=TITRE}}
Contenu
{{boîte déroulante/fin}}

Paramètres[modifier]

Paramètres obligatoires
 paramètre   effet   valeurs possibles 
titre Titre affiché de la boîte Totalement libre
contenu Texte contenu dans la boîte Totalement libre, mais certains caractères spéciaux ne passent pas.
Utiliser dans ce cas « {{Boîte déroulante début}} contenu {{Boîte déroulante fin}} ».
Paramètres facultatifs
 paramètre   effet   valeur par défaut   valeurs possibles 
br saut de ligne en entête br=yes br=no pour les boites déroulantes empilées.
arrondi (désactivé) arrondi des angles 0 Les angles peuvent apparaître arrondis si le navigateur le permet

Valeur conseillée : 0.6em
S’exprime en pt, px ou em

image image à gauche L’image facultative apparaît à l’ouverture de la boîte.
Elle doit être totalement renseignée.
Exemple : [[Image:Gtk-dialog-info.svg|15px]]
alignB alignement de la boîte left left, right, center ou justify
hauteur hauteur de la boîte repliée 1.6em La hauteur doit être exprimée avec une unité valable.
Ne pas mettre une hauteur inférieure à 1.6em sous peine d’effets indésirables
margeHaut marge haut (avant la boîte) 0em La hauteur doit être exprimée avec une unité valable.
Il est possible de mettre 0
margeBas marge bas (après la boîte) 1em La hauteur doit être exprimée avec une unité valable.
Il est possible de mettre 0
largeur largeur de la boîte 100% La largeur doit être exprimée avec une unité valable
couleurBordure couleur du contour #AAAAAA Expression de couleur valide
exemples : black, #C080FF…
couleurFondB couleur de fond de la boîte #FFFFFF
couleurFond couleur de fond du contenu white
Texte
align alignement du contenu left left, right, center ou justify
alignT alignement du titre center
taille taille de police du contenu 1em libre, de préférence exprimé en em : 1em, 0.9em, etc.
label texte du lien de droite [ Dérouler ] / [ Enrouler ] Totalement libre. Le caractère « / » permet de séparer les deux libellés. Exemple : [ afficher ] / [ masquer ]
couleurFondT couleur de fond du titre #EFEFEF Expression de couleur valide
exemples : black, #C080FF…
couleurTexteT couleur du texte de titre black
thinning titre pas en gras no yes/no

Exemple[modifier]

  • Exemple de l'affichage par défaut(align=left, alignT=center)
Code wiki Rendu
{{boîte déroulante|image=[[Fichier:Gtk-dialog-info.svg|15px]]|align=left|titre=Exemple 1|contenu=
Lorem ipsum dolor sit amet, consectetaur adipisicing 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.}}
  • Exemple avec du contenu aligné à droite (align=right)
Code wiki Rendu
{{boîte déroulante|align=right|titre=Exemple 2|contenu=
Lorem ipsum dolor sit amet, consectetaur adipisicing 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.}}
  • Exemple avec le contenu centré, et le titre à gauche (align=center, alignT=left)
Code wiki Rendu
{{boîte déroulante|align=center|alignT=left|titre=Exemple 3|contenu=
Lorem ipsum dolor sit amet, consectetaur adipisicing 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.}}
  • Exemple avec le contenu justifié, et le titre à droite (align=justify, alignT=right)
Code wiki Rendu
{{boîte déroulante|align=justify|alignT=right|titre=Exemple 4|contenu=
Lorem ipsum dolor sit amet, consectetaur adipisicing 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.}}
  • Exemple pour comprendre le fonctionnement des couleurs
Code wiki Rendu
{{boîte déroulante|titre=Exemple 5|couleurBordure=green|couleurFondB=lightpink|couleurFondT=yellow|couleurTexteT=blue|couleurFond=lightcyan|contenu=
<br />  [[Fichier:Palette boîte déroulante.gif]]
*couleurBordure=green
*couleurFondB=lightpink
*couleurFondT=yellow
*couleurTexteT=blue
*couleurFond=lightcyan
}}
  • Exemple avec angles ronds (arrondi=0.6em)
Code wiki Rendu
{{boîte déroulante|titre=Exemple 6|arrondi=0.6em|contenu =Lorem ipsum dolor sit amet, consectetaur adipisicing 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.}}

Voir aussi[modifier]