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

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Revertido
 
(18 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
<noinclude>
<html lang="pt-BR">
Esta widget exibe requisitos em abas (Normal / Hard) de forma responsiva.
<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 */
=== Parâmetros ===
        .mw-tabber-tabs {
{| class="wikitable"
            display: flex;
! Parâmetro !! Descrição !! Padrão
            flex-wrap: wrap;
|-
            background-color: #eaecf0;
| normal_nivel = Nível mínimo para o modo Normal || 140
            border-bottom: 2px solid #a7d7f9;
|-
            padding: 0;
| normal_equip || Equipamento recomendado (Normal) || Set +8
            margin: 0;
|-
            list-style: none;
| hard_personagem || Requisito de personagem (Hard) || personagem 4 ou 5 estrelas (Diamante)
        }
|-
| hard_equip || Equipamento recomendado (Hard) || Set +16
|-
| normal_extra || Linha extra de requisito Normal (opcional) || (vazio)
|-
| hard_extra || Linha extra de requisito Hard (opcional) || (vazio)
|}


        /* Estilo individual de cada aba */
=== Exemplo de uso ===
        .mw-tabber-tab {
<pre>
            flex: 1 1 auto;
{{#widget:Gb
            min-width: 100px;
| normal_nivel = 140
            padding: 12px 20px;
| normal_equip = Set +8
            cursor: pointer;
| hard_personagem = personagem 4 ou 5 estrelas (Diamante)
            background-color: #eaecf0;
| hard_equip = Set +16
            border: none;
}}
            border-right: 1px solid #c8ccd1;
</pre>
            text-align: center;
</noinclude><includeonly><html>
            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>
 
    <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>
<style>
<style>
/* Conserta o header das abas para um fundo fixo único e altura consistente */
.rtab-wrap{font-family:sans-serif;max-width:600px;margin:0 auto}
.mw-tabber-tabs {
.rtab-btns{display:flex;border-bottom:2px solid #a2a9b1;margin-bottom:0}
    display: flex;
.rtab-btn{padding:8px 22px;font-size:14px;font-weight:bold;color:#54595d;background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;display:flex;align-items:center;gap:6px}
    flex-wrap: wrap;
.rtab-btn:hover{color:#202122}
    background-color: #eaecf0;
.rtab-btn.active{color:#202122;border-bottom-color:#3680b0}
    border-bottom: 2px solid #a7d7f9;
.rtab-badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:bold}
    padding: 0;
.badge-n{background:#ddeeff;color:#185FA5}
    margin: 0;
.badge-h{background:#fce8e8;color:#a32d2d}
    list-style: none;
.rtab-panel{display:none;padding:14px 2px}
    position: relative;
.rtab-panel.active{display:block}
    min-height: 48px; /* Altura fixa para evitar 'tremida' */
.rtab-title{font-size:11px;font-weight:bold;color:#72777d;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
     box-sizing: border-box;
.rtab-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rtab-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#202122;line-height:1.5}
.rtab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.dot-n{background:#3680b0}
.dot-h{background:#e24b4a}
@media(max-width:480px){.rtab-btn{padding:8px 14px;font-size:13px}}
</style>
<div class="rtab-wrap">
  <div class="rtab-btns">
    <button class="rtab-btn active" onclick="rtSwitch('n',this)">
      Normal <span class="rtab-badge badge-n">Nível {{{normal_nivel|140}}}</span>
    </button>
    <button class="rtab-btn" onclick="rtSwitch('h',this)">
      Hard <span class="rtab-badge badge-h">{{{hard_equip|Set +16}}}</span>
    </button>
  </div>
  <div id="rtpanel-n" class="rtab-panel active">
    <div class="rtab-title">Requisitos — Normal</div>
    <ul class="rtab-list">
      <li><span class="rtab-dot dot-n"></span><span>Nível mínimo: <b>{{{normal_nivel|140}}}</b></span></li>
      <li><span class="rtab-dot dot-n"></span><span>Equipamento recomendado: <b>{{{normal_equip|Set +8}}}</b></span></li>
      {{{normal_extra|}}}
    </ul>
  </div>
  <div id="rtpanel-h" class="rtab-panel">
    <div class="rtab-title">Requisitos — Hard</div>
     <ul class="rtab-list">
      <li><span class="rtab-dot dot-h"></span><span>Recomendado utilizar um <b>{{{hard_personagem|personagem 4 ou 5 estrelas (Diamante)}}}</b></span></li>
      <li><span class="rtab-dot dot-h"></span><span>Equipamento recomendado: <b>{{{hard_equip|Set +16}}}</b></span></li>
      {{{hard_extra|}}}
    </ul>
  </div>
</div>
<script>
function rtSwitch(tab,btn){
  ['n','h'].forEach(function(t){
    document.getElementById('rtpanel-'+t).classList.remove('active');
  });
  document.querySelectorAll('.rtab-btn').forEach(function(b){b.classList.remove('active');});
  document.getElementById('rtpanel-'+tab).classList.add('active');
  btn.classList.add('active');
}
}
 
</script>
/* Todas as abas: altura fixa e alinhamento centralizado */
</html></includeonly>
.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 05h06min de 17 de março de 2026

Esta widget exibe requisitos em abas (Normal / Hard) de forma responsiva.

Parâmetros

Parâmetro Descrição Padrão
normal_nivel = Nível mínimo para o modo Normal 140
normal_equip Equipamento recomendado (Normal) Set +8
hard_personagem Requisito de personagem (Hard) personagem 4 ou 5 estrelas (Diamante)
hard_equip Equipamento recomendado (Hard) Set +16
normal_extra Linha extra de requisito Normal (opcional) (vazio)
hard_extra Linha extra de requisito Hard (opcional) (vazio)

Exemplo de uso

{{#widget:Gb
 | normal_nivel = 140
 | normal_equip = Set +8
 | hard_personagem = personagem 4 ou 5 estrelas (Diamante)
 | hard_equip = Set +16
}}
Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Gb&oldid=45067”