Nova · Layouts

Empty list

A loop over an empty list draws nothing. An if on its first element puts a line there where the list would be.

The action, as it is written
{
  id: 'empty-list',
  data: { bookings: [] },
  layout: {
    component: 'Stack',
    children: [
      { component: 'Text', children: 'Your bookings' },
      {
        if: '$.bookings.0',
        then: {
          for: '$.bookings',
          as: 'booking',
          do: { component: 'Text', children: '$booking' },
        },
        else: { component: 'Text', children: 'None yet.' },
      },
    ],
  },
}
Running herepress it

Your bookings

None yet.

What is done to it
Nothing. It is only drawn.
What it then holds
{ bookings: [] }
What it then says
Your bookings
None yet.
Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.