https://wiki.gla.com.br/index.php?action=history&feed=atom&title=Widget%3ATabber
Widget:Tabber - Histórico de revisão
2026-05-21T01:55:26Z
Histórico de revisões para esta página neste wiki
MediaWiki 1.36.1
https://wiki.gla.com.br/index.php?title=Widget:Tabber&diff=40629&oldid=prev
GhoulBlack: Criou página com '<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Componente de Abas...'
2025-11-16T04:54:03Z
<p>Criou página com '<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Componente de Abas...'</p>
<p><b>Página nova</b></p><div><!DOCTYPE html><br />
<html lang="pt-BR"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>Componente de Abas - MediaWiki</title><br />
<style><br />
/* Container principal responsivo */<br />
.mw-tabber-container {<br />
width: 100%;<br />
max-width: 100%;<br />
margin: 20px 0;<br />
border: 1px solid #a7d7f9;<br />
border-radius: 4px;<br />
background-color: #f8f9fa;<br />
box-shadow: 0 2px 4px rgba(0,0,0,0.1);<br />
}<br />
<br />
/* Container das abas */<br />
.mw-tabber-tabs {<br />
display: flex;<br />
flex-wrap: wrap;<br />
background-color: #eaecf0;<br />
border-bottom: 2px solid #a7d7f9;<br />
padding: 0;<br />
margin: 0;<br />
list-style: none;<br />
}<br />
<br />
/* Estilo individual de cada aba */<br />
.mw-tabber-tab {<br />
flex: 1 1 auto;<br />
min-width: 100px;<br />
padding: 12px 20px;<br />
cursor: pointer;<br />
background-color: #eaecf0;<br />
border: none;<br />
border-right: 1px solid #c8ccd1;<br />
text-align: center;<br />
font-size: 14px;<br />
font-weight: 500;<br />
color: #0645ad;<br />
transition: all 0.2s ease;<br />
user-select: none;<br />
position: relative;<br />
}<br />
<br />
.mw-tabber-tab:last-child {<br />
border-right: none;<br />
}<br />
<br />
/* Hover nas abas */<br />
.mw-tabber-tab:hover {<br />
background-color: #f8f9fa;<br />
color: #0b0080;<br />
}<br />
<br />
/* Aba ativa */<br />
.mw-tabber-tab.active {<br />
background-color: #ffffff;<br />
color: #0645ad;<br />
border-bottom: 3px solid #0645ad;<br />
font-weight: 600;<br />
}<br />
<br />
/* Container do conteúdo */<br />
.mw-tabber-content {<br />
padding: 20px;<br />
background-color: #ffffff;<br />
min-height: 200px;<br />
}<br />
<br />
/* Painel de conteúdo individual */<br />
.mw-tabber-panel {<br />
display: none;<br />
animation: fadeIn 0.3s ease;<br />
}<br />
<br />
.mw-tabber-panel.active {<br />
display: block;<br />
}<br />
<br />
/* Animação de fade in */<br />
@keyframes fadeIn {<br />
from {<br />
opacity: 0;<br />
transform: translateY(5px);<br />
}<br />
to {<br />
opacity: 1;<br />
transform: translateY(0);<br />
}<br />
}<br />
<br />
/* Responsividade para tablets */<br />
@media (max-width: 768px) {<br />
.mw-tabber-tabs {<br />
flex-direction: column;<br />
}<br />
<br />
.mw-tabber-tab {<br />
border-right: none;<br />
border-bottom: 1px solid #c8ccd1;<br />
width: 100%;<br />
}<br />
<br />
.mw-tabber-tab.active {<br />
border-bottom: 3px solid #0645ad;<br />
border-right: none;<br />
}<br />
<br />
.mw-tabber-content {<br />
padding: 15px;<br />
}<br />
}<br />
<br />
/* Responsividade para mobile */<br />
@media (max-width: 480px) {<br />
.mw-tabber-tab {<br />
padding: 10px 15px;<br />
font-size: 13px;<br />
}<br />
<br />
.mw-tabber-content {<br />
padding: 12px;<br />
min-height: 150px;<br />
}<br />
}<br />
</style><br />
</head><br />
<body><br />
<!-- Exemplo de uso do componente --><br />
<div class="mw-tabber-container" data-tabber><br />
<ul class="mw-tabber-tabs"><br />
<li class="mw-tabber-tab active" data-tab="tab1">Aba 1</li><br />
<li class="mw-tabber-tab" data-tab="tab2">Aba 2</li><br />
<li class="mw-tabber-tab" data-tab="tab3">Aba 3</li><br />
</ul><br />
<div class="mw-tabber-content"><br />
<div class="mw-tabber-panel active" data-panel="tab1"><br />
<h3>Conteúdo da Aba 1</h3><br />
<p>Este é o conteúdo da primeira aba. Você pode adicionar qualquer HTML aqui.</p><br />
</div><br />
<div class="mw-tabber-panel" data-panel="tab2"><br />
<h3>Conteúdo da Aba 2</h3><br />
<p>Este é o conteúdo da segunda aba. A troca entre abas é instantânea!</p><br />
</div><br />
<div class="mw-tabber-panel" data-panel="tab3"><br />
<h3>Conteúdo da Aba 3</h3><br />
<p>Este é o conteúdo da terceira aba. O componente é totalmente responsivo.</p><br />
</div><br />
</div><br />
</div><br />
<br />
<script><br />
(function() {<br />
'use strict';<br />
<br />
// Inicializa todos os componentes de abas na página<br />
function initTabbers() {<br />
const tabbers = document.querySelectorAll('[data-tabber]');<br />
<br />
tabbers.forEach(function(tabber) {<br />
const tabs = tabber.querySelectorAll('.mw-tabber-tab');<br />
const panels = tabber.querySelectorAll('.mw-tabber-panel');<br />
<br />
tabs.forEach(function(tab) {<br />
tab.addEventListener('click', function() {<br />
const targetTab = this.getAttribute('data-tab');<br />
<br />
// Remove classe active de todas as abas<br />
tabs.forEach(function(t) {<br />
t.classList.remove('active');<br />
});<br />
<br />
// Remove classe active de todos os painéis<br />
panels.forEach(function(p) {<br />
p.classList.remove('active');<br />
});<br />
<br />
// Adiciona classe active na aba clicada<br />
this.classList.add('active');<br />
<br />
// Adiciona classe active no painel correspondente<br />
const targetPanel = tabber.querySelector('[data-panel="' + targetTab + '"]');<br />
if (targetPanel) {<br />
targetPanel.classList.add('active');<br />
}<br />
});<br />
});<br />
});<br />
}<br />
<br />
// Inicializa quando o DOM estiver pronto<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initTabbers);<br />
} else {<br />
initTabbers();<br />
}<br />
<br />
// Suporte para MediaWiki (quando o conteúdo é carregado dinamicamente)<br />
if (typeof mw !== 'undefined' && mw.hook) {<br />
mw.hook('wikipage.content').add(function() {<br />
initTabbers();<br />
});<br />
}<br />
})();<br />
</script><br />
</body><br />
</html><br />
<style><br />
/* Conserta o header das abas para um fundo fixo único e altura consistente */<br />
.mw-tabber-tabs {<br />
display: flex;<br />
flex-wrap: wrap;<br />
background-color: #eaecf0;<br />
border-bottom: 2px solid #a7d7f9;<br />
padding: 0;<br />
margin: 0;<br />
list-style: none;<br />
position: relative;<br />
min-height: 48px; /* Altura fixa para evitar 'tremida' */<br />
box-sizing: border-box;<br />
}<br />
<br />
/* Todas as abas: altura fixa e alinhamento centralizado */<br />
.mw-tabber-tab {<br />
flex: 1 1 auto;<br />
min-width: 100px;<br />
padding: 12px 20px;<br />
cursor: pointer;<br />
background-color: transparent;<br />
border: none;<br />
border-right: 1px solid #c8ccd1;<br />
text-align: center;<br />
font-size: 14px;<br />
font-weight: 500;<br />
color: #0645ad;<br />
transition: color 0.2s ease, background-color 0.2s;<br />
user-select: none;<br />
position: relative;<br />
height: 48px; /* Altura igual à do container do header */<br />
line-height: 24px;<br />
display: flex;<br />
align-items: center;<br />
justify-content: center;<br />
box-sizing: border-box;<br />
}<br />
<br />
.mw-tabber-tab:last-child {<br />
border-right: none;<br />
}<br />
<br />
/* Corrige background do header nas abas no hover/active para não sobrescrever o container */<br />
.mw-tabber-tab.active {<br />
background-color: transparent;<br />
color: #0645ad;<br />
border-bottom: 3px solid #0645ad;<br />
font-weight: 600;<br />
z-index: 2;<br />
}<br />
<br />
.mw-tabber-tab:hover:not(.active) {<br />
background-color: rgba(248,249,250, 0.4);<br />
color: #0b0080;<br />
}<br />
<br />
/* CONTEÚDO: Mantém altura fixa para evitar 'tremida' do layout principal */<br />
.mw-tabber-content {<br />
position: relative;<br />
padding: 20px;<br />
background-color: #ffffff;<br />
min-height: 200px;<br />
/* Mantém altura mínima e transição só no conteúdo */<br />
transition: opacity 0.24s;<br />
}<br />
<br />
/* Painéis: Transição suave para fade-in/fade-out, ocupa mesmo espaço sempre */<br />
.mw-tabber-panel {<br />
opacity: 0;<br />
pointer-events: none;<br />
position: absolute;<br />
left: 0; right: 0; top: 0; bottom: 0;<br />
width: 100%;<br />
transition: opacity 0.24s;<br />
z-index: 0;<br />
}<br />
<br />
.mw-tabber-panel.active {<br />
opacity: 1;<br />
pointer-events: auto;<br />
position: relative;<br />
z-index: 1;<br />
}<br />
<br />
/* Garante altura estável do conteúdo, mesmo com tamanhos distintos nos painéis */<br />
.mw-tabber-content {<br />
min-height: 200px;<br />
/* Você pode definir uma altura máxima se desejar */<br />
/* max-height: 400px; */<br />
overflow: auto;<br />
position: relative;<br />
/* isola contexto de painéis absolutos */<br />
}<br />
<br />
/* Para evitar "pulo" do conteúdo, força height igual a maior painel (opcional, ideal JS dinâmico) */<br />
</style></div>
GhoulBlack