Mundo phpBB

# 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:

```text
ext/mundophpbb/tabsbbcode
```

2. Vá em:

```text
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**

```text
[tabs]{TEXT}[/tabs]
```

**Substituição HTML**

```html
{TEXT}
```

**Linha de ajuda**

```text
[tabs]abas aqui[/tabs]
```

### Aba individual (Tab item)

**Uso do BBCode**

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

**Substituição HTML**

```html
{SIMPLETEXT}{TEXT}
```

**Linha de ajuda**

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

## Exemplos de uso

### Exemplo básico

```text
[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

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

```text
[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

```text
[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:

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

A contagem começa em `0`:

```text
#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