←

Scroll

El scroll horizontal es el estante de toda tienda. Sin barra por default (hide_bar): se pasa con el dedo, no con un artefacto de escritorio.
Un estante — el contenido sigue más allá del borde:
{ "type": "scroll", "props": { "axis": "horizontal" }, "children": [ { "type": "stack", "props": { "axis": "horizontal", "spacing": 8 }, "children": [ { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 16, "width": 120 }, "children": [ { "type": "text", "props": { "content": "Uno", "style": "body" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 16, "width": 120 }, "children": [ { "type": "text", "props": { "content": "Dos", "style": "body" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 16, "width": 120 }, "children": [ { "type": "text", "props": { "content": "Tres", "style": "body" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 16, "width": 120 }, "children": [ { "type": "text", "props": { "content": "Cuatro", "style": "body" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 16, "width": 120 }, "children": [ { "type": "text", "props": { "content": "Cinco", "style": "body" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 16, "width": 120 }, "children": [ { "type": "text", "props": { "content": "Seis", "style": "body" } } ] } ] } ] }
sale esto:
Uno
Dos
Tres
Cuatro
Cinco
Seis
rows apila en dos filas dentro del mismo estante:
{ "type": "scroll", "props": { "axis": "horizontal", "rows": 2 }, "children": [ { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 12, "width": 90 }, "children": [ { "type": "text", "props": { "content": "chip 1", "style": "caption" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 12, "width": 90 }, "children": [ { "type": "text", "props": { "content": "chip 2", "style": "caption" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 12, "width": 90 }, "children": [ { "type": "text", "props": { "content": "chip 3", "style": "caption" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 12, "width": 90 }, "children": [ { "type": "text", "props": { "content": "chip 4", "style": "caption" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 12, "width": 90 }, "children": [ { "type": "text", "props": { "content": "chip 5", "style": "caption" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 12, "width": 90 }, "children": [ { "type": "text", "props": { "content": "chip 6", "style": "caption" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 12, "width": 90 }, "children": [ { "type": "text", "props": { "content": "chip 7", "style": "caption" } } ] }, { "type": "stack", "props": { "background": "surface", "corner_radius": 10, "padding": 12, "width": 90 }, "children": [ { "type": "text", "props": { "content": "chip 8", "style": "caption" } } ] } ] }
sale esto:
chip 1
chip 2
chip 3
chip 4
chip 5
chip 6
chip 7
chip 8