Nova · Layouts

Directives

Where a value is wanted, a directive works one out. $eq says whether two values are the same; here it decides an if, so the layout can ask more of the data than whether something is there.

The action, as it is written

{
  id: 'directives',
  data: { tab: 'members', seats: 2 },
  layout: {
    component: 'Stack',
    children: [
      {
        if: { $eq: ['$.tab', 'members'] },
        then: { component: 'Text', children: 'Showing members' },
        else: { component: 'Text', children: 'Showing everyone' },
      },
      {
        if: { $eq: ['$.seats', 1] },
        then: { component: 'Text', children: 'One seat' },
        else: { component: 'Text', children: '{{$.seats}} seats' },
      },
    ],
  },
}

Running herepress it

Showing members

2 seats

What is done to it

Nothing. It is only drawn.

What it then holds

{ tab: 'members', seats: 2 }

What it then says

Showing members
2 seats

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.