Nova · Shells

Multi-canvas

Two canvases side by side. The one on the left replaces what stands on the other, by naming it: canvas on a replace. The left one is not touched.

The shell, as it is written

{
  canvases: [
    { id: 'multi-canvas.nav', initial: 'multi-canvas.days' },
    {
      id: 'multi-canvas.content',
      initial: 'multi-canvas.tonight',
    },
  ],
  canvasLayout: {
    component: 'Stack',
    children: [
      {
        component: 'CanvasSlot',
        props: { canvasId: 'multi-canvas.nav' },
      },
      {
        component: 'CanvasSlot',
        props: { canvasId: 'multi-canvas.content' },
      },
    ],
  },
  actions: {
    multi-canvas.days: {
      id: 'multi-canvas.days',
      layout: {
        component: 'Stack',
        children: [
          {
            component: 'Button',
            ref: 'tonight',
            children: 'Tonight',
          },
          {
            component: 'Button',
            ref: 'tomorrow',
            children: 'Tomorrow',
          },
        ],
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'tonight',
          do: [
            {
              replace: {
                action: 'multi-canvas.tonight',
                canvas: 'multi-canvas.content',
              },
            },
          ],
        },
        {
          event: 'ui:click',
          ref: 'tomorrow',
          do: [
            {
              replace: {
                action: 'multi-canvas.tomorrow',
                canvas: 'multi-canvas.content',
              },
            },
          ],
        },
      ],
    },
    multi-canvas.tonight: {
      id: 'multi-canvas.tonight',
      layout: { component: 'Text', children: 'Tonight: The Tempest' },
    },
    multi-canvas.tomorrow: {
      id: 'multi-canvas.tomorrow',
      layout: {
        component: 'Text',
        children: 'Tomorrow: Twelfth Night',
      },
    },
  },
}

Running herepress it

Tonight: The Tempest

What is done to it

press tomorrow

What then stands on each canvas

{
  multi-canvas.nav: ['multi-canvas.days'],
  multi-canvas.content: ['multi-canvas.tomorrow'],
}

What it then says

Tonight
Tomorrow
Tomorrow: Twelfth Night

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.