FANDOM


Tabber

Tabber usada para mostrar tipos de personagens


Tabber permite que você adicione várias abas em uma seção de conteúdo. Você pode alternar entre as abas sem ter que recarregar a página.

Passo-a-passo

  • Abra um artigo para edição no modo fonte.
  • Copie e cole o código seguinte no seu editor.
<tabber>Título da primeira aba = Texto da primeira aba 
|-|Título da segunda aba = Texto da segunda aba 
|-|Título da terceira aba = Texto da terceira aba 
</tabber>
  • Clique em "pré-visualizar". Você verá que o código produziu esse resultado:

Texto da primeira aba

Texto da segunda aba

Texto da terceira aba

  • Clique em "back" para voltar à edição

Mais informações

Formatação: Fique ciente de que o título sempre deve terminar com o sinal de igual ("=") e o divisor de abas ("|-|) sempre devem aparecer entre abas.

Wikicode: Você pode usar o código da comunidade dentro das suas abas, incluindo predefinições e imagens.

Cabeçalhos: Cabeçalhos H2 e H3 estão desabilitados em "Tabber". Você pode habilitá-los adicionando o código na página MediaWiki:Wikia.css:

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3 { 
display:block !important; 
}

Tabview e Tabber: As etiquetas Tabber podem ser usadas dentro de outro tabber. As etiquetas tabber não funcionarão em tabview; o texto dentro do tabber aparecerá como vários parágrafos.

Personalizando

.tabberlive {
	/* estilo do wrapper do tabber */
}
.tabberlive > .tabbertab:not(.tabbertabhide) {
	/* conteúdo visível do tabber */
}
.tabberlive > .tabbernav > li > a {
	/* abas do tabber */
}
.tabberlive > .tabbernav > li > a:hover {
	/* abas do tabber quando sendo flutuadas */
}
.tabberlive > .tabbernav > li > a:active {
	/* abas do tabber quando sendo clicadas */
}
.tabberlive > .tabbernav > li.tabberactive > a {
	/* aba do tabber selecionada */
}
.tabberlive > .tabbernav > li.tabberactive > a:hover {
	/* aba do tabber selecionada quando sendo flutuada */
}
.tabberlive > .tabbernav > li.tabberactive > a:active {
	/* aba do tabber selecionada quando sendo clicada */
}

Veja também

Mais ajuda e feedback