Skip to content

mundophpbb/tabsbbcode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
  1. Vá em:
ACP → Personalizar → Extensões
  1. Ative a extensão Tabs BBCode.
  2. Limpe o cache do fórum.
  3. 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

About

No description, website, or topics provided.

Resources

License

GPL-2.0, GPL-2.0 licenses found

Licenses found

GPL-2.0
LICENSE
GPL-2.0
license.txt

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors