Customize actions

Example

Each glass shows the default actions plus a custom Split action in its menu. Open a glass's action menu and click Split to add a pane below it. See General — Actions for the action object and placement details. The example below is hosted within an iframe. You can also view it here.

import { BinaryWindow, DEFAULT_GLASS_ACTIONS } from 'bwin';

let count = 2;

const splitAction = {
  label: 'Split',
  placement: 'menu',
  onClick: (event, binaryWindow) => {
    const paneEl = event.target.closest('bw-pane');
    const sashId = paneEl.getAttribute('sash-id');
    count += 1;
    binaryWindow.addPane(sashId, {
      position: 'bottom',
      size: '50%',
      title: `Pane ${count}`,
      content: `Pane ${count}`,
    });
  },
};

const bwin = new BinaryWindow({
  fitContainer: true,
  actions: [...DEFAULT_GLASS_ACTIONS, splitAction],
  children: [
    { position: 'left', id: 'pane-1', title: 'Pane 1', content: 'Pane 1' },
    { position: 'right', id: 'pane-2', title: 'Pane 2', content: 'Pane 2' },
  ],
});

bwin.mount(document.getElementById('container'));