Plantilla:Stack

De Wikipedia, la enciclopedia libre
Icono de documentación de plantilla Documentación de la plantilla[ver] [editar] [historial] [purgar]


NOTA: Esta plantilla sirve como documentación compartida para {{Stack}}, {{Stack begin}} y {{Stack end}}

Esta plantilla se puede utilizar para apilar ("stack") imágenes y otro contenido flotante, como plantillas de cuadro de información, sin causar problemas con el espaciado y la flotación. Se debe facilitar una cadena de imágenes/plantillas como primer parámetro para que se apilen sin generar situaciones indeseables como elementos flotantes o errores de espaciado. Se pueden apilar muchos objetos desde la parte superior de una sección y no forzar el espaciado de otras subsecciones.

Uso

En su forma más simple: 

{{stack|<objects>}}

Alternativamente, usando {{stack begin}} y {{stack end}}: 

{{stack begin}}
<objetos>
{{stack end}}

Los <objetos> pueden ser simplemente una cadena de wikicódigo con varias imágenes/plantillas.

Parámetros opcionales

{{stack| <object(s)> | float=left or right | clear=true or false | margin=true or false}}

o 

{{stack begin | float=left or right | clear=true or false | margin=true or false}}

donde

  • float= left o right (por defecto es right)
    Esta opción se puede usar para hacer flotar la pila a la izquierda o a la derecha de la página.
  • clear= true o false (por defecto es false)
    Esta opción se puede usar para forzar la pila hacia el extremo izquierdo o derecho (por ejemplo, cerca de una ficha).
  • margin= true o false (por defecto es false)
    Esta opción se puede usar para agregar un margen de 1em a la izquierda (para flotar a la derecha) o a la derecha (para flotar a la izquierda).

También se pueden enumerar explícitamente varios argumentos: 

{{stack| float=left o right | clear=true o false | margin=true o false
|1=<objeto(s)>
|2=<objeto(s)>, etc. hasta 9 parámetros en la versión actual
}}
  • Esta versión de múltiples argumentos incluye espacios en blanco verticales adicionales entre cada (conjunto de) <objeto(s)>.

Ejemplos

Para ilustrar la utilidad de las plantillas de apilado ("stack"), considérese la siguiente situación. Se desea tener dos imágenes flotantes a la derecha en la parte superior de la primera sección de un artículo (aquí, la sección "Lipsum"), y una imagen flotante a la izquierda en la parte superior de la segunda sección (aquí, la sección "Lorem"). Para lograr este diseño, sin usar una plantilla de stack, se podría probar el siguiente código:
=====''Lipsum''=====
[[File:Simple shapes example.png|thumb|right|Ejemplo 1a]]
[[File:Simple shapes example.png|thumb|right|Ejemplo 1b]]
... texto ...

=====''Lorem''=====
[[File:Simple shapes example.png|thumb|left|Ejemplo 1c]]
... texto ...

=====''Ipsum''=====
... texto ...
El resultado de este código se muestra más adelante en la sección sin stack. Observese cómo se evita que la imagen flotante izquierda (Ejemplo 1c) flote sobre la última imagen flotante derecha (Ejemplo 1b). Es posible que se deba cambiar el tamaño del ancho de su navegador para apreciar completamente el problema. Para solucionar este problema, se pueden apilar las dos imágenes flotantes de la derecha juntas, usando el siguiente código:
=====''Lipsum''=====
{{stack |[[File:Simple shapes example.png|thumb|right|Ejemplo 2a]] [[File:Simple shapes example.png|thumb|right|Ejemplo 2b]]}}
... texto ...

=====''Lorem''=====
[[File:Simple shapes example.png|thumb|left|Ejemplo 2c]]
... texto ...

=====''Ipsum''=====
... texto ...
El resultado se muestra más abajo en la sección con stack. Observe cómo al agregar la plantilla de apilado, la imagen flotante de la izquierda (Ejemplo 2c) ahora puede flotar más arriba y no se le impide flotar más arriba que la parte superior de la última imagen flotante de la derecha (Ejemplo 2b).

Sin {{stack}}

Lipsum
Ejemplo 1a
Ejemplo 1b
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut
Lorem
Ejemplo 1c
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
Ipsum
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»

Con {{stack}}

Lipsum
Ejemplo 2a
Ejemplo 2b
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut
Lorem
Ejemplo 2c
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
Ipsum
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»

Con {{stack begin}} y {{stack end}}

Lipsum con la segunda tabla más ancha
Tabla 1 de muestra
Ejemplo 1a
Ejemplo 1b
Tabla 2 de muestra más ancha
Ejemplo 2a
Ejemplo 2b
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
Lorem
Tabla 3 de muestra
Ejemplo 3a
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
Ipsum
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
Lipsum con la primera tabla más ancha
Tabla 1 de muestra más ancha
Ejemplo 1a
Ejemplo 1b
Tabla 2 de muestra
Ejemplo 2a
Ejemplo 2b
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
Lorem
Tabla 3 de muestra
Ejemplo 3a
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
Ipsum
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»
  • «Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»
  • «Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.»

Más ejemplos

{{Stack}} también se puede usar para hacer flotar una o más imágenes en una página. 

{{stack|[[File:Simple shapes example.png|80px]]}}
{{stack|[[File:Simple shapes example.png|120px]]}}

Puede requerir algo de experiencia aprender cómo flota el área del cuadro, en combinación con varias imágenes o wikitablas en una página. El funcionamiento de {{Stack}} es muy rápido, ya que utiliza una <tabla><HTML para lograr su efecto.

Cajas de portal flotantes

{{Stack}} se puede usar para hacer flotar un cuadro de portal junto a un cuadro de información (u otro elemento alineado a la derecha) cuando otros métodos no funcionen como se esperaba.

Imagen de prueba

Esta es una wikitabla que sirve como una típica tabla alineada a la izquierda. La superposición en las tablas alineadas a la izquierda había sido un problema frecuente cuando otras casillas cercanas estaban configuradas en "flotante: derecha". Entonces, esta es una muestra de cómo una caja de portal flotante evitaría superponerse a una tabla del lado izquierdo.

El ejemplo aquí utiliza {{stack}} para hacer flotar dos cajas de portal (Arte, Literatura) como sigue: 

{{stack |{{portal|Arte}}{{portal|Literatura}} }}

Las dos cajas de portal se apilan y flotan juntas al aparecer ambas como el (primer) parámetro de {{stack}}. Debido a que el cuadro de información y la imagen también se apilaron juntos, {{stack}} movió los dos cuadros de portal junto al cuadro de información a pesar de que se especificaron después de la imagen.

Normalmente, un cuadro de portal quedaría atascado debajo de la imagen de la Mona Lisa, lo que haría que toda esta sección de texto se formateara más abajo y que apareciera un gran espacio en blanco vacío cerca del cuadro de información. No hay límite para la cantidad de cajas de portal (o cajas de Commonscat) que se pueden enumerar dentro de una llamada a {{stack}}, como en un resguardo o un artículo con muchas imágenes apiladas cerca de la parte inferior. Usar {{stack}} es extremadamente eficiente, debido a que es una plantilla corta que usa la etiqueta integrada para hacer flotar las cajas.

Familia de plantillas de Stack

Categoría de seguimiento

Véase también

Esta documentación está transcluida desde Plantilla:Stack/doc.
Los editores pueden experimentar en la zona de pruebas (crear) y en los casos de prueba (crear) de la plantilla.
Por favor, añade las categorías en la subpágina de documentación. Subpáginas de esta plantilla.
Obtenido de «https://es.wikipedia.org/w/index.php?title=Plantilla:Stack&oldid=144853592»