Nova · Actions

Toggle

toggle flips a boolean. The layout draws a line only while it is true.

The action, as it is written

{
  id: 'toggle',
  data: { open: false },
  layout: {
    component: 'Stack',
    children: [
      { component: 'Button', ref: 'flip', children: 'Details' },
      {
        if: '$.open',
        then: {
          component: 'Text',
          children: 'Doors open half an hour before.',
        },
      },
    ],
  },
  triggers: [
    {
      event: 'ui:click',
      ref: 'flip',
      do: [{ toggle: 'open' }],
    },
  ],
}

Running herepress it

What is done to it

press flip

What it then holds

{ open: true }

What it then says

Details
Doors open half an hour before.

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.