Tabs BBCode

[Chico Gois]

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

1. Copie os arquivos para: ext/mundophpbb/tabsbbcode
2. Vá em ACP → Personalizar → Extensões
3. Ative a extensão "Tabs BBCode"
4. 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

[Chico Gois]

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.