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.

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 />
    <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 interop in the Interop tutorial.

API

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

Control	Summary
AlwaysOnTopButton	A control for enabling always-on-top.
GroupingButton	A control for forming and disbanding window groups.
LinkerButton	A control opening the Linker Menu and displaying active Linker channels.
ShareButton	(Deprecated) A control for sharing data with other windows via drag-and-drop.
TabRegion	A control for forming and rearranging tabs of windows. Also displays the window's title.
CloseButton	A control for closing the window.
MaximizeButton	A control for maximizing the window.
MinimizeButton	A control for minimizing the window.
WindowShell	A higher-order React component that provides the low-level title bar functionality.