Utilisation des onglets pour afficher différents types de personnages

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.

Pas à pas[modifier le wikicode]

  • 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 « Retour » 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.

Informations d'utilisation[modifier le wikicode]

  • 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[modifier le wikicode]

.tabberlive {
    /* tabber wrapper style */
}
.tabberlive > .tabbertab:not(.tabbertabhide) {
    /* tabber visible content */
}
.tabberlive > .tabbernav > li > a {
    /* tabber tabs */
}
.tabberlive > .tabbernav > li > a:hover {
    /* tabber tabs when being hovered */
}
.tabberlive > .tabbernav > li > a:active {
    /* tabber tabs when being clicked */
}
.tabberlive > .tabbernav > li.tabberactive > a {
    /* selected tabber tab */
}
.tabberlive > .tabbernav > li.tabberactive > a:hover {
    /* selected tabber tab when being hovered */
}
.tabberlive > .tabbernav > li.tabberactive > a:active {
    /* selected tabber tab when being clicked */
}

Problèmes[modifier le wikicode]

Expérience mobile cassée[modifier le wikicode]

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.

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[modifier le wikicode]

Tabber ne permet pas de visualiser/modifier facilement la page d'origine. 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[modifier le wikicode]

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.

Voir aussi[modifier le wikicode]

Plus d'aide

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