react-uwp

?⌨ React Components that Implement Microsoft's UWP Design & Fluent Design.

Github星跟蹤圖

img

react-uwp

cdnjs
npm package
Build Status

PeerDependencies
Dependencies
DevDependencies

React Components that Implement Microsoft's UWP Design & Fluent Design System.

Online Documentation

img
Visit react-uwp.com online to review the API, see the components in action with live.
Or build the documentation to locally.

Installation

React-UWP is available as an npm package.

Use NPM to get React-UWP components and core styling. All you need is node.js and gulp.

npm install --save react-uwp

Usage

React-UWP components require a theme to be provided.
The quickest way to get up and running is by using the Theme to inject the theme into your application context.then, you can use any of the components as demonstrated in documentation.

If you coding by Typescript, add ReactUWP namespace to tsconfig.json.

{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types"
    ],
    "filesGlob": [
      "**/*.ts",
      "**/*.tsx"
    ],
    "files": [
      "node_modules/react-uwp/index.d.ts" // add to here.
    ]
  }
}

./App.js

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Theme as UWPThemeProvider, getTheme } from "react-uwp/Theme";
import MyComponent from "./MyComponent";

export class App extends React.Component {
  render() {
    return (
      <UWPThemeProvider
        theme={getTheme({
          themeName: "dark", // set custom theme
          accent: "#0078D7", // set accent color
          useFluentDesign: true, // sure you want use new fluent design.
          desktopBackgroundImage: "http://127.0.0.1:8092/staticimages/jennifer-bailey-10753.jpg" // set global desktop background image
        })}
      >
        <MyComponent />
      </UWPThemeProvider>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

./MyComponent.js

import * as React from "react";
import Button from "react-uwp/Button";

export default class MyComponent extends React.Component<void, void> {
  render() {
    return (
      <Button tooltip="Mini Tooltip" />
    )
  }
}

Notice: that in the above example, we used:

import Button from "react-uwp/Button";

instead of

import { Button } from "react-uwp";

This will make your build process faster and your build output smaller.

For a complete mapping of React-UWP components to import,
see /src/index.ts inside the React-UWP npm package root directory.

Custom Theme

We have implemented a default theme to render all React-UWP components.
Styling components to your liking is simple and hassle-free.
This can be achieved in the following two ways:

Four Theme Style (Fluent Design & UWP Design)

img

主要指標

概覽
名稱與所有者myxvisual/react-uwp
主編程語言TypeScript
編程語言TypeScript (語言數: 3)
平台
許可證MIT License
所有者活动
創建於2017-01-09 04:20:58
推送於2022-12-13 18:09:34
最后一次提交2021-10-12 23:03:36
發布數22
最新版本名稱v1.3.0 (發布於 2020-02-14 23:44:44)
第一版名稱v1.0.3 (發布於 )
用户参与
星數1.2k
關注者數51
派生數78
提交數1.1k
已啟用問題?
問題數84
打開的問題數38
拉請求數23
打開的拉請求數25
關閉的拉請求數10
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?