GridItem

Goes inside a Grid. Keep the label to a word or two, as tiles are narrow.

Children: Nothing

Example

GridItem is used inside Grid:

view.dml

<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>

controller.ts

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
`label`	`string`
`icon`	icon name, or one of your own icons
`image`	`string`	A picture in place of `icon`. It takes the same addresses as an `Image`'s `src`.
`badge`	`string`	A short note on the item's corner, such as "New" or a count.
`disabled`	`boolean`	Dims it, and the person can't use it. Default: `false`.

Events

Event	Sends	Notes
`onTap`	Nothing

GridItem

Example

Props

Events

Keep reading

On this page