|
|
| Line 1: |
Line 1: |
| <includeonly>{{#ifeq:{{{br|yes}}}|yes|<p style="margin:0; padding:0; line-height:1em;"><br clear="all" style="margin:0; padding:0; clear:both; line-height:1em;"/></p>|}} | | <includeonly>{{#ifeq:{{{br|yes}}}|yes|<p style="margin:0; padding:0; line-height:1em;"><br clear="all" style="margin:0; padding:0; clear:both; line-height:1em;"/></p>|}} |
| <div style="margin-right:.5em;" align="{{#if:{{{alignB|}}}|{{{alignB}}}|left}}"> | | <div style="margin-right:.5em;" align="{{#if:{{{alignB|}}}|{{{alignB}}}|left}}"> |
| <div class="NavFrame" style="margin-top:{{{margeHaut|0em}}}; margin-bottom:{{{margeBas|0.5em}}}; width:{{{largeur|99%}}}; border-style:solid; border-radius:{{{arrondi|0}}};border-color:{{{couleurBordure|#AAAAAA}}}; background-color:{{{couleurFondB|#FFFFFF}}};" title="{{{label|⇩/⇧}}}"> | | <div class="NavFrame" style="margin-top:{{{marginTop|0em}}}; margin-bottom:{{{marginBottom|0.5em}}}; width:{{{width|99%}}}; border-style:solid; border-radius:{{{rounded|0}}};border-color:{{{bdColor|#AAAAAA}}}; background-color:{{{bgColorB|#FFFFFF}}};" title="{{{label|<big>⇩</big>:<big>⇧</big>}}}"> |
| {{#if:{{{image|}}}|<div class="NavPic" style="background-color:{{{couleurFondT|#EFEFEF}}};">{{{image}}}</div>}} | | {{#if:{{{image|}}}|<div class="NavPic" style="background-color:{{{bgColorT|#EFEFEF}}};">{{{image}}}</div>}} |
| <div class="NavHead" align="{{{alignT|center}}}" style="{{#if:{{{hauteur|}}}|height:{{{hauteur}}}}}; background-color:{{{couleurFondT|#EFEFEF}}}; color:{{{couleurTexteT|black}}}; {{#ifeq:{{{thinning|no}}}|yes|font-weight:normal;|}}">{{{titre}}}</div> | | <div class="NavHead" align="{{{alignT|center}}}" style="{{#if:{{{height|}}}|height:{{{height}}}}}; background-color:{{{bgColorT|#EFEFEF}}}; color:{{{textColorT|black}}}; {{#ifeq:{{{thinning|no}}}|yes|font-weight:normal;|}}">{{{title}}}</div> |
| <div class="NavContent" style="margin:{{{marge|0px}}}; background:{{{couleurFond|white}}}; display:block; {{#if:{{{taille|}}}|font-size:{{{taille}}}}}" align="{{{align|left}}}"> | | <div class="NavContent" style="margin:{{{margin|0px}}}; background:{{{bgColorC|white}}}; display:block; {{#if:{{{fontSize|}}}|font-size:{{{fontSize}}}}}" align="{{{align|left}}}"> |
| {{{contenu}}} | | {{{content}}} |
| </div> | | </div> |
| <div class="NavEnd"></div></div></div></includeonly><noinclude> | | <div class="NavEnd"></div></div></div></includeonly><noinclude> |
|
| |
|
| ;Utilisation | | ;Use |
| :Menu titre d'un contenu qui peut être caché ou affiché. | | :title box whose contents can be displayed or hidden. |
| ;Recommandation | | ;mini syntax |
| :Limiter l’utilisation de boîtes déroulantes
| | <pre>{{DD-box | title= | content= }}</pre> |
| :Ne pas utiliser de boîte déroulante à l’intérieur d’une boîte déroulante
| | ;Params |
| :Utiliser {{M|Boîte déroulante début}} pour mettre un tableau dans une boite déroulante.
| | *<code>br</code>: header line feed (<code>br=yes</code>, br=no) |
| ;Syntaxe minimale
| | *<code>rounded</code>: rounded corner (<code>rounded=0.6em</code> |
| <pre>{{boîte déroulante|titre=TITRE|contenu=CONTENU}}</pre> | | *<code>image</code>: left image (<code><nowiki>[[Image:Gtk-dialog-info.svg|15px]]</nowiki></code>) |
| ;Paramètres | | *<code>height</code>: wrapped box height (not less 1.6em) |
| {| class="wikitable"
| | *<code>marginTop</code>: margin before the box (<code>1em</code>) |
| |----
| | *<code>marginBottom</code>: margin after the box |
| ! colspan="4" | <big>Paramètres obligatoires</big>
| | *<code>width</code>: box width (<code>50%</code>) |
| |----
| | *<code>borderColor</code>: (<code>#AAAAAA</code>) |
| ! paramètre || effet || colspan="2" | valeurs possibles
| | *<code>bgColorB</code>: box background color (<code>#FFFFFF</code>) |
| |----
| | *<code>bgColorC</code>: content background color (<code>white</code>) |
| | <code>titre</code> || Titre affiché de la boîte || colspan="2" | Totalement libre
| | *<code>bgColorT</code>: title background color |
| |----
| | *<code>alignB</code>: box align (<code>left, right, center or justify</code>) |
| | <code>contenu</code> || Texte contenu dans la boîte || colspan="2" | Totalement libre, mais certains caractères spéciaux ne passent pas.<br />Utiliser dans ce cas "{{M|Boîte déroulante début}} ''contenu'' {{M|Boîte déroulante fin}}".
| | *<code>alignC</code>: content align |
| |----
| | *<code>alignT</code>: title align |
| ! colspan="4" | <big>Paramètres facultatifs</big>
| | *<code>fontSize</code>: content font size (0.9em) |
| |----
| | *<code>label</code>: switches to open/close the box (<code><nowiki>[open]:[close]</nowiki></code>) |
| ! paramètre || effet || valeur par défaut || valeurs possibles
| | *<code>textColorT</code>: title color text |
| |----
| | ;Example |
| | <code>br</code> || saut de ligne en entête || <code>br=yes</code> || br=no pour les boites déroulantes empilées.
| | <nowiki>{{DD-box|titre=Colors table|rounded=0.6em|align=center|width=98%|bgColorB=#eee|bgColorT=#fff|bgColorC=#fff|content={{Colors table}}}}</nowiki> |
| |----
| | {{DD-box|titre=Colors table|rounded=0.6em|align=center|width=98%|bgColorB=#eee|bgColorT=#fff|bgColorC=#fff|content={{Colors table}}}} |
| | <code>arrondi</code> (désactivé)|| arrondi des angles || <code>0</code> || Les angles peuvent apparaître arrondis si le navigateur le permet
| |
| * [[Mozilla]] : visible
| |
| * [[Internet explorer]] : non visible
| |
| Valeur conseillée : <code>0.6em</code><br/>
| |
| S’exprime en '''pt''', '''px''' ou '''em'''
| |
| |----
| |
| | <code>image</code> || image à gauche || || L’image facultative apparaît à l’ouverture de la boîte.<br />Elle doit être totalement renseignée.<br />Exemple : <code><nowiki>[[Image:Gtk-dialog-info.svg|15px]]</nowiki></code>
| |
| |----
| |
| | <code>alignB</code> || alignement de la boîte || <code>left</code> || <code>left</code>, <code>right</code>, <code>center</code> ou <code>justify</code>
| |
| |----
| |
| | <code>hauteur</code> || hauteur de la boîte repliée || || La hauteur doit être exprimée avec une unité valable.<br />Ne pas mettre une hauteur inférieure à 1.6em sous peine d’effets indésirables
| |
| |----
| |
| | <code>margeHaut</code> || marge haut (avant la boîte) || <code>0em</code> || La hauteur doit être exprimée avec une unité valable.<br />Il est possible de mettre 0
| |
| |----
| |
| | <code>margeBas</code> || marge bas (après la boîte) || <code>1em</code> || La hauteur doit être exprimée avec une unité valable.<br />Il est possible de mettre 0
| |
| |----
| |
| | <code>largeur</code> || largeur de la boîte || <code>100%</code> || La largeur doit être exprimée avec une unité valable
| |
| |----
| |
| | <code>couleurBordure</code> || couleur de la bordure || <code>#AAAAAA</code> || rowspan="3" | Expression de couleur valide<br />exemples : black, #C080FF, …<br />{{Boîte déroulante|titre=Table des couleurs|arrondi=0.6em|align=center|largeur=98%|couleurFondB=#eee|couleurFondT=#fff|couleurFond=#fff| contenu={{Table des couleurs}}}}
| |
| |----
| |
| | <code>couleurFondB</code> || couleur de fond de la boîte || <code>#FFFFFF</code>
| |
| |----
| |
| | <code>couleurFond</code> || couleur de fond du contenu || <code>white</code>
| |
| |----
| |
| ! colspan="4" | <big>Texte</big>
| |
| |----
| |
| | <code>align</code> || alignement du contenu || <code>left</code> || rowspan="2" |<code>left</code>, <code>right</code>, <code>center</code> ou <code>justify</code>
| |
| |----
| |
| | <code>alignT</code> || alignement du titre || <code>center</code>
| |
| |----
| |
| | <code>taille</code> || taille de police du contenu || || libre, de préférence exprimé en ''em'' : 1em, 0.9em, etc.
| |
| |----
| |
| | <code>label</code> || texte du lien de droite || <code><nowiki>[ Dérouler ] / [ Enrouler ]</nowiki></code> || Totalement libre. Le caractère "/" permet de séparer les deux libellés. Exemple : <code>[ afficher ] / [ masquer ]</code>
| |
| |----
| |
| | <code>couleurFondT</code> || couleur de fond du titre || <code>#EFEFEF</code> || rowspan="2" | Expression de couleur valide<br />exemples : black, #C080FF, …<br />{{Boîte déroulante|titre=Table des couleurs|arrondi=0.6em|align=center|largeur=98%|couleurFondB=#eee|couleurFondT=#fff|couleurFond=#fff| contenu={{Table des couleurs}}}}
| |
| |----
| |
| | <code>couleurTexteT</code> || couleur du texte de titre || <code>black</code>
| |
| |----
| |
| |}
| |
| | |
| Un modèle alternatif existe, composé de deux morceaux indissociables : {{m|Boîte déroulante début}} et {{m|Boîte déroulante fin}}, le premier accepte les mêmes paramètres que {{m|Boîte déroulante}}, la différence est que le contenu peut être arbitraire alors que ({{m|Boîte déroulante}} ne permet pas de caractères '''|''' dans le contenu).
| |
| | |
| | |
| {| width="100%"
| |
| | width="48%" | {{boîte déroulante|image=[[Image:Gtk-dialog-info.svg|15px]]|align=left|align=left|titre=par défaut (align=left, alignT=center)|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.}}
| |
| | width="4%" |
| |
| | width="48%" | {{boîte déroulante|align=right|titre=Contenu à droite (align=right)|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.}}
| |
| |----
| |
| | width="48%" | {{boîte déroulante|align=center|alignT=left|titre=Contenu centré, titre à gauche (align=center, alignT=left)|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.}}
| |
| | width="4%" | | |
| | width="48%" | {{boîte déroulante|align=justify|alignT=right|titre=Contenu justifié, titre à droite (align=justify, alignT=right)|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.}}
| |
| |----
| |
| | width="48%" | {{boîte déroulante|titre=essais de couleurs pour démonstration|couleurBordure=green|couleurFondB=lightpink|couleurFondT=yellow|couleurTexteT=blue|couleurFond=lightcyan|contenu=
| |
| <br /> [[Image:Palette boîte déroulante.gif]]
| |
| *couleurBordure=green
| |
| *couleurFondB=lightpink
| |
| *couleurFondT=yellow
| |
| *couleurTexteT=blue
| |
| *couleurFond=lightcyan
| |
| }} | |
| | width="4%" |
| |
| | width="48%" | {{Boîte déroulante|titre=Boîte déroulante avec angles ronds (arrondi=0.6em)|label=⇩/⇧|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.}}
| |
| |----
| |
| |}
| |
| | |
| [[Catégorie:Modèle menu|Boîte déroulante]]
| |
| </noinclude> | | </noinclude> |
- Use
- title box whose contents can be displayed or hidden.
- mini syntax
{{DD-box | title= | content= }}
- Params
br: header line feed (br=yes, br=no)rounded: rounded corner (rounded=0.6emimage: left image ([[Image:Gtk-dialog-info.svg|15px]])height: wrapped box height (not less 1.6em)marginTop: margin before the box (1em)marginBottom: margin after the boxwidth: box width (50%)borderColor: (#AAAAAA)bgColorB: box background color (#FFFFFF)bgColorC: content background color (white)bgColorT: title background coloralignB: box align (left, right, center or justify)alignC: content alignalignT: title alignfontSize: content font size (0.9em)label: switches to open/close the box ([open]:[close])textColorT: title color text
- Example
{{DD-box|titre=Colors table|rounded=0.6em|align=center|width=98%|bgColorB=#eee|bgColorT=#fff|bgColorC=#fff|content={{Colors table}}}}
<div class="NavFrame" style="margin-top:0em; margin-bottom:0.5em; width:98%; border-style:solid; border-radius:0.6em;border-color:#AAAAAA; background-color:#eee;" title="⇩:⇧">
{{{title}}}
