Nova · Layouts

Conditional

An if node draws its then when the path holds something and its else when it does not. Without an else, it draws nothing.

The action, as it is written

{
  id: 'conditional',
  data: { signedIn: true, basket: [] },
  layout: {
    component: 'Stack',
    children: [
      {
        if: '$.signedIn',
        then: { component: 'Text', children: 'Welcome back.' },
        else: { component: 'Text', children: 'Sign in to go on.' },
      },
      {
        if: '$.basket.0',
        then: {
          component: 'Text',
          children: 'There is something in your basket.',
        },
        else: { component: 'Text', children: 'Your basket is empty.' },
      },
      {
        if: '$.basket.0',
        then: { component: 'Text', children: 'Go to the till.' },
      },
    ],
  },
}

Running herepress it

Welcome back.

Your basket is empty.

What is done to it

Nothing. It is only drawn.

What it then holds

{ signedIn: true, basket: [] }

What it then says

Welcome back.
Your basket is empty.

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.