Modèle:Boîte déroulante/début

Documentation

Cette documentation est incluse dans la sous-page de documentation (voir | modifier | historique). Si vous voulez améliorer ce modèle et si celui-ci est protégé, demandez à un administrateur de vous aider.

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

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

Remarques

• 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

• 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

Syntaxe de {{Boîte déroulante}}

• {{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}}

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

Paramètres

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 Mozilla : visible Internet Explorer : non visible 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… Table des couleurs Voir liens
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… Table des couleurs Voir liens
couleurTexteT	couleur du texte de titre	black
thinning	titre pas en gras	no	yes/no

Exemple

• 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 1 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 2 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 3 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 4 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 marges

Code wiki

Rendu

Un paragraphe avant. {{boîte déroulante|margeHaut=1em|margeBas=3em|titre=Exemple avec marges|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.}} Un paragraphe après.

Un paragraphe avant. Exemple avec marges 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.   Un paragraphe après.

• 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 5    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.}}	Exemple 6 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

• {{Boîte déroulante/début}} (qui s'utilise avec {{Boîte déroulante/fin}})