Tabs BBCode Extension para phpBB 3.3

Descrição

Adiciona suporte para conteúdo em abas dentro das postagens usando BBCode.

A extensão permite organizar conteúdos longos em blocos de abas, com suporte opcional a ícones Font Awesome, cores simples por aba, comportamento responsivo e modo accordion automático em dispositivos móveis.

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, como #tab-1.
• Marcação acessível com ARIA.
• Navegação por teclado.
• Compatibilidade com conteúdo usando [code], [quote] e [url] dentro das abas.
• CSS sem cantos arredondados.

Requisitos

• phpBB 3.3.0 ou superior.
• PHP 7.4 ou superior.
• Font Awesome disponível no estilo do fórum para usar ícones fa-*.

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.
5. Se necessário, force o refresh do navegador com Ctrl + F5.

BBCodes

A extensão possui migration para criar ou atualizar os BBCodes automaticamente.

Contêiner de Abas (Tabs container)

Uso do BBCode

[tabs]{TEXT}[/tabs]

Substituição HTML

<div class="mpbb-tabs">{TEXT}</div>

Linha de ajuda

[tabs]abas aqui[/tabs]

Aba individual (Tab item)

Uso do BBCode

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

Substituição HTML

<div class="mpbb-tab" data-title="{SIMPLETEXT}"><span class="mpbb-tab-title-source">{SIMPLETEXT}</span>{TEXT}</div>

Linha de ajuda

[tab=Titulo]Conteúdo da aba[/tab]

Exemplos de uso

Exemplo básico

[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

[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.

[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

[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]

Deep linking

É possível abrir uma aba diretamente usando hash na URL:

https://seudominio.com/viewtopic.php?t=123#tab-1

A contagem começa em 0:

#tab-0 = primeira aba
#tab-1 = segunda aba
#tab-2 = terceira aba

Mobile

Em telas pequenas, a extensão converte automaticamente o layout de abas em accordion, mantendo o conteúdo mais legível no mobile.

Observações importantes

• O formato recomendado é sempre [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 foi removido dos exemplos oficiais para evitar incompatibilidades com charset do banco.
• Depois de atualizar arquivos JS/CSS, limpe o cache do phpBB e do navegador.

Autor

MundophpBB