Atul R
5 years ago
parent
0b214b3019
commit
817690deb3
@ -1,6 +0,0 @@ |
||||
import { Text } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
|
||||
export const MyText = () => { |
||||
return <Text>{`Yolo`}</Text>; |
||||
}; |
||||
@ -0,0 +1,29 @@ |
||||
import { Text, View } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
|
||||
export function StepOne() { |
||||
return ( |
||||
<View style={containerStyle}> |
||||
<Text wordWrap={true}> |
||||
Edit App.tsx to make changes to this screen. Then come back to see your |
||||
changes. Changes should reflect live thanks to Hot Reloading. 🔥 |
||||
</Text> |
||||
<Text> |
||||
{` |
||||
<p style="color: #6200ee;">
|
||||
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA |
||||
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
|
||||
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> |
||||
You can even use <i><strong>Rich Html</strong></i> text like this if you want 😎. |
||||
</p> |
||||
<hr /> |
||||
`}
|
||||
</Text> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const containerStyle = ` |
||||
margin-horizontal: 20px; |
||||
padding-horizontal: 10px; |
||||
`;
|
||||
@ -0,0 +1,48 @@ |
||||
import { Text, View, Button } from "@nodegui/react-nodegui"; |
||||
import { QPushButtonEvents } from "@nodegui/nodegui"; |
||||
import React from "react"; |
||||
import open from "open"; |
||||
|
||||
const buttonEventHandler = { |
||||
[QPushButtonEvents.clicked]: () => { |
||||
open("https://react.nodegui.org").catch(console.log); |
||||
} |
||||
}; |
||||
|
||||
export function StepTwo() { |
||||
return ( |
||||
<View> |
||||
<Text style={textStyle} wordWrap={true}> |
||||
{` |
||||
<ol> |
||||
<li> |
||||
Open chrome and navigate to <code>chrome://inspect</code>. You should see a target below with your app.
|
||||
</li> |
||||
<br/> |
||||
<li> |
||||
Next click on "<code>Open dedicated DevTools for Node</code>" |
||||
</li> |
||||
<br/> |
||||
<li> |
||||
On the dedicated devtools. Click on <code> Source > Node > "Your node process" </code> |
||||
</li> |
||||
</ol> |
||||
`}
|
||||
</Text> |
||||
<Button |
||||
style={btnStyle} |
||||
on={buttonEventHandler} |
||||
text={`Open React NodeGui docs`} |
||||
></Button> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const textStyle = ` |
||||
padding-right: 20px; |
||||
`;
|
||||
|
||||
const btnStyle = ` |
||||
margin-horizontal: 20px; |
||||
height: 40px; |
||||
`;
|
||||
Loading…
Reference in new issue