addPane

Description

Add a pane to an existing pane.

binaryWindow.addPane(targetPaneSashId, options);

Parameters

Function parameters

NameTypeDescription
targetPaneSashIdstringTarget pane's Sash ID that the new pane is added to.
optionsobjectOptions for new pane. e.g., size, position, etc.

options details

NameTypeDescription
contentstring | DOM Node | ReactNode1Content of the new pane
idstringSash ID to the new pane
positionstringPosition of the new pane. One of top, right, bottom, or left
sizenumber | stringSize of the new pane. e.g., 100, 0.5, "50%"
titlestring | DOM Node | ReactNode1Title of the new pane

Returns

Type: Sash object

Description: Newly created Sash object.

Code snippets

Javascript

<div id="container"></div>
const binaryWindow = new BinaryWindow();

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

binaryWindow.addPane('target-pane-sash-id', {
  position: 'bottom',
  size: 120,
  content: Object.assign(document.createElement('div'), { innerHTML: 'Hello World' }),
});

React

import { useEffect, useRef } from 'react';
import { Window } from 'bwin-react';

function App() {
  const windowRef = useRef(null);

  useEffect(() => {
    windowRef.current.addPane('target-pane-sash-id', {
      position: 'bottom',
      size: 120,
      content: <div>Hello World</div>,
    });
  }, []);

  return <Window ref={windowRef} />;
}

Footnotes

  1. DOM Node is for vanilla Javascript, and ReactNode is for React. ↩ ↩2