NodeGUI React Component by Component
Chtěl jsem to pojmenovat kousek po kousku nebo stavební kameny, ale chci to sladké, sladké SEO. V mém posledním příspěvku jsem trochu oprášil NodeGUI a jedním z negativ, které jsem uvedl, bylo, že to bylo trochu lehké na příkladech, takže jsem se rozhodl to napravit tím, že přispěji k projektu zde a zde doposud. Také jsem se zapojil do Vue verze NodeGUI, ještě není tak vypilovaná nebo připravená na výrobu jako ta Reagovat, ale doufám, že s tím pomůžu.
Tento příspěvek chci projít a předvést většinu základních komponent NodeGUI React. Mám v plánu udělat ještě jeden příspěvek poté, co vás provedu tím, jak s ním vytvořím netriviální aplikaci.
Tlačítko
toto je výchozí tlačítko systému nebo OS (Ubuntu).
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 />);
Zaškrtávací políčko
toto je výchozí zaškrtávací políčko systému nebo OS (Ubuntu).
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 />);
Vytočit
toto je výchozí číselník systému nebo OS (Ubuntu).
import React from "react";
import { Renderer, Dial, Window } from "@nodegui/react-nodegui";
const App = () => {
return (
<Window>
<Dial />
</Window>
);
};
Renderer.render(<App />);
Obrázek
toto je obrazová komponenta, ujistěte se, že používáte AspectRatioMode ke správnému vykreslení obrazu
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 />);
LineEdit
toto je výchozí textové vstupní pole systému nebo OS (Ubuntu).
import React from "react";
import { Renderer, LineEdit, Window } from "@nodegui/react-nodegui";
const App = () => {
return (
<Window>
<LineEdit />
</Window>
);
};
Renderer.render(<App />);
PlainTextEdit
toto je výchozí pole pro zadávání textové oblasti systému nebo OS (Ubuntu), všimne si, že automaticky získá posuvník pro přetékající text.
import React from "react";
import { Renderer, PlainText, Window } from "@nodegui/react-nodegui";
const App = () => {
return (
<Window>
<PlainText />
</Window>
);
};
Renderer.render(<App />);
ProgressBar
toto je výchozí ukazatel průběhu systému nebo OS (Ubuntu).
import React from "react";
import { Renderer, ProgressBar, Window } from "@nodegui/react-nodegui";
const App = () => {
return (
<Window>
<ProgressBar value={45} />
</Window>
);
};
Renderer.render(<App />);
Přepínač
toto je výchozí systémový přepínač systému nebo OS (Ubuntu).
import React from "react";
import { Renderer, RadioButton, Window } from "@nodegui/react-nodegui";
const App = () => {
return (
<Window>
<RadioButton />
</Window>
);
};
Renderer.render(<App />);
Oblast posouvání
Posouvatelná oblast
import React from "react";
import { Renderer, ScrollArea, Window } from "@nodegui/react-nodegui";
const App = () => {
return (
<Window>
<ScrollArea />
</Window>
);
};
Renderer.render(<App />);
SpinBox
Pole pro zadání čísla
import React from "react";
import { Renderer, SpinBox, Window } from "@nodegui/react-nodegui";
const App = () => {
return (
<Window>
<SpinBox />
</Window>
);
};
Renderer.render(<App />);
Text
toto je výchozí text systému nebo OS (Ubuntu). Ve výchozím nastavení budete mít přístup k písmům nainstalovaným v systému. Je možné použít vlastní písma, jako jsou písma google, ale prozatím je to mimo rozsah.
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 />);
Zobrazit
Toto je neviditelný prvek rozvržení z hlediska webu, je to div, z hlediska mobilního vývojáře je to pohled.
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 />);
Okno
toto je okno aplikace systému nebo OS (Ubuntu). Toto je váš hlavní prvek, můžete mít více oken a ve výchozím nastavení se aplikace ukončí, pokud jsou všechna okna zavřená. Toto chování můžete přepsat. Zahrnul jsem sem některé doplňky, jako je přidání ikony doku a reakce na události, mnoho dalších komponent může reagovat na události podobným způsobem.
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 />);
To je vše pro základní komponenty, další příspěvek se bude týkat zajímavého s názvem SystemTrayIcon.
Pokud jste jako já a trochu pomalu přijímáte TypeScript nebo jen dáváte přednost vanilla.js, mám zde jednoduché startovací repo, které jsem hodil do Mobx pro snadnou správu stavu, protože setState může být s NodeGUI obtížné.
Poslední věcí je, že zde poskytnu kroky sestavení a balení, protože je trochu těžké je najít a to je ta zábavná část.
Balící aplikace jako distribuovatelná
K distribuci hotové aplikace můžete použít @nodegui/packer
Krok 1:( Tento příkaz spustit pouze jednou )
npx nodegui-packer --init MyAppName
Tím vytvoříte adresář nasazení obsahující šablonu. Toto můžete upravit podle svých potřeb. Jako přidat ikony, změnit název, popis a přidat další nativní funkce nebo závislosti. Ujistěte se, že jste potvrdili tento adresář.
Krok 2:( Tento příkaz spusťte pokaždé, když chcete vytvořit novou distribuovatelnou položku )
Dále můžete spustit příkaz pack:
`npm run build`
Tím vytvoříte balíček js spolu s aktivy v ./dist adresář
`npx nodegui-packer --pack ./dist`