Products · Components
Grid
Tiles in equal columns, for a menu of services.
Put a GridItem inside it for each tile. It suits a home screen of services: Airtime, Electricity, Water, Bills.
Children: Components
Example
<Grid columns="3" gap="small">
<GridItem icon="send" label="Send" onTap="open" data-page="send" />
<GridItem icon="wallet" label="Top up" onTap="open" data-page="top-up" />
<GridItem icon="receipt" label="Bills" badge="2" onTap="open" data-page="bills" />
</Grid>export default definePage({
initialState: {},
actions: {
open(_state, event: DataEvent<{ page: 'send' | 'top-up' | 'bills' }>) {
this.navigation.push(event.data.page);
},
},
});Props
| Prop | Type | What it is |
|---|---|---|
columns | number | Default: 4. |
gap | spacing | Default: medium. |
padding, paddingTop, paddingStart, paddingEnd, paddingBottom | spacing | Space inside its edges, all round or on one side. |
Events
None.