구성 요소별 NodeGUI 반응 구성 요소

이 부분을 하나씩 또는 구성 요소의 이름을 지정하려고 했지만 그 달콤하고 달콤한 SEO를 원합니다. 내 마지막 게시물에서 나는 NodeGUI에 대해 약간 솔질했고 내가 나열한 부정적인 것 중 하나는 예제에 약간 가볍다는 것이므로 지금까지 프로젝트 here 및 here에 기여하여 문제를 해결하기로 결정했습니다. 나는 또한 NodeGUI의 Vue 버전에 참여했는데 아직 반응 버전만큼 세련되거나 프로덕션 준비가 되어 있지는 않지만 도움이 되었으면 합니다.

이 게시물에서는 NodeGUI React의 기본 구성 요소 대부분을 살펴보고 시연하려고 합니다. 나는 그것으로 사소하지 않은 앱을 만드는 방법을 안내한 후 게시물을 하나 더 할 계획입니다.

단추

이것은 시스템 또는 OS(Ubuntu) 기본값입니다button.

    import React from "react";
    import { Renderer, Button, Window } from "@nodegui/react-nodegui";
    const App = () => {
    return (
    <Window>
    <Button style={buttonStyle} text={"Hello World"} />
    </Window>
    );
    };
    const buttonStyle = `
    color: blue;
    `;
    Renderer.render(<App />);

체크박스

이것은 시스템 또는 OS(Ubuntu) 기본값입니다checkbox.

    import React from "react";
    import { Renderer, CheckBox, Window } from "@nodegui/react-nodegui";
    const App = () => {
    return (
    <Window>
    <CheckBox text={"Hello World"} checked={true} />
    </Window>
    );
    };
    Renderer.render(<App />);

다이얼

이것은 시스템 또는 OS(Ubuntu) 기본값입니다dial.

    import React from "react";
    import { Renderer, Dial, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <Dial />
        </Window>
      );
    };
    Renderer.render(<App />);

영상

이것은 image 구성 요소입니다. AspectRatioMode를 사용하여 이미지를 올바르게 렌더링하십시오.

    import React from "react";
    import { Renderer, Image, Window } from "@nodegui/react-nodegui";
    import { AspectRatioMode } from "@nodegui/nodegui";
    const App = () => {
      return (
        <Window>
          <Image
            aspectRatioMode={AspectRatioMode.KeepAspectRatio}
            size={
 height: 200, width: 150 
            }
            src="https://place-hold.it/200x150"
          ></Image>
        </Window>
      );
    };
    Renderer.render(<App />);

라인편집

이것은 시스템 또는 OS(Ubuntu) 기본값text input 필드입니다.

    import React from "react";
    import { Renderer, LineEdit, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <LineEdit />
        </Window>
      );
    };
    Renderer.render(<App />);

QPlainText편집

이것은 시스템 또는 OS(Ubuntu) 기본text area 입력 필드이며, 넘치는 텍스트에 대한 스크롤바를 자동으로 가져옵니다.

    import React from "react";
    import { Renderer, PlainText, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <PlainText />
        </Window>
      );
    };
    Renderer.render(<App />);

진행 표시 줄

이것은 시스템 또는 OS(Ubuntu) 기본 시스템progress bar입니다.

    import React from "react";
    import { Renderer, ProgressBar, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <ProgressBar value={45} />
        </Window>
      );
    };
    Renderer.render(<App />);

라디오 버튼

이것은 시스템 또는 OS(Ubuntu) 기본 시스템radio button입니다.

    import React from "react";
    import { Renderer, RadioButton, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <RadioButton  />
        </Window>
      );
    };
    Renderer.render(<App />);

스크롤 영역

Ascrollable 지역

    import React from "react";
    import { Renderer, ScrollArea, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <ScrollArea  />
        </Window>
      );
    };
    Renderer.render(<App />);

스핀박스

Anumber input 필드

    import React from "react";
    import { Renderer, SpinBox, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <SpinBox  />
        </Window>
      );
    };
    Renderer.render(<App />);

텍스트

이것은 시스템 또는 OS(Ubuntu)default text입니다. 기본적으로 시스템에 설치된 글꼴에 액세스할 수 있습니다. Google 글꼴과 같은 사용자 정의 글꼴을 사용할 수 있지만 지금은 범위를 벗어납니다.

    import React from "react";
    import { Renderer, Text, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <Text>Welcome to NodeGui</Text>
        </Window>
      );
    };
    Renderer.render(<App />);

보다

이것은 보이지 않는layout element 웹 용어로는 div이고 모바일 개발자 용어로는 보기입니다.

    import React from "react";
    import { Renderer, View, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <View>
            <Text>Welcome to NodeGui<Text>
          </View>
        </Window>
      );
    };
    Renderer.render(<App />);

창문

이것은 시스템 또는 OS(Ubuntu) 애플리케이션window입니다. 이것이 주요 요소이며 여러 개의 창을 가질 수 있으며 기본적으로 모든 창이 닫히면 응용 프로그램이 종료됩니다. 이 동작을 재정의할 수 있습니다. 도크 아이콘 추가 및 이벤트 응답과 같은 몇 가지 추가 기능을 여기에 포함시켰습니다. 다른 많은 구성 요소가 유사한 방식으로 이벤트에 응답할 수 있습니다.

    import React from "react";
    import { Renderer, Window } from "@nodegui/react-nodegui";
    import { QIcon } from "@nodegui/nodegui";
    import nodeguiIcon from "../assets/nodegui.jpg";
    const winIcon = new QIcon(nodeguiIcon);
    const windowHandler = {
      Close: () => {
        console.log("is closed");
      },
      WindowDeactivate: () => {
        console.log("out of focus");
      },
    };
    const styleSheet = `
    #window {
        background: #c7dae0;
      }
    `
    const App = () => {
      return (
        <Window
          styleSheet={styleSheet}
          windowIcon={winIcon}
          windowTitle={'Hello there'}
          minSize={
             width: 500, height: 300
            }
          on={windowHandler}
          id="window"
          visible={true}
        >
        </Window>
      );
    };
    Renderer.render(<App />);

기본 구성 요소는 여기까지입니다. 다음 게시물에서는 SystemTrayIcon이라는 흥미로운 구성 요소를 다룰 것입니다.

나와 비슷하고 TypeScript를 선택하는 데 약간 느리거나 Vanilla.js를 선호하는 경우 간단한 스타터repo here가 있습니다. NodeGUI에서는 setState가 어려울 수 있으므로 쉬운 상태 관리를 위해 Mobx에 넣었습니다.

마지막으로 빌드 및 패키지 단계는 약간hard to find이고 재미있는 부분이므로 여기에서 제공하겠습니다.

앱을 배포 가능 패키지로 패키징

완성된 앱을 배포하려면 @nodegui/packer을 사용할 수 있습니다.
1단계: (이 명령을 한 번만 실행)

npx nodegui-packer --init MyAppName

이렇게 하면 템플릿이 포함된 배포 디렉터리가 생성됩니다. 필요에 맞게 수정할 수 있습니다. 아이콘 추가와 마찬가지로 이름, 설명을 변경하고 다른 기본 기능이나 종속성을 추가합니다. 이 디렉토리를 커밋했는지 확인하십시오.
2단계: (새 배포 가능 파일을 빌드할 때마다 이 명령을 실행합니다.)
다음으로 pack 명령을 실행할 수 있습니다.

`npm run build`

이것은 ./dist 디렉토리 내부의 자산과 함께 js 번들을 생성합니다.

`npx nodegui-packer --pack ./dist`