Mudanças entre as edições de "Widget:Gb"

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Reversão manual
 
(7 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
  <widget>
<html lang="pt-BR">
  <div style="background:#21223a; border-radius:10px; padding:15px; width:350px; color:#f1e9d3; font-family:sans-serif;">
<head>
    <div style="display:flex; align-items:center; margin-bottom:10px;">
    <meta charset="UTF-8">
      <div style="width:60px; height:60px; border-radius:8px; overflow:hidden; background:#252736; margin-right:10px;">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <img src="{{{imagem|https://via.placeholder.com/60}}}" alt="Imagem da criatura" style="width:60px; height:60px;">
    <title>Componente de Abas - MediaWiki</title>
      </div>
    <style>
      <div>
        /* Container principal responsivo */
         <div style="font-size:1.3em; font-weight:bold; color:#f7de72;">{{{nome|Criatura}}}</div>
        .mw-tabber-container {
         <div style="font-size:1em; color:#b0b0b0;">{{{tipo|Tipo desconhecido}}}</div>
            width: 100%;
        <div style="font-size:0.94em; color:#67b06a; margin-top:2px;">{{{habitat|Habitat desconhecido}}}</div>
            max-width: 100%;
        <div style="font-size:0.97em; color:#e55a5a;">Perigo: {{{perigo|?}}}</div>
            margin: 20px 0;
      </div>
            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>
    <!-- Exemplo de uso do componente -->
    <div class="mw-tabber-container" data-tabber>
         <ul class="mw-tabber-tabs">
            <li class="mw-tabber-tab active" data-tab="tab1">Aba 1</li>
            <li class="mw-tabber-tab" data-tab="tab2">Aba 2</li>
            <li class="mw-tabber-tab" data-tab="tab3">Aba 3</li>
        </ul>
         <div class="mw-tabber-content">
            <div class="mw-tabber-panel active" data-panel="tab1">
                <h3>Conteúdo da Aba 1</h3>
                <p>Este é o conteúdo da primeira aba. Você pode adicionar qualquer HTML aqui.</p>
            </div>
            <div class="mw-tabber-panel" data-panel="tab2">
                <h3>Conteúdo da Aba 2</h3>
                <p>Este é o conteúdo da segunda aba. A troca entre abas é instantânea!</p>
            </div>
            <div class="mw-tabber-panel" data-panel="tab3">
                <h3>Conteúdo da Aba 3</h3>
                <p>Este é o conteúdo da terceira aba. O componente é totalmente responsivo.</p>
            </div>
        </div>
     </div>
     </div>
 
     <div style="margin-top:10px;">
     <script>
      <div style="background:#171821; border-radius:8px; padding:8px 10px; margin-bottom:6px;">
        (function() {
        <span style="font-weight:bold; color:#f7de72;">Drops</span><br />
            'use strict';
        <span style="font-size:0.98em;">{{{drops|Sem drops.}}}</span>
 
      </div>
            // Inicializa todos os componentes de abas na página
    </div>
            function initTabbers() {
  </div>
                const tabbers = document.querySelectorAll('[data-tabber]');
  </widget>
               
 
                tabbers.forEach(function(tabber) {
  ----
                    const tabs = tabber.querySelectorAll('.mw-tabber-tab');
 
                    const panels = tabber.querySelectorAll('.mw-tabber-panel');
  ==Predefinição:Bestiario==
 
  <pre>
                    tabs.forEach(function(tab) {
  {{#invoke:Widget|render|Gb
                        tab.addEventListener('click', function() {
  |nome={{{nome|}}}
                            const targetTab = this.getAttribute('data-tab');
  |imagem={{{imagem|}}}
                           
  |tipo={{{tipo|}}}
                            // Remove classe active de todas as abas
  |habitat={{{habitat|}}}
                            tabs.forEach(function(t) {
  |perigo={{{perigo|}}}
                                t.classList.remove('active');
  |drops={{{drops|}}}
                            });
  }}
                           
  </pre>
                            // 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>
<style>
/* Conserta o header das abas para um fundo fixo único e altura consistente */
.mw-tabber-tabs {
    display: flex;
    flex-wrap: wrap;
    background-color: #eaecf0;
    border-bottom: 2px solid #a7d7f9;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    min-height: 48px; /* Altura fixa para evitar 'tremida' */
    box-sizing: border-box;
}
 
/* Todas as abas: altura fixa e alinhamento centralizado */
.mw-tabber-tab {
    flex: 1 1 auto;
    min-width: 100px;
    padding: 12px 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-right: 1px solid #c8ccd1;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #0645ad;
    transition: color 0.2s ease, background-color 0.2s;
    user-select: none;
    position: relative;
    height: 48px; /* Altura igual à do container do header */
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
 
.mw-tabber-tab:last-child {
    border-right: none;
}
 
/* Corrige background do header nas abas no hover/active para não sobrescrever o container */
.mw-tabber-tab.active {
    background-color: transparent;
    color: #0645ad;
    border-bottom: 3px solid #0645ad;
    font-weight: 600;
    z-index: 2;
}
 
.mw-tabber-tab:hover:not(.active) {
    background-color: rgba(248,249,250, 0.4);
    color: #0b0080;
}
 
/* CONTEÚDO: Mantém altura fixa para evitar 'tremida' do layout principal */
.mw-tabber-content {
    position: relative;
    padding: 20px;
    background-color: #ffffff;
    min-height: 200px;
    /* Mantém altura mínima e transição só no conteúdo */
    transition: opacity 0.24s;
}
 
/* Painéis: Transição suave para fade-in/fade-out, ocupa mesmo espaço sempre */
.mw-tabber-panel {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%;
    transition: opacity 0.24s;
    z-index: 0;
}
 
.mw-tabber-panel.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
 
/* Garante altura estável do conteúdo, mesmo com tamanhos distintos nos painéis */
.mw-tabber-content {
    min-height: 200px;
    /* Você pode definir uma altura máxima se desejar */
    /* max-height: 400px; */
    overflow: auto;
    position: relative;
    /* isola contexto de painéis absolutos */
}
 
/* Para evitar "pulo" do conteúdo, força height igual a maior painel (opcional, ideal JS dinâmico) */
</style>

Edição atual tal como às 06h23min de 16 de novembro de 2025

 <widget>

       <img src="https://via.placeholder.com/60" alt="Imagem da criatura" style="width:60px; height:60px;">
Criatura
Tipo desconhecido
Habitat desconhecido
Perigo: ?
       Drops

       Sem drops.

 </widget>
 
 ----
 
 ==Predefinição:Bestiario==

  {{#invoke:Widget|render|Gb
  |nome={{{nome|}}}
  |imagem={{{imagem|}}}
  |tipo={{{tipo|}}}
  |habitat={{{habitat|}}}
  |perigo={{{perigo|}}}
  |drops={{{drops|}}}
  }}
Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Gb&oldid=40643”