React 桌面 Windows 标题栏组件

简介

React 桌面 Windows 标题栏组件是一个基于React框架编写的Windows风格标题栏组件。该组件可以在React桌面应用中轻松实现Windows风格的标题栏。

安装

使用npm安装该组件

npm install --save react-windows-titlebar

使用

在React应用中引入该组件

import React from 'react';
import TitleBar from 'react-windows-titlebar';

在render函数中使用该组件

render() {
    return (
        <div>
            <TitleBar title="React App" theme="dark" />
            {/* rest of your app */}
        </div>
    );
}

API

属性

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | title | string | "MyApp" | 标题栏中显示的标题 | | theme | "light" | "dark" | "light" | 主题风格，"light"为明亮主题，"dark"为黑暗主题 | | isMaximized | boolean | false | 是否最大化 | | onClose | () => void | | 关闭时的回调函数 | | onMinimize | () => void | | 最小化时的回调函数 | | onMaximize | () => void | | 最大化时的回调函数 | | onRestore | () => void | | 还原时的回调函数 |

例子

import React, { useState } from 'react';
import TitleBar from 'react-windows-titlebar';

function MyApp() {
    const [isMaximized, setMaximized] = useState(false);

    const handleClose = () => {
        window.close();
    }

    const handleMinimize = () => {
        window.Minimize();
    }

    const handleMaximize = () => {
        window.Maximize();
        setMaximized(true);
    }

    const handleRestore = () => {
        window.Restore();
        setMaximized(false);
    }

    return (
        <div>
            <TitleBar
                title="MyApp"
                isMaximized={isMaximized}
                onClose={handleClose}
                onMinimize={handleMinimize}
                onMaximize={handleMaximize}
                onRestore={handleRestore}
            />
            {/* rest of your app */}
        </div>
    );
}

export default MyApp;