Mundo phpBB

Tabs BBCode Extension para phpBB 3.3

Descrição
Adiciona suporte para conteúdo em abas dentro das postagens usando BBCode.

Funcionalidades

Layout de conteúdo em abas
Ícones Font Awesome opcionais
Cores opcionais por aba
Design responsivo
Modo accordion automático no mobile
Aba ativa persistente
Links diretos (Deep linking #tab-1)
Marcação acessível (ARIA)
Navegação por teclado
Compatibilidade com [code], [quote] e [url] dentro das abas

Instalação

Copie os arquivos para: ext/mundophpbb/tabsbbcode
Vá em ACP → Personalizar → Extensões
Ative a extensão "Tabs BBCode"
Limpe o cache do fórum

BBCodes

Contêiner de Abas (Tabs container)

[tabs]{TEXT}[/tabs]

Aba individual

[tab={SIMPLETEXT}]{TEXT}[/tab]

Exemplo básico

Código: Selecionar todos

[tabs]
[tab=PHP]Conteúdo da aba PHP.[/tab]
[tab=JavaScript]Conteúdo da aba JavaScript.[/tab]
[tab=CSS]Conteúdo da aba CSS.[/tab]
[/tabs]

Exemplo com ícone Font Awesome

Código: Selecionar todos

[tabs]
[tab=fa-code PHP]Conteúdo PHP.[/tab]
[tab=fa-js JavaScript]Conteúdo JavaScript.[/tab]
[tab=fa-css3 CSS]Conteúdo CSS.[/tab]
[/tabs]

Exemplo com cores

Cores disponíveis: red, blue, green, orange, purple, teal.

Código: Selecionar todos

[tabs]
[tab=red PHP]Conteúdo PHP.[/tab]
[tab=blue JavaScript]Conteúdo JavaScript.[/tab]
[tab=green CSS]Conteúdo CSS.[/tab]
[/tabs]

Exemplo com cores e ícones

Código: Selecionar todos

[tabs]
[tab=red fa-code PHP]Conteúdo PHP.[/tab]
[tab=blue fa-js JavaScript]Conteúdo JavaScript.[/tab]
[tab=green fa-css3 CSS]Conteúdo CSS.[/tab]
[/tabs]

Observações

O formato recomendado é [tab=Titulo]Conteúdo[/tab]
Para ícones, use [tab=fa-nome-do-icone Titulo]Conteúdo[/tab]
Para cores, use [tab=cor Titulo]Conteúdo[/tab]
Para cores com ícones, use [tab=cor fa-icone Titulo]Conteúdo[/tab]
Emoji não é usado nos exemplos oficiais para evitar problemas de charset em alguns bancos

Exemplos:

PHPConteúdo da aba PHP.

Código: Selecionar todos

phpinfo()

JavaScriptConteúdo da aba JavaScript.

Teste

CSSConteúdo da aba CSS. mundophpbb.com.br

fa-code PHPConteúdo PHP.

fa-js JavaScriptConteúdo JavaScript.

fa-css3 CSSConteúdo CSS.

red PHPConteúdo PHP.

blue JavaScriptConteúdo JavaScript.

green CSSConteúdo CSS.

red fa-code PHPConteúdo PHP.

blue fa-js JavaScriptConteúdo JavaScript.

green fa-css3 CSSConteúdo CSS.

Mundo phpBB

Tabs BBCode

Tabs BBCode

Re: Tabs BBCode