Flow
A masonry-like grid that packs cells of different sizes. Put FlowItem children in it.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
align | "start" | "center" | "end" | "baseline" | "stretch" | |
justify | "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "stretch" | |
wrap | "nowrap" | "wrap" | "wrap-reverse" | |
gap | number | string | 4px steps when a number |
rowGap | number | string | |
columnGap | number | string | |
padding | number | string | 4px steps when a number |
background | string | One of surface|surface-secondary|surface-tertiary|surface-elevated|surface-elevated-secondary|surface-inverted|surface-soft|info|warning|caution|success|danger|discovery|info-solid|warning-solid|caution-solid|success-solid|danger-solid|discovery-solid or a CSS color. Leave it unset. Only one summary panel in a Card can use "surface-secondary" |
border | boolean | |
borderColor | "default" | "subtle" | "strong" | "info" | "warning" | "caution" | "success" | "danger" | "discovery" | |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
minWidth | number | string | |
maxWidth | number | string | |
minHeight | number | string | |
maxHeight | number | string | |
flex | number | |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | |
scrollable | boolean | |
clip | boolean | |
shadow | boolean | |
inline | boolean | |
role | string | ARIA role |
flush | boolean | No padding |
minSize | number | string | Minimum width and height |
maxSize | number | string | Maximum width and height |
disableAutoSpacing | boolean | No default gap between children |
columns | number | |
rows | number | |
layout | "pack" | "fixed" | Default "pack" |
Slots
children· multiple
Events
onVisible· Sent once, the first time the container scrolls into view. Use it to load more content lazily.
FlowItem
A cell of a Flow, with an optional span.
Loading examples…
| Prop | Type | Description |
|---|---|---|
align | "start" | "center" | "end" | "baseline" | "stretch" | |
justify | "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "stretch" | |
wrap | "nowrap" | "wrap" | "wrap-reverse" | |
gap | number | string | 4px steps when a number |
rowGap | number | string | |
columnGap | number | string | |
padding | number | string | 4px steps when a number |
background | string | One of surface|surface-secondary|surface-tertiary|surface-elevated|surface-elevated-secondary|surface-inverted|surface-soft|info|warning|caution|success|danger|discovery|info-solid|warning-solid|caution-solid|success-solid|danger-solid|discovery-solid or a CSS color. Leave it unset. Only one summary panel in a Card can use "surface-secondary" |
border | boolean | |
borderColor | "default" | "subtle" | "strong" | "info" | "warning" | "caution" | "success" | "danger" | "discovery" | |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
minWidth | number | string | |
maxWidth | number | string | |
minHeight | number | string | |
maxHeight | number | string | |
flex | number | |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | Default "1 / 1" |
scrollable | boolean | |
clip | boolean | |
shadow | boolean | |
inline | boolean | |
role | string | ARIA role |
flush | boolean | No padding |
minSize | number | string | Minimum width and height |
maxSize | number | string | Maximum width and height |
disableAutoSpacing | boolean | No default gap between children |
span | number | |
rowSpan | number | |
aspectMode | "soft" | "fixed" |
Slots
children· multiple
Events
onVisible· Sent once, the first time the container scrolls into view. Use it to load more content lazily.