Widget:Gb
Revisão de 20h31min de 15 de novembro de 2025 por GhoulBlack (discussão | contribs)
<!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 - MediaWiki</title>
<style>
/* Container principal responsivo */
.mw-tabber-container {
width: 100%;
max-width: 100%;
margin: 20px 0;
border: 1px solid #a7d7f9;
border-radius: 4px;
background-color: #f8f9fa;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Container das abas */
.mw-tabber-tabs {
display: flex;
flex-wrap: wrap;
background-color: #eaecf0;
border-bottom: 2px solid #a7d7f9;
padding: 0;
margin: 0;
list-style: none;
}
/* Estilo individual de cada aba */
.mw-tabber-tab {
flex: 1 1 auto;
min-width: 100px;
padding: 12px 20px;
cursor: pointer;
background-color: #eaecf0;
border: none;
border-right: 1px solid #c8ccd1;
text-align: center;
font-size: 14px;
font-weight: 500;
color: #0645ad;
transition: all 0.2s ease;
user-select: none;
position: relative;
}
.mw-tabber-tab:last-child {
border-right: none;
}
/* Hover nas abas */
.mw-tabber-tab:hover {
background-color: #f8f9fa;
color: #0b0080;
}
/* Aba ativa */
.mw-tabber-tab.active {
background-color: #ffffff;
color: #0645ad;
border-bottom: 3px solid #0645ad;
font-weight: 600;
}
/* Container do conteúdo */
.mw-tabber-content {
padding: 20px;
background-color: #ffffff;
min-height: 200px;
}
/* Painel de conteúdo individual */
.mw-tabber-panel {
display: none;
animation: fadeIn 0.3s ease;
}
.mw-tabber-panel.active {
display: block;
}
/* Animação de fade in */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsividade para tablets */
@media (max-width: 768px) {
.mw-tabber-tabs {
flex-direction: column;
}
.mw-tabber-tab {
border-right: none;
border-bottom: 1px solid #c8ccd1;
width: 100%;
}
.mw-tabber-tab.active {
border-bottom: 3px solid #0645ad;
border-right: none;
}
.mw-tabber-content {
padding: 15px;
}
}
/* Responsividade para mobile */
@media (max-width: 480px) {
.mw-tabber-tab {
padding: 10px 15px;
font-size: 13px;
}
.mw-tabber-content {
padding: 12px;
min-height: 150px;
}
}
</style>
</head> <body>
- Aba 1
- Aba 2
- Aba 3
Conteúdo da Aba 1
Este é o conteúdo da primeira aba. Você pode adicionar qualquer HTML aqui.
Conteúdo da Aba 2
Este é o conteúdo da segunda aba. A troca entre abas é instantânea!
Conteúdo da Aba 3
Este é o conteúdo da terceira aba. O componente é totalmente responsivo.
<script>
(function() {
'use strict';
// Inicializa todos os componentes de abas na página
function initTabbers() {
const tabbers = document.querySelectorAll('[data-tabber]');
tabbers.forEach(function(tabber) {
const tabs = tabber.querySelectorAll('.mw-tabber-tab');
const panels = tabber.querySelectorAll('.mw-tabber-panel');
tabs.forEach(function(tab) {
tab.addEventListener('click', function() {
const targetTab = this.getAttribute('data-tab');
// Remove classe active de todas as abas
tabs.forEach(function(t) {
t.classList.remove('active');
});
// Remove classe active de todos os painéis
panels.forEach(function(p) {
p.classList.remove('active');
});
// Adiciona classe active na aba clicada
this.classList.add('active');
// Adiciona classe active no painel correspondente
const targetPanel = tabber.querySelector('[data-panel="' + targetTab + '"]');
if (targetPanel) {
targetPanel.classList.add('active');
}
});
});
});
}
// Inicializa quando o DOM estiver pronto
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTabbers);
} else {
initTabbers();
}
// Suporte para MediaWiki (quando o conteúdo é carregado dinamicamente)
if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(function() {
initTabbers();
});
}
})();
</script>
</body> </html>