@electron-lab/title-bar

@electron-lab/title-bar

提供了自定义标题栏的基本封装以及一个标准的 Windows 标题栏。

使用

1. 渲染进程中引入

import TitleBar from '@electron-lab/title-bar';

<TitleBar>Electron Lab</TitleBar>;

1. 在主进程中引入

import { initWindowListener } from '@electron-lab/title-bar/main';

const createWindow = (): void => {
  const mainWindow = new BrowserWindow({
    width: 1440,
    height: 900,
    frame: false,
  });
  initWindowListener(mainWindow);
};
app.on('ready', createWindow);

多窗口时使用

为了在多窗口时使用，需要对每个窗口设置单独的 windowId。

example:

import { initWindowListener } from '@electron-lab/title-bar/main';

const createWindow = (): void => {
  const mainWindow = new BrowserWindow({
    width: 1440,
    height: 900,
    frame: false,
  });

  initWindowListener(mainWindow, 'index');
  // <TitleBar windowId="index" />

  const subWindow = new BrowserWindow({});
  initWindowListener(subWindow, 'sub');
  // <TitleBar windowId="sub" />
};
app.on('ready', createWindow);

如果不设置 windowId，则默认为 "index"。

自定义按钮

import { ActionButton } from '@electron-lab/title-bar';

<ActionButton.Min>minimize window</ActionButton.Min>;
<ActionButton.Min>
  {(able, { isMax }) => {
    return <Button> {isMax ? 'restore' : 'maximize'} </Button>;
  }}
</ActionButton.Min>;
<ActionButton.Close>close window</ActionButton.Close>;

API

<TitleBar {...} />

参数 Prop	说明 comment	类型 Type	默认值 Default Value	示例 Example
extra	标题栏额外的渲染区域	React.ReactNode		extra={<Button>设置</Button>}
backgroundColor	背景颜色	CSSProperties['backgroundColor']		backgroundColor="red"
dark	黑夜模式	boolean		dark={true}
followBrowserWindowOptions	是否跟随窗口的设置（假如对应的窗口设置了 isMaximizable，则按钮的最大化按钮会变成 disabled）	boolean		followBrowserWindowOptions={true}
hideButtonWhileDisable	跟随窗口设置时，是否隐藏按钮	boolean		hideButtonWhileDisable={false}
windowId	窗口 id	string	"index"	windowId="index"

<ActionButton.Max {...} />

参数 Prop	说明 comment	类型 Type	默认值 Default Value	示例 Example
children	渲染的内容	ReactNode | undefined | ((able: boolean, state: { isMax: boolean }) => ReactNode)		<ActionButton.Max>{(able,{isMax})=><div>isMax: {isMax}</div>}</ActionButton.Max>
followBrowserWindowOptions	同 TitleBar.followBrowserWindowOptions
hideButtonWhileDisable	同 TitleBar.hideButtonWhileDisable
windowId	同 TitleBar.windowId

<ActionButton.Min {...} /> | <ActionButton.Close {...} />

参数 Prop	说明 comment	类型 Type	默认值 Default Value	示例 Example
children	渲染的内容	ReactNode | undefined | ((able: boolean) => ReactNode)		<ActionButton.Max>{(able,{isMax})=><div>isMax: {isMax}</div>}</ActionButton.Max>
followBrowserWindowOptions	同 TitleBar.followBrowserWindowOptions
hideButtonWhileDisable	同 TitleBar.hideButtonWhileDisable
windowId	同 TitleBar.windowId

initWindowListener

初始化窗口控制的主进程 ipc 通讯监听。

initWindowListener: (window: electron.BrowserWindow,windowId?:string)

windowId 不设置则为 "index"

example:

import { initWindowListener } from '@electron-lab/title-bar/main';
const mainWindow = new BrowserWindow({
  width: 1440,
  height: 900,
  frame: false,
});

initWindowListener(mainWindow, 'index');
// <TitleBar windowId="index" />

removeWindowListener

移除窗口控制的主进程 ipc 通讯监听。这个方法会在窗口关闭时自动执行移除，一般不需要使用。

removeWindowListener: (windowId:string)

example:

import { initWindowListener, removeWindowListener } from '@electron-lab/title-bar/main';
const mainWindow = new BrowserWindow({
  width: 1440,
  height: 900,
  frame: false,
});

initWindowListener(mainWindow, 'index');
// <TitleBar windowId="index" />

// in some callback
() => {
  removeWindowListener('index');
};