react-windows-ui를 사용하여 UI 앱과 같은 Windows10 네이티브 빌드
11771 단어 webdevreactjavascriptuiweekly
Microsoft가 Windows 앱에 새로운 유창한 UI 디자인을 도입함에 따라 대부분의 개발자는 앱에 대한 인터페이스를 구현하기 시작했습니다.
웹 아키텍처를 사용하여 네이티브 Windows 앱의 풍부한 느낌을 생성하기 위해 reactjs를 사용하는 웹 기반 라이브러리 빌드인 react-windows-ui가 제공됩니다. 이는 electronjs 또는 NodeGUI와 결합하여 빠른 PWA 또는 네이티브 앱을 개발하기 위한 구성 요소 모델과 유사합니다.
적응형 UI
저장소
버추얼 비벡 / 반응-창-UI
ReactJS를 사용하여 모든 기능을 갖춘 Windows Fluent UI 앱을 빌드합니다. 웹 사이트와 앱을 매우 쉽게 만들 수 있도록 액세스 가능하고 재사용 가능하며 구성 가능한 일련의 React 구성 요소를 제공합니다.
반응-창-UI
ReactJS를 사용하여 전체 기능을 갖춘 Windows Fluent UI 앱을 빌드합니다.
적응형 UI
데모 ⚡
https://virtualvivek.github.io/react-windows-ui/
설치
$ npm install react-windows-ui
시작하기
// 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/fonts/fonts.min.css'
앱 구성
데모 ⚡
https://virtualvivek.github.io/react-windows-ui/
설치
$ npm install react-windows-ui
시작하기
// 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/fonts/fonts.min.css'
앱 구성
$ npm install react-windows-ui
시작하기
// 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/fonts/fonts.min.css'
앱 구성
// 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/fonts/fonts.min.css'
‣ app-config.css file contains the PrimaryColor, Fontfamily used by the app.
‣ You can import default app-config using this file app-config.css.
OR
Create your own like this
:root {
--PrimaryColor: #6632a8; /* Change color you like */
}
body {
font-family: "Segoe UI"; /* Change fontfamily you like */
}
용법
import { Button, InputText } from 'react-windows-ui';
const App = () => (
<>
<Button type="primary" value="Press Me" />
<InputText placeholder="Enter a text" />
</>
);
상용구
import { Button, InputText } from 'react-windows-ui';
const App = () => (
<>
<Button type="primary" value="Press Me" />
<InputText placeholder="Enter a text" />
</>
);
…
데모 ⚡
https://virtualvivek.github.io/react-windows-ui/
설치
$ npm install react-windows-ui
시작하기
//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'
용법
import { Button, InputText } from 'react-windows-ui';
const App = () => (
<>
<Button type="primary" value="Press Me" />
<InputText placeholder="Enter a text" />
</>
);
로컬에서 데모 실행
$ git clone https://github.com/virtualvivek/react-windows-ui.git
$ cd react-windows-ui
$ npm install
$ npm start
이 라이브러리가 유용하다고 생각하십니까? ❤️
이 저장소에 가입stargazers하여 지원하십시오. ⭐
마지막 생각들
나는 이 프로젝트가 Windows 디자인 시스템 하이브리드 또는 네이티브 앱을 쉽게 구축할 수 있는 반응 분야의 웹 개발자를 영광스럽게 할 것이라고 생각합니다. 반응형 디자인 플로우를 제공하여 광범위한 디바이스를 지원합니다.
Reference
이 문제에 관하여(react-windows-ui를 사용하여 UI 앱과 같은 Windows10 네이티브 빌드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/virtualvivek/build-windows10-native-like-ui-apps-using-react-windows-ui-2goj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
