Products · Components
Scroll
A row the person scrolls sideways, such as a shelf of products.
Each child keeps its own width. Give cards a width.
Children: Components
Example
<Scroll gap="small" snap="start">
<View variant="card" width="140"><Text weight="medium">Airtime</Text></View>
<View variant="card" width="140"><Text weight="medium">Data</Text></View>
<View variant="card" width="140"><Text weight="medium">Electricity</Text></View>
</Scroll>Props
| Prop | Type | What it is |
|---|---|---|
gap | spacing | Default: medium. |
snap | none, start, center | Where children come to rest after a swipe. Default: none. |
index | number | The child to scroll to. Changing it scrolls there. |
padding, paddingTop, paddingStart, paddingEnd, paddingBottom | spacing | Space inside its edges, all round or on one side. |
Events
| Event | Sends | Notes |
|---|---|---|
onChange | { index } in detail | The child now at the start. |