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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(22 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
local p = {}
<noinclude>
Esta widget exibe requisitos em abas (Normal / Hard) de forma responsiva.


function p.render(frame)
=== Parâmetros ===
    -- pega parâmetros
{| class="wikitable"
    local args = frame:getParent().args
! Parâmetro !! Descrição !! Padrão
    local imagem  = args.imagem  or ""
|-
    local selo    = args.selo    or ""
| normal_nivel = Nível mínimo para o modo Normal || 140
    local tag      = args.tag      or "NOVO"
|-
    local titulo  = args.titulo  or "Título"
| normal_equip || Equipamento recomendado (Normal) || Set +8
    local subtitulo= args.subtitulo or "Capítulo"
|-
    local data    = args.data    or "Hoje"
| hard_personagem || Requisito de personagem (Hard) || personagem 4 ou 5 estrelas (Diamante)
    local botao    = args.botao    or "Ler agora"
|-
    local link    = args.link    or "#"
| 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)
|}


    -- constrói HTML
=== Exemplo de uso ===
    local html = mw.html.create("div")
<pre>
        :addClass("widget-capitulo")
{{#widget:Gb
        :css("background-image", "url(" .. mw.uri.encode(mw.title.makeTitle("File", imagem).fullUrl) .. ")")
| normal_nivel = 140
 
| normal_equip = Set +8
    -- barra superior
| hard_personagem = personagem 4 ou 5 estrelas (Diamante)
    local top = html:tag("div"):addClass("top-bar")
| hard_equip = Set +16
    if selo ~= "" then
}}
        top:tag("div"):addClass("chip"):wikitext(selo)
</pre>
     end
</noinclude><includeonly><html>
     if tag ~= "" then
<style>
        top:tag("div"):addClass("chip novo"):wikitext(tag)
.rtab-wrap{font-family:sans-serif;max-width:600px;margin:0 auto}
     end
.rtab-btns{display:flex;border-bottom:2px solid #a2a9b1;margin-bottom:0}
 
.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}
    -- gradiente
.rtab-btn:hover{color:#202122}
     html:tag("div"):addClass("gradient")
.rtab-btn.active{color:#202122;border-bottom-color:#3680b0}
 
.rtab-badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:bold}
     -- textos
.badge-n{background:#ddeeff;color:#185FA5}
     local text = html:tag("div"):addClass("text")
.badge-h{background:#fce8e8;color:#a32d2d}
    text:tag("div"):addClass("title"):wikitext(titulo)
.rtab-panel{display:none;padding:14px 2px}
     text:tag("div"):addClass("subtitle"):wikitext(subtitulo)
.rtab-panel.active{display:block}
     text:tag("div"):addClass("date"):wikitext(data)
.rtab-title{font-size:11px;font-weight:bold;color:#72777d;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
 
.rtab-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
    -- botão
.rtab-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#202122;line-height:1.5}
    html:tag("a")
.rtab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
        :addClass("button")
.dot-n{background:#3680b0}
        :attr("href", link)
.dot-h{background:#e24b4a}
        :wikitext(botao)
@media(max-width:480px){.rtab-btn{padding:8px 14px;font-size:13px}}
 
</style>
    return tostring(html)
<div class="rtab-wrap">
end
  <div class="rtab-btns">
 
    <button class="rtab-btn active" onclick="rtSwitch('n',this)">
return p
      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>
</html></includeonly>

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”