FANDOM


Cette fonctionnalité est activée par défaut sur Fandom.

Tab view vous offre un moyen simple d'afficher le contenu de plusieurs pages sur une seule en utilisant des onglets (tabs). C'est un moyen attractif et utile pour afficher et organiser du contenu.

Pour une extension similaire qui ne nécessite pas plusieurs pages, consultez Tabber.

Pas à pasModifier

  • Premièrement, vous devez créer une page pour chaque onglet afin d'y mettre leur contenu respectif. Ces pages peuvent être créées n'importe où sur la communauté.
Dans cet exemple, nous avons créé trois sous-pages à cette page, que nous allons mettre dans le tabview ci-dessous. Ces pages sont :
  • Ouvrez la page dans laquelle vous voulez voir apparaître ces pages et passez en mode source.
  • Saisissez le code de votre tabview comme suit :
<tabview>
NomdelaPage1|TITRE1
NomdelaPage2|TITRE2
NomdelaPage3|TITRE3
</tabview>

Avec notre exemple, nous allons donc saisir :

<tabview>
Aide:Tab View/Exemple 1|Onglet 1
Aide:Tab View/Exemple 2|Onglet 2
Aide:Tab View/Exemple 3|Onglet 3
</tabview>

Cela nous donnera les onglets suivants :


PersonnalisationModifier

Avec le titre, il y a deux autres variables que vous pouvez modifier dans vos onglets :

  • Cache
  • Ouvert par défaut

Nous expliquerons leur utilité après mais voici comment elles se présentent :

<tabview>
Nom de la page|Titre|Cache|Ouvert par défaut
</tabview>

Désactiver le cache des ongletsModifier

Si la page montre des informations mises à jour très régulièrement, vous voudrez peut-être forcer l'onglet à récupérer le contenu de la page à chaque chargement. Cela peut être fait avec un | suivi de false. Cela doit être utilisé à bon escient car cela peut diminuer l'expérience de lecture globale.

<tabview>
Aide:Tab View/Exemple 1|Onglet 1|false
Aide:Tab View/Exemple 2|Onglet 2
Aide:Tab View/Exemple 3|Onglet 3
</tabview>

Ouvrir un onglet par défautModifier

La dernière variable choisit quel onglet est ouvert par défaut au chargement de la page. Par défaut, le premier onglet est ouvert mais vous pouvez choisir d'en ouvrir un autre en utilisant un double | suivi du mot true :

<tabview>
Aide:Tab View/Exemple 1|Onglet 1
Aide:Tab View/Exemple 2|Onglet 2||true
Aide:Tab View/Exemple 3|Onglet 3
</tabview>

Cela vous donnera :


ParamètresModifier

Les seuls paramètres disponibles pour tabview sont title et id. Vous ne pouvez pas personnaliser chaque tabview d'une page. Actuellement, cela doit être fait via le CSS du wiki. Les paramètres sont :

<tabview title="..." id="...">

StyleModifier

Une fois que vous avez mis l'id, vous pouvez personnaliser chaque onglet. Par exemple, prenons id = Example

ul.tabs > [data-tab="flytabs_Example0"] {
	/* Les règles CSS pour data-tab="flytabs_Example0" (premier onglet) apparaissent ici */
}
ul.tabs > [data-tab="flytabs_Example1"] {
	/* Les règles CSS pour data-tab="flytabs_Example1" (deuxième onglet) apparaissent ici */
}
ul.tabs > [data-tab="flytabs_Example2"] {
	/* /* Les règles CSS pour data-tab="flytabs_Example2" (dernier onglet) apparaissent ici */
}

Personnaliser les onglets via le CSSModifier

Les tabviews ont un style et un format fournis par défaut, mais ils peuvent aussi obtenir un style via le CSS. Vous pouvez copier le CSS ci-dessous (l'onglet bleu comme vu sur ce wiki) sur le CSS de votre communauté. Vous pouvez changer les valeurs de l'exemple ci-dessous pour créer un assortiment de couleur et de fond unique pour vos onglets.

/*** TabView extension ***/

/* Style pour tous les onglets non-sélectionnés */
.yui-navset .yui-nav li
{
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    background-color: #D9D9D9;
    color: #3A3A3A;
    font-size: 12px;
    margin-top: 7px;
    padding: 6px 20px 3px;
}
/* Fin du style pour tous les onglets non-sélectionnés */

/* Style de l'onglet sélectionné */
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a
{
    background-color: #7FB5D7;
    color: white;
    font-weight: bold;
}
/* Fin du style de l'onglet sélectionné */

/* L'espacement entre les onglets */
.ui-tabs .ui-tabs-nav li
{
    margin: 0 0.2em 1px 0;
    padding: 0;
}
/* FIN de l'espacement entre les onglets */

/* Enlève la bordure et de l'espace entre le contenu et les onglets */
.ui-tabs .ui-tabs-nav
{
    border-bottom: 0 none;
    margin-bottom: 0;
}
/* FIN de l'enlèvement de la bordure et de l'espace entre le contenu et les onglets  */

/* La couleur de fond et la bordure du contenu des onglets */
.ui-tabs .ui-tabs-panel
{
    background: none repeat scroll 0 0 white;
    border: 2px groove gray;
}
/* FIN de la couleur de fond et la bordure du contenu des onglets */

Voir aussiModifier

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .