Module: title-bar
Table of contents
Functions
Functions
TitleBar
▸ TitleBar(props): ReactElement<any, string | JSXElementConstructor<any>>
TitleBar is a component designed to provide a customizable title bar for application windows. It integrates with system window controls to manage window actions like minimize, maximize, and close, and supports optional typography for title display. The component is styled using Sheet from MUI Joy, allowing for theming consistency and visual customization.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
props | Object | undefined | The properties passed to the TitleBar component. |
props.children | any | undefined | The content to be displayed within the title bar, typically the title text or any custom elements. |
props.color | any | undefined | Optional. The color of the title bar, influencing the background color according to the Sheet component's theme. |
props.disableMaximize | undefined | boolean | false | If true, the maximize button within the window controls will be disabled. |
props.disableTypography | undefined | boolean | undefined | If true, the children will be rendered as-is without any additional typography styling. |
props.variant | any | undefined | Optional. The variant of the styling applied to the title bar, as defined by the Sheet component's theme. This component is ideal for applications where the title bar requires specific interaction handling or when there is a need for a more sophisticated title bar arrangement beyond standard text display. |
Returns
ReactElement<any, string | JSXElementConstructor<any>>
Example
<TitleBar color="primary" variant="soft">
My Application
</TitleBar>This example renders a TitleBar with a primary color theme and soft variant, displaying 'My Application' as the title.
Defined in
node_modules/@captn/joy/dist/esm/title-bar/index.js:110
WindowControls
▸ WindowControls(props): ReactElement<any, string | JSXElementConstructor<any>>
WindowControls is a component that provides user interface controls for window operations such as minimize, maximize, and close. It renders a set of buttons that interact with the system window, using IPC commands to perform their respective actions.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
props | Object | undefined | The properties passed to the WindowControls component. |
props.disableMaximize | undefined | boolean | true | If true, disables the maximize button, preventing the window from being maximized. |
props.labels | undefined | Object | {} | An optional set of labels to provide accessible aria-labels for each control button. This includes labels for minimize, maximize, and close buttons. Each button is equipped with an icon representing its action, and the close button includes additional styling for hover and active states to indicate a dangerous action visually. |
Returns
ReactElement<any, string | JSXElementConstructor<any>>
Example
<WindowControls
labels={{ minimize: "Minimize Window", maximize: "Maximize Window", close: "Close Window" }}
/>Defined in
node_modules/@captn/joy/dist/esm/title-bar/index.js:68
close
▸ close(): void
Closes the current window. This function sends a command to the main process via IPC to close the application window. It leverages the WINDOW_CLOSE_KEY channel for IPC communication, ensuring the command is handled appropriately by the main process.
Returns
void
Example
<button onClick={close}>Close Window</button>Defined in
node_modules/@captn/joy/dist/esm/title-bar/index.js:48
maximize
▸ maximize(): void
Maximizes the current window. This function sends a command to the main process via IPC to maximize the application window. It is useful when the application needs to toggle between normal and maximized window states. The specific IPC channel used is denoted by WINDOW_MAXIMIZE_KEY.
Returns
void
Example
<button onClick={maximize}>Maximize Window</button>Defined in
node_modules/@captn/joy/dist/esm/title-bar/index.js:34
minimize
▸ minimize(): void
Minimizes the current window. This function sends a command to the main process via IPC to minimize the application window. It uses a specific IPC channel denoted by WINDOW_MINIMIZE_KEY.
Returns
void
Example
<button onClick={minimize}>Minimize Window</button>Defined in
node_modules/@captn/joy/dist/esm/title-bar/index.js:20