FANDOM


Las infoboxes portátiles incluyen una gran variedad de etiquetas y opciones que puedes utilizar para hacer que el 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 ayudar a identificar lo que necesitas utilizar, y como darle un arreglo con CSS (vea además Ayuda:Infoboxes/CSS). Nota que las funciones parser pueden ser utilizadas.

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

Etiquetas básicas

infobox

Attributes
  • theme
  • theme-source
  • layout
  • accent-color-source
  • accent-color-text-source
  • accent-color-default
  • accent-color-text-default
Child tags
  • title
  • image
  • header
  • navigation
  • data
  • group

La etiqueta que contiene a todos los demás y delimita el alcance de la infobox.

Input Output
<infobox>
	<title source="title_source" />
</infobox>
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
	<h2 class="pi-item pi-item-spacing pi-title">Title</h2>
</aside>

title

Attributes
  • source
Child tags
  • default
  • format

Muestra el título de la infobox. Las imágenes utilizadas en las etiquetas title no aparecen en móvil[2].

Input Output
<title source="title_source">
	<default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>

data

Attributes
  • source
  • span
  • layout
Child tags
  • default
  • label
  • format

Etiqueta estándar de valor dominante.

Input Output
<data source="name">
	<label>First name</label>
	<default>John</default>
</data>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">First name</h3>
	<div class="pi-font pi-data-value">John</div>
</div>

Modificadores de salida

label

Attributes None
Child tags None

La etiqueta Label sólo se puede ser utilizada dentro de otras etiquetas, compruebe la columna de etiquetas child para obtener más información. Acepta wikitexto.

Input Output
<label>First name</label>
<h3 class="pi-secondary-font pi-data-label">First name</h3>

default

Attributes None
Child tags None

La etiqueta Default, que muestra texto cuando hay data, sólo puede ser utilizada dentro de otras etiquetas, compruebe la columna de etiquetas child para obtener más información. Acepta wikitexto.

Input Output
<default>John</default>
<div class="pi-font pi-data-value">John</div>

format

Attributes None
Child tags None

La etiqueta Format sólo puede ser utilizada dentro de otras etiquetas, compruebe la columna de etiquetas child para obtener más información. Acepta wikitexto.

Input Output
<data source="dollars">
	<label>Regular price</label>
	<format>${{{dollars}}}</format>
</data>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Regular price</h3>
	<div class="pi-font pi-data-value">$15</div>
</div>

Etiquetas de imagen

image

Attributes
  • source
Child tags
  • alt
  • caption
  • default

La etiqueta Image es utilizada para colocar imágenes o vídeo dentro de una infobox. Sólo puede ser estilizada utilizando el CSS de la comunidad. Se pueden colocar múltiples imágenes utilizando una etiqueta de galería.

Aquí, la etiqueta default es utilizada para especificar que una imagen sea utilizada cuando no se ha escogido ninguna imagen elegida en un artículo. Por ejemplo, <default>Example.jpg</default>

Input Output
<image source="image" />
<figure class="pi-item pi-image">
	<a href=".../File:Image.jpg" class="image image-thumbnail" title="">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

alt

Attributes
  • source
Child tags
  • default

Puede ser solamente utilizado dentro de una etiqueta de imagen.

Input Output
<image source="image">
	<alt source="alternative_title">
		<default>Default alt text</default>
	</alt>
</image>
<figure class="pi-item pi-image">
	<a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

caption

Attributes
  • source
Child tags
  • default
  • format

Puede ser solamente utilizado dentro de una etiqueta de imagen.

Input Output
<image source="image">
	<caption source="caption">
		<default>My caption</default>
	</caption>
</image>
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

Otras etiquetas

Group

Attributes
  • layout
  • show
  • collapse
  • row-items
Child tags
  • data
  • header
  • image
  • title
  • navigation

Se utiliza para agrupar los campos, puede proporcionar encabezado para cada grupo. El grupo no se renderizará (incluyendo el encabezado), cuando todos los campos estén vacíos. Sin embargo, si se usa el atributo show = incomplete", se renderizarán todos los campos del grupo si al menos un campo no está vacío.

Grupo por defecto

Input Output
<group>
	<header>Group name</header>
	<data source="value1" />
</group>
<section class="pi-item pi-group pi-border-color">
	<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Group name</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value">Data value</div>
	</div>
</section>

Grupo horizontal

Input Output
<group layout="horizontal">
	<header>Group name</header>
	<data source="value1">
		<label>Data label</label>
	</data>
</group>
<section class="pi-item pi-group pi-border-color">
	<table class="pi-horizontal-group">
		<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Group name</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Data label</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Data value</td>
			</tr>
		</tbody>
	</table>
</section>

Grupo inteligente

Input Output
<group row-items="3">
    <header>Section Header</header>
    <data source="row3">
      <label>Label</label>
    </data>
    <data source="row4">
      <label>Label</label>
    </data>
    <data source="row5">
      <label>Label</label>
    </data>
    <data source="row6">
      <label>Label</label>
    </data>
    <data source="row7">
      <label>Label</label>
    </data>
    <data source="row8" layout="default">
      <label>Label</label>
    </data>
    <data source="row9" layout="default">
      <label>Label</label>
    </data>
  </group>
<section class="pi-item pi-group pi-border-color"><h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Section Header</h2>
<section class="pi-item pi-smart-group pi-border-color">
 
        <section class="pi-smart-group-head">
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
        </section>
 
    <section class="pi-smart-group-body">
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">CCC</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">DDD</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">EEE</div>
 
    </section>
</section>
<section class="pi-item pi-smart-group pi-border-color">
 
        <section class="pi-smart-group-head">
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
 
        </section>
 
    <section class="pi-smart-group-body">
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">FFF</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">GGG</div>
 
    </section>
</section>
 
<div class="pi-item pi-data pi-item-spacing pi-border-color">
 
		<h3 class="pi-data-label pi-secondary-font">Label</h3>
 
	<div class="pi-data-value pi-font">HHH</div>
</div>
 
<div class="pi-item pi-data pi-item-spacing pi-border-color">
 
		<h3 class="pi-data-label pi-secondary-font">Label</h3>
 
	<div class="pi-data-value pi-font">III</div>
</div>
</section>

header

Attributes None
Child tags None

La etiqueta de encabezado denota el comienzo de una sección o grupo de etiquetas.

Input Output
<header>Header Text</header>
Default group
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2>
Horizontal group
<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Header Text</caption>

navigation

Attributes None
Child tags None

Se utiliza para proporcionar cualquier wikitexto.

Input Output
<navigation>[[Link]]</navigation>
<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
	<a href="/wiki/Link" title="Link">Link</a>
</nav>

Referencias

  1. Wikibooks xml introduction
  2. Horas de oficina del hub de portabilidad, 2015-11-26