Centre des communautés
Advertisement
Centre des communautés
Cette fonctionnalité est activée par défaut sur Fandom.

Tabber vous permet de créer des onglets dont le contenu s'affiche sans avoir à rafraîchir la page. Veuillez noter que les tabbers ne fonctionnent pas sur mobile. Voir la section Expérience mobile défaillante ci-dessous.

Un exemple de tabber affichant le premier onglet

Pas à pas[]

  • Modifiez une page et basculer dans l'éditeur source.
  • Copiez et collez le code suivant dans votre éditeur.
<tabber>
Titre du premier onglet=
Contenu du premier onglet.
|-|
Titre du deuxième onglet=
Contenu du deuxième onglet.
|-|
Titre du troisième onglet=
Contenu du troisième onglet.
</tabber>
  • Cliquez sur « Aperçu » pour voir que le code génère ces onglets :

Contenu du premier onglet.

Contenu du deuxième onglet.

Contenu du troisième onglet.

  • Cliquez sur « Reprendre la modification » pour revenir à la modification.
  • Modifiez vos onglets en remplaçant le texte des titres et du contenu par le contenu de votre communauté. Par exemple, remplacez « Titre du premier onglet » par « Personnages » et remplacez le texte de l'exemple par des descriptions et des images de vos personnages préférés. Vous pouvez également modifier le nombre d'onglets en ajoutant ou en supprimant du code.

Tabbers complexes[]

Il est possible de créer des onglets avec deux sections, en utilisant deux lignes de texte : {{#tag:tabber et {{!}}-{{!}}. {{!}}-{{!}} agit comme une rupture pour la balise d'origine ; créant les second, troisième, etc. onglets. La balise en elle-même est un nouveau Tabber, fonctionnant exactement comme le Tabber montré au-dessus de cette section.

Exemple[]

Contenu un

Contenu deux

Etc.

Contenu 1

Contenu 2

Contenu 3

À la différence des Tabbers normaux, ceux-ci doivent être fermés avec }} à la fin, pour chaque onglet ! Code :

<tabber>
|-|Tabber Un= 
{{#tag:tabber|1=
Contenu un

{{!}}-{{!}}
2=
Contenu deux

{{!}}-{{!}}
3=
Etc.
}}
|-|Tabber Deux=
{{#tag:tabber|4=
Contenu 1

{{!}}-{{!}}
5=
Contenu 2

{{!}}-{{!}}
6=
Contenu 3
}}
</tabber>

Informations d'utilisation[]

  • Formatage : Les titres doivent toujours se terminer par un signe égal « = » et le séparateur d'onglet « |-| » doit toujours être placé entre chaque onglet.
  • Wikitexte : Vous pouvez utiliser n'importe quel wikitexte dans les onglets, dont des modèles et des images.

Mise en page[]

.wds-tabber {
    /* style de mise à la ligne du tabber */
}
.wds-tabber > .wds-tab__content.wds-is-current {
    /* contenu visible du tabber */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab {
    /* onglets du tabber */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label {
    /* libellés des onglets du tabber */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab:hover {
    /* onglets du tabber au survol */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label:hover {
    /* libellés des onglets du tabber quand on clique dessus */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab:active {
    /* onglets du tabber quand on clique dessus */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab > .wds-tabs__tab-label:active {
    /* libellés des onglets du tabber quand on clique dessus */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current {
    /* onglet du tabber sélectionné */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current:hover {
    /* onglet du tabber sélectionné au survol */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs > .wds-tabs__tab.wds-is-current:active {
    /* onglet du tabber sélectionné quand on clique dessus */
}
.wds-tabber > .wds-tabs__wrapper > .wds-tabs__arrow-right,
.wds-tabber > .wds-tabs__wrapper > .wds-tabs__arrow-left {
    /* flèches du tabber */
}

Problèmes[]

Expérience mobile défaillante[]

Une grande partie du CSS et du JavaScript qui s'exécutent sur votre bureau/ordinateur portable ne peut pas être appliquée sur un appareil mobile. Pour contrer cela, Fandom a supprimé la plupart de ce code de l'habillage mobile - y compris les éléments qui rendent les Tabber possible. Ainsi, les utilisateurs d'appareils mobiles ne verront plus aucun des repères visuels qui séparent chaque ensemble d'informations (Le contenu des onglets apparaîtra, mais il ne sera pas scindé en onglets).

Il y a des problèmes avec les codes CSS et HTML supplémentaires utilisés comme solution de contournement, qu'aucun code n'est en mesure de résoudre. C'est donc beaucoup d'efforts pour un gain minime ; vous pourriez aussi bien utiliser des sections ordinaires à la place.

Visualiser/Modifier le contenu des onglets[]

Tabber ne permet pas de visualiser/modifier facilement chaque section. Cela peut être gênant pour les utilisateurs inexpérimentés qui souhaitent modifier le contenu à l'intérieur d'un onglet. De plus, les personnes qui utilisent l'Éditeur Visuel ne pourront pas le modifier sans passer par l'éditeur source.

Infoboxes[]

Tabber ne s'affiche pas toujours correctement lorsqu'il est placé dans une infobox. Pour remédier à cela, une galerie peut être utilisée dans une infobox pour obtenir le même effet que le Tabber. Lorsque vous utilisez les infoboxes portables standard de Fandom, une galerie peut être transmise directement à un champ image pour afficher des images sous forme d'onglets. Pour mettre en onglet d'autres contenus, des panels d'infobox peuvent être utilisés. Pour plus d'informations, voir Aide:Infoboxes.

Voir aussi[]

Plus d'aide

Advertisement