Window Title Bar

The window title bar is a component injected into every window with the config option FSBLHeader enabled. The window title bar provides standard window controls (close, maximize, minimize), as well as controls for advanced window management and data sharing.

You can see the default window title bar layout on GitHub.

The window title bar is divided into three sections, designated by the CSS classes fsbl-header-left, fsbl-header-center, and fsbl-header-right, respectively. You are free to add or remove child components from any section; however, you cannot remove sections without significantly affecting the layout of the title bar.

For maximum flexibility, each of the functions provided by the default title bar can be enabled/disabled for specific kinds of components via config. For example, tabbing can be disabled for specific components by setting the foo/bar config option to false. See the (fix broken link) Config Reference for all available options.

Example - Adding a Button

Let's add a button to the left section of the window title bar. We will use Font Finance to give it a nice icon. When the button is clicked, we'll fire an alert. Here's the code:

...
<div className="fsbl-header-left">
    <LinkerButton />
    <ShareButton />
	<div className="fsbl-icon ff-finsemble" onClick={() => alert("Hello Finsemble!")}></div>
</div>
...

Data Sharing

The <LinkerButton> component opens the Linker Menu, allowing users to select data channels for the window to share data on. The button is hidden for any component with linking disabled. You can read more about linking in the Linker tutorial.

The <ShareButton> enables windows to share data with other windows via drag-and-drop. To enabled the button at runtime, a window must register shareable data via the Drag and Drop Client. You can read more in the drag-and-drop tutorial.

API

The following React components are used from the Finsemble UI API library.