El stack es el 80% de todo layout: eje, espaciado, fondo, esquinas. Los otros dos ejes — horizontal y layered — son el mismo nodo con otro prop.
Vertical (default) con padding, fondo y esquinas — la tarjeta básica:
{
"type": "stack",
"props": {
"background": "surface",
"corner_radius": 12,
"fill_width": true,
"padding": 16,
"spacing": 4
},
"children": [
{
"type": "text",
"props": {
"content": "Título",
"style": "headline"
}
},
{
"type": "text",
"props": {
"color": "text_secondary",
"content": "El fondo es un token, no un color",
"style": "secondary"
}
}
]
}
sale esto:
Título
El fondo es un token, no un color
axis horizontal — una fila con alineación:
{
"type": "stack",
"props": {
"alignment": "center",
"axis": "horizontal",
"background": "surface",
"corner_radius": 10,
"fill_width": true,
"padding": 12,
"spacing": 8
},
"children": [
{
"type": "icon",
"props": {
"name": "star",
"size": 18,
"tint": "accent"
}
},
{
"type": "text",
"props": {
"content": "Ícono + texto + flecha",
"style": "body"
}
},
{
"type": "icon",
"props": {
"align": "trailing",
"fill_width": true,
"name": "chevron_right",
"size": 16,
"tint": "text_secondary"
}
}
]
}
sale esto:
columns — el mismo stack, en grilla de 3:
{
"type": "stack",
"props": {
"columns": 3,
"spacing": 8
},
"children": [
{
"type": "stack",
"props": {
"alignment": "center",
"background": "surface",
"corner_radius": 10,
"padding": 14
},
"children": [
{
"type": "text",
"props": {
"content": "1",
"style": "headline"
}
}
]
},
{
"type": "stack",
"props": {
"alignment": "center",
"background": "surface",
"corner_radius": 10,
"padding": 14
},
"children": [
{
"type": "text",
"props": {
"content": "2",
"style": "headline"
}
}
]
},
{
"type": "stack",
"props": {
"alignment": "center",
"background": "surface",
"corner_radius": 10,
"padding": 14
},
"children": [
{
"type": "text",
"props": {
"content": "3",
"style": "headline"
}
}
]
},
{
"type": "stack",
"props": {
"alignment": "center",
"background": "surface",
"corner_radius": 10,
"padding": 14
},
"children": [
{
"type": "text",
"props": {
"content": "4",
"style": "headline"
}
}
]
},
{
"type": "stack",
"props": {
"alignment": "center",
"background": "surface",
"corner_radius": 10,
"padding": 14
},
"children": [
{
"type": "text",
"props": {
"content": "5",
"style": "headline"
}
}
]
},
{
"type": "stack",
"props": {
"alignment": "center",
"background": "surface",
"corner_radius": 10,
"padding": 14
},
"children": [
{
"type": "text",
"props": {
"content": "6",
"style": "headline"
}
}
]
}
]
}
sale esto:
axis layered — el primero es la base, el resto se superpone por gravity, y el scrim oscurece para que el texto respire (el hero de Cinera):
{
"type": "stack",
"props": {
"axis": "layered",
"corner_radius": 12,
"scrim": "bottom"
},
"children": [
{
"type": "image",
"props": {
"aspect_ratio": 1.8,
"fill_width": true,
"url": "https://images.metmuseum.org/CRDImages/ep/web-large/DP-42549-001.jpg"
}
},
{
"type": "stack",
"props": {
"gravity": "bottom-leading",
"padding": 14,
"spacing": 2
},
"children": [
{
"type": "text",
"props": {
"color": "on_scrim",
"content": "Encima de la foto",
"style": "headline"
}
},
{
"type": "text",
"props": {
"color": "on_scrim",
"content": "gravity: bottom-leading",
"style": "caption"
}
}
]
}
]
}
sale esto:
Encima de la foto
gravity: bottom-leading
scheme fija la variante del subárbol — esta tarjeta es oscura aunque el sistema esté claro:
{
"type": "stack",
"props": {
"background": "surface",
"corner_radius": 12,
"fill_width": true,
"padding": 16,
"scheme": "dark",
"spacing": 4
},
"children": [
{
"type": "text",
"props": {
"content": "Siempre de noche",
"style": "headline"
}
},
{
"type": "text",
"props": {
"color": "text_secondary",
"content": "los tokens de adentro resuelven en dark",
"style": "caption"
}
}
]
}
sale esto:
Siempre de noche
los tokens de adentro resuelven en dark