Blaze UI 窗口框

Blaze UI 窗口框是一个可以在网页中生成自定义窗口的 UI 库，它具有轻量级、易于使用、高可扩展等特点。它是基于 React 开发的。

特性

• 简单易用：使用简单，可以快速创建 UI 界面。
• 轻量级：代码量较小，支持按需加载。
• 高可扩展：框架提供了大量的 API 可以扩展 ui 的功能。
• 兼容性：兼容各种主流浏览器。

安装

npm install @blaze-ui/window

快速上手

在使用之前，需要先导入 @blaze-ui/window 的样式和 js 文件。

import '@blaze-ui/window/dist/index.css';
import { Window } from '@blaze-ui/window';

然后创建一个窗口。

<Window title="Hello World!">
  Welcome to Blaze UI!
</Window>

更多示例请参考 官方文档。

API

Window Props

| 名称 | 类型 | 默认值 | 说明 | | -------------- | -------- | ------ | -------------------------------------------------- | | className | string | - | 自定义类名 | | title | string | - | 窗口标题 | | draggable | boolean | true | 是否可以拖动 | | resizable | boolean | true | 是否可以调整大小 | | onMaximized | function | - | 窗口最大化时的回调函数，参数为 state: boolean | | onMinimized | function | - | 窗口最小化时的回调函数，参数为 state: boolean | | onClose | function | - | 窗口关闭时的回调函数 | | onTitleClick | function | - | 点击窗口标题时的回调函数 | | onDrag | function | - | 拖动窗口时的回调函数，参数为 position: { x, y } | | onWindowResize | function | - | 调整窗口大小时的回调函数，参数为 size: { width, height } | | headerButtons | array | [] | 可以设置头部右上角的按钮，元素是 node |

方法

• maximize：最大化窗口
• minimize：最小化窗口
• restore：还原窗口
• close：关闭窗口

结语

Blaze UI 窗口框提供了简单、易用、高可扩展的 UI 界面，可以大大提高开发效率和用户体验。建议在开发前先阅读官方文档，以便更好地使用它。