Ayuda:Infoboxes/Etiquetas

< Ayuda:Infoboxes

Las infoboxes portátiles incluyen una gran variedad de etiquetas y opciones que puedes utilizar para hacer que la infobox se muestre como desees. A continuación tenemos una lista de las etiquetas estándar con un ejemplo de wikitexto y salida HTML, para ayudarte a identificar lo que necesites utilizar, y como darle un arreglo con CSS (véase también Ayuda:Infoboxes/CSS). Nótese que las funciones parser también pueden ser usadas.

Todos los campos de una infobox deben ser declarados utilizando la convención XML, con atributos usados para configuración de campos.

infobox

La etiqueta <infobox> contiene a todas las demás y delimita el alcance de la infobox.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
Ninguna
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <panel>

Atributos

theme
El nombre del tema a aplicar. Añade una clase a la infobox de la forma .pi-theme-$1, con espacios transformados en guiones (-). No sobreescribe theme-source ni type.
theme-source
El nombre del parámetro a usar como tema. Añade una clase a la infobox de la forma .pi-theme-$1, con espacios transformados en guiones (-). No sobreescribe theme ni type.
type
El nombre de la clase a aplicar. Añade una clase a la infobox de la forma .type-$1, con espacios transformados en guiones (-). No sobreescribe theme ni theme-source.
accent-color-source
El nombre del parámetro a usar como un color predominante.
accent-color-default
El color predominante predeterminado. Acepta un código hexadecimal de 3 o 6 dígitos; por ejemplo, #f00 o #ff0000.
accent-color-text-source
El nombre del parámetro a usar como un color predominante de texto.
accent-color-text-default
El color predominante de texto predeterminado. Acepta un código hexadecimal de 3 o 6 dígitos; por ejemplo, #f00 o #ff0000.
layout
Valores posibles: default, stacked. Define la distribución de la infobox, es decir, si es tabular o agrupada.
name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Entrada
<infobox>
    <title source="título" />
</infobox>
Salida
<aside class="portable-infobox pi-background pi-border-color pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="título">Título</h2>
</aside>

title

La etiqueta <title> define el título de la infobox. Las imágenes usadas en etiquetas <title> no aparecen en móvil.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <infobox>
  • <group>
  • <section>
  • <default>
  • <format>

Atributos

source
EL nombre del parámetro a usar.
name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Entrada
<title source="título">
    <default>{{PAGENAME}}</default>
</title>
Salida
<h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="título">Nombre de la página</h2>

data

La etiqueta <data> es la etiqueta de clave-valor estándar.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <infobox>
  • <group>
  • <section>
  • <default>
  • <label>
  • <format>

Atributos

source
El nombre del parámetro a usar.
span
El número de columnas a abarcar. Solo disponible en grupos inteligentes.
layout
Valores posibles: default. Solo disponible en grupos inteligentes.
name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Entrada
<data source="nombre">
    <label>Primer nombre</label>
    <default>John</default>
</data>
Salida
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="nombre">
    <h3 class="pi-data-label pi-secondary-font">Primer nombre</h3>
    <div class="pi-data-value pi-font">John</div>
</div>

label

La etiqueta <label> define el etiquetado de un campo, y solo puede ser usada dentro de otras etiquetas, véase la columna de etiquetas hijas para más información. Acepta wikitexto.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <data>
  • <section>
 Ninguna

Atributos

Ninguno.

Salida HTML

Entrada
<label>Primer nombre</label>
Salida
<h3 class="pi-data-label pi-secondary-font">Primer nombre</h3>

default

La etiqueta <default> se usa cuando no se especifican los datos de "source", y solo puede ser usada dentro de otras etiquetas, véase la columna de etiquetas hijas para más información. Acepta wikitexto.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <title>
  • <image>
  • <data>
  • <alt>
  • <caption>
 Ninguna

Atributos

Ninguno.

Salida HTML

Entrada
<default>John</default>
Salida
<div class="pi-data-value pi-font">John</div>

format

La etiqueta <format> permite utilizar wikitexto como definición de otras etiquetas, y solo puede ser usada dentro de otras etiquetas, véase la columna de etiquetas hijas para más información. Acepta wikitexto.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <title>
  • <data>
  • <caption>
 Ninguna

Atributos

Ninguno.

Salida HTML

Entrada
<data source="dólares">
    <label>Precio en dólares</label>
    <format>${{{dólares}}}</format>
</data>
Salida
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dólares">
    <h3 class="pi-data-label pi-secondary-font">Precio en dólares</h3>
    <div class="pi-data-value pi-font">$15</div>
</div>

image

La etiqueta <image> se usa para insertar imágenes o videos dentro de una infobox. Solo puede recibir diseño a través del CSS del la comunidad, y no puede modificarse manualmente su tamaño. Las imágenes se normalizan, de modo que [[Archivo:Ejemplo.png]] y Ejemplo.jpg hacen lo mismo. Puedes colocar varias imágenes usando una etiqueta <gallery>.

Aquí, la etiqueta <default> se usa para especificar que se use una imagen cuando no se ha elegido una imagen en un artículo. Por ejemplo, <default>Ejemplo.png</default>.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <infobox>
  • <group>
  • <section>
  • <alt>
  • <caption>
  • <format>

Atributos

source
El nombre del parámetro a usar.
name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Entrada
<image source="imagen" />
Salida
<figure class="pi-item pi-image" data-source="imagen">
    <a class="image image-thumbnail" href=".../Ejemplo.png/revision/latest/..." title="">
        <img class="pi-image-thumbnail" src="...Ejemplo.png..." srcset="...Ejemplo.png... 2x" alt="" data-image-key="Ejemplo.png" data-image-name="Ejemplo.png" width="" height="">
    </a>
</figure>

alt

La etiqueta <alt> define texto alternativo y solo puede ser usada dentro de la etiqueta <image>.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <image>
  • <default>

Atributos

source
El nombre del parámetro a usar.

Salida HTML

Entrada
<image source="imagen">
    <alt source="texto_alterno">
        <default>Texto alterno predeterminado</default>
    </alt>
</image>
Salida
<figure class="pi-item pi-image" data-source="imagen">
    <a class="image image-thumbnail" href=".../Ejemplo.png/revision/latest/..." title="Texto alterno predeterminado">
        <img class="pi-image-thumbnail" src="...Ejemplo.png..." srcset="...Ejemplo.png... 2x" alt="Texto alterno predeterminado" data-image-key="Ejemplo.png" data-image-name="Ejemplo.png" width="" height="">
    </a>
</figure>

caption

La etiqueta <caption> define un subtítulo y solo puede ser usada dentro de la etiqueta <image>.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <image>
  • <default>
  • <format>

Atributos

source
El nombre del parámetro a usar

Salida HTML

Entrada
<image source="imagen">
    <caption source="subtítulo">
        <default>Mi subtítulo</default>
    </caption>
</image>
Salida en escritorio
<figcaption class="pi-item-spacing pi-caption">Mi subtítulo</figcaption>
Salida en móvil

No hay salida. La etiqueta de subtítulo es ignorada y no aparece en navegadores móviles.

group

La etiqueta <group> se usa para agrupar campos, y opcionalmente acepta un encabezado por cada grupo. Un grupo no se mostrará (incluyendo cualquier encabezado) si todos los campos están vacíos. Sin embargo, si el atributo show es definido en incomplete, mostrará todos los campos del grupo si al menos un campo no está vacío.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <infobox>
  • <group>
  • <section>
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <panel>

Atributos

layout
Valores posibles: default, horizontal. Define si es de diseño vertical u horizontal.
show
Valores posibles: default, incomplete. Define si los contenidos se mostrarán si hay campos no definidos o no, si al menos hay un campo definido.
collapse
Valores posibles: open, closed. Solo disponible si la primera etiqueta hija del grupo es una etiqueta <header>. Define si el encabezado permite expandir o contraer el contenido.
row-items
Vuelve el grupo en un grupo inteligente abarcando n columnas. Los grupos inteligentes ordenan sus celdas (etiquetas <data>) horizontalmente, y automáticamente pasan a una nueva fila una vez que la actual supera ese límite. Las celdas se estiran para ocupar el mayor espacio posible en la última fila.
name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Grupo predeterminado

Entrada
<group>
    <header>Nombre de grupo</header>
    <data source="valor1" />
</group>
Salida
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Nombre de grupo</h2>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="valor1">
        <div class="pi-data-value pi-font">Valor de datos</div>
    </div>
</section>

Grupo horizontal

Entrada
<group layout="horizontal">
    <header>Nombre de grupo</header>
    <data source="valor1">
        <label>Etiquetado 1</label>
    </data>
</group>
Salida
<section class="pi-item pi-group pi-border-color">
    <table class="pi-horizontal-group">
        <caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Nombre de grupo</caption>
        <thead>
            <tr>
                <th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing" data-source="valor1">Etiquetado 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing" data-source="valor1">Valor de datos</td>
            </tr>
        </tbody>
    </table>
</section>

Grupo inteligente

Entrada
<group row-items="3">
    <header>Encabezado de sección</header>
    <data source="valor1">
        <label>Etiquetado 1</label>
    </data>
    <data source="valor2">
        <label>Etiquetado 2</label>
    </data>
    <data source="valor3">
        <label>Etiquetado 3</label>
    </data>
    <data source="valor4" layout="default">
        <label>Etiquetado 4</label>
    </data>
    <data source="valor5">
        <label>Etiquetado 5</label>
    </data>
    <data source="valor6">
        <label>Etiquetado 6</label>
    </data>
</group>
Salida
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Encabezado de sección</h2>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head pi-border-color">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="valor1">Etiquetado 1</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="valor2">Etiquetado 2</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="valor3">Etiquetado 3</h3>
        </section>
        <section class="pi-smart-group-body pi-border-color">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="valor1">AAA</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="valor2">BBB</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="valor3">CCC</div>
        </section>
    </section>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="valor4">
        <h3 class="pi-data-label pi-secondary-font">Etiquetado 4</h3>
        <div class="pi-data-value pi-font">DDD</div>
    </div>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head pi-border-color">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="valor5">Etiquetado 5</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="valor6">Etiquetado 6</h3>
        </section>
        <section class="pi-smart-group-body pi-border-color">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="valor5">EEE</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="valor6">FFF</div>
        </section>
    </section>
</section>

header

La etiqueta <header> indica el inicio de una sección o grupo de etiquetas.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <infobox>
  • <group>
  • <panel>
  • <section>
 Ninguna

Atributos

name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Entrada
<header>Texto de encabezado</header>
Salida de grupo predeterminada
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Texto de encabezado</h2>
Salida de grupo horizontal
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Texto de encabezado</caption>

navigation

La etiqueta <navigation> se usa para proveer cualquier wikitexto.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
Ninguna

Atributos

name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Entrada
<navigation>[[Enlace]]</navigation>
Salida
<nav class="pi-navigation pi-item-spacing pi-secondary-font">
    <a href="/wiki/Enlace" title="Enlace">Enlace</a>
</nav>

panel

La etiqueta <panel> se usa para crear interfaces con pestañas, donde el contenido de cada pestaña está agrupado en una etiqueta <section>.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <infobox>
  • <group>
  • <header>
  • <section>

Atributos

name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Entrada
<panel>
    <section>
        <label>A</label>
        <data source="uno" />
        <data source="dos" />
    </section>
    <section>
        <label>B</label>
        <data source="tres" />
        <data source="cuatro" />
    </section>
</panel>
Salida
<section class="pi-item pi-panel pi-border-color wds-tabber">
    <div class="wds-tabs__wrapper">
        <div class="wds-tabs__arrow-left" />
        <ul class="wds-tabs">
            <li class="wds-tabs__tab wds-is-current">
                <div class="wds-tabs__tab-label">A</div>
            </li>
            <li class="wds-tabs__tab">
                <div class="wds-tabs__tab-label">B</div>
            </li>
        </ul>
        <div class="wds-tabs__arrow-right" />
    </div>
    <div class="wds-tab__content wds-is-current">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="uno">
            <div class="pi-data-value pi-font">Uno</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dos">
            <div class="pi-data-value pi-font">Dos</div>
        </div>
    </div>
    <div class="wds-tab__content">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="tres">
            <div class="pi-data-value pi-font">Tres</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="cuatro">
            <div class="pi-data-value pi-font">Cuatro</div>
        </div>
    </div>
</section>

section

La etiqueta <section> representa los contenidos de una pestaña. El botón de alternado presionable se representa con una etiqueta <label>. Los etiquetados tienen por defecto su índice basado en cero si se omiten; si todas las pestañas dentro de un panel no tienen etiquetados, entonces se apilan verticalmente.

Etiquetas válidas

Etiquetas padres Etiquetas hijas
  • <panel>
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <label>

Atributos

name
Nombre interno para el elemento y sus hijos. Asignado al atributo data-item-name en el HTML resultante.

Salida HTML

Entrada
<section>
    <label>A</label>
    <data source="uno" />
    <data source="dos" />
</section>
Salida
<div class="wds-tab__content">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="uno">
        <div class="pi-data-value pi-font">Uno</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dos">
        <div class="pi-data-value pi-font">Dos</div>
    </div>
</div>

Véase también

Ayuda y comentarios