发布于 2026-01-05 6 阅读
0

使用 react-windows-ui 构建类似 Windows 原生 UI 的应用 react-windows-ui 状态 功能 适用 入门 用法 本地运行 觉得这个项目有用吗?❤️ 许可

使用 react-windows-ui 构建类似 Windows 原生 UI 的应用

react-windows-ui

地位

特征

入门

用法

本地运行

觉得这个项目有用吗?❤️

执照

fluentUI
随着微软在其 Windows 应用中引入全新的流畅用户界面设计,大多数开发者开始在其应用中实现该界面。

react-windows-ui一个基于Web 的库,它使用Reactjs构建,旨在利用Web 架构打造更丰富的原生 Windows应用程序体验。它类似于组件模型,可以与 Electronjs 或 NodeGUI 耦合,从而快速开发 PWA 或原生应用程序。

自适应用户界面

adaptiveUI

存储库

GitHub 标志 virtualvivek / react-windows-ui

使用 ReactJS 构建具有 Windows 原生外观和体验的应用程序。它提供了一系列易于访问、可重用和可组合的 React 组件,让创建网站和应用程序变得异常轻松。

react-windows-ui

使用 ReactJS 构建具有 Windows 原生外观和体验的应用程序。

«浏览项目文档»

地位

建造 许可证:MIT npm
react-windows-ui.min.css

特征

  • 提供原生风格的Windows用户界面控件。
  • CSS文件体积相对较小。
  • 更简洁的HTML。
  • 可与任何路由库配合使用。

         

入门

npm install react-windows-ui
Enter fullscreen mode Exit fullscreen mode
// Be sure to include styles at some point, probably during your bootstraping
import "react-windows-ui/config/app-config.css";
import "react-windows-ui/dist/react-windows-ui.min.css";
import "react-windows-ui/icons/winui-icons.min.css";
Enter fullscreen mode Exit fullscreen mode

用法

import { Button, InputText } from "react-windows-ui";

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);
Enter fullscreen mode Exit fullscreen mode

本地运行

git clone https://github.com/virtualvivek/react-windows-ui.git
cd react-windows-ui
npm install
npm start
Enter fullscreen mode Exit fullscreen mode

觉得这个项目有用吗?❤️

加入此仓库的观星者行列,支持它吧!⭐

执照

react-windows-ui已获得以下许可……




演示 ⚡

https://virtualvivek.github.io/react-windows-ui/

安装

$ npm install react-windows-ui
Enter fullscreen mode Exit fullscreen mode

入门

//Be sure to include styles at some point, probably during bootstraping
import 'react-windows-ui/config/app-config.css'
import 'react-windows-ui/dist/react-windows-ui.min.css'
import 'react-windows-ui/icons/fonts/fonts.min.css'
Enter fullscreen mode Exit fullscreen mode

用法

import { Button, InputText } from 'react-windows-ui';

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);
Enter fullscreen mode Exit fullscreen mode

本地运行演示

$ git clone https://github.com/virtualvivek/react-windows-ui.git
$ cd react-windows-ui
$ npm install
$ npm start
Enter fullscreen mode Exit fullscreen mode

npmJS GitHub

觉得这个图书馆有用吗?❤️

加入此仓库的观星者行列,支持它吧!⭐

最后想说的话

我认为这个项目将极大地提升 Web 开发人员,特别是 React 领域的开发人员的效率,使他们能够轻松构建基于 Windows 设计系统的混合或原生应用程序。它提供响应式设计流程,以支持各种设备。

文章来源:https://dev.to/virtualvivek/build-windows10-native-like-ui-apps-using-react-windows-ui-2goj