Stack
Apila piezas una debajo de la otra, con el mismo espacio de escala entre todas.
En esta página
Playground
123
Espacio (gap)
Alineación
Fondo
<div class="feitio-stack" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>Cuándo usarlo
- Cada vez que hay espacio entre piezas: el espacio pertenece al padre, y solo un paso de la escala.
Cuándo no usarlo
- Para el relleno interno de un componente: viene listo.
- Con un margen a mano al lado: nunca; la comprobación lo falla.
Ejemplos
Pieza 1Pieza 2Pieza 3
Apilar
Tres piezas en space-3.
Mostrar código
<div class="feitio-stack" data-gap="3">
…
</div><Stack gap={3}>
…
</Stack>12
34
Un espacio por nivel
Cuanto más cerca, más juntos: entre las partes, un espacio grande (6); dentro de cada parte, uno pequeño (2). Un Stack dentro del otro, cada uno con el suyo.
Mostrar código
<div class="feitio-stack" data-gap="6">
<div class="feitio-stack" data-gap="2">…</div>
<div class="feitio-stack" data-gap="2">…</div>
</div>Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-stack" | obligatorio | El diseño. |
data-gap | 1 a 7 | El espacio entre piezas. En React, ningún otro valor se compila. |
align | "start", "center" | Cómo se alinean las piezas horizontalmente. |
Las reglas y un formulario completo construido con los tres están en Layout.