|
|
@ -4,6 +4,7 @@ import { |
|
|
|
Text, |
|
|
|
Text, |
|
|
|
Window, |
|
|
|
Window, |
|
|
|
Image, |
|
|
|
Image, |
|
|
|
|
|
|
|
ScrollArea |
|
|
|
} from "@nodegui/react-nodegui"; |
|
|
|
} from "@nodegui/react-nodegui"; |
|
|
|
import path from "path"; |
|
|
|
import path from "path"; |
|
|
|
import React from "react"; |
|
|
|
import React from "react"; |
|
|
@ -11,36 +12,44 @@ import { AspectRatioMode } from "@nodegui/nodegui"; |
|
|
|
|
|
|
|
|
|
|
|
import imageUrl from "../assets/nodegui.jpg"; |
|
|
|
import imageUrl from "../assets/nodegui.jpg"; |
|
|
|
const distImgUrl = path.resolve(__dirname, imageUrl); |
|
|
|
const distImgUrl = path.resolve(__dirname, imageUrl); |
|
|
|
const minSize = {width: 500, height: 400}; |
|
|
|
const minSize = { width: 500, height: 400 }; |
|
|
|
|
|
|
|
|
|
|
|
const App = () => { |
|
|
|
const App = () => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Window minSize={minSize} styleSheet={styleSheet}> |
|
|
|
<Window minSize={minSize} styleSheet={styleSheet}> |
|
|
|
|
|
|
|
<ScrollArea style={`height: '100%';width: '100%';`}> |
|
|
|
<View id="container"> |
|
|
|
<View id="container"> |
|
|
|
<Text style="font-size: 15px; font-weight: bold; margin-bottom: 20px;">Hello World</Text> |
|
|
|
<Text style="font-size: 15px; font-weight: bold; margin-bottom: 20px;"> |
|
|
|
|
|
|
|
Hello World |
|
|
|
|
|
|
|
</Text> |
|
|
|
<Image |
|
|
|
<Image |
|
|
|
style={imageStyle} |
|
|
|
style={imageStyle} |
|
|
|
src={distImgUrl} |
|
|
|
src={distImgUrl} |
|
|
|
aspectRatioMode={AspectRatioMode.KeepAspectRatio} |
|
|
|
aspectRatioMode={AspectRatioMode.KeepAspectRatio} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
|
|
|
|
</ScrollArea> |
|
|
|
</Window> |
|
|
|
</Window> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const imageStyle = ` |
|
|
|
const imageStyle = ` |
|
|
|
height: "100px"; |
|
|
|
height: "700px"; |
|
|
|
width: "100px"; |
|
|
|
width: "700px"; |
|
|
|
qproperty-alignment: 'AlignHCenter'; |
|
|
|
qproperty-alignment: 'AlignHCenter'; |
|
|
|
`;
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
const styleSheet = ` |
|
|
|
const styleSheet = ` |
|
|
|
#container { |
|
|
|
#container { |
|
|
|
flex: 1; |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
min-height: 0; |
|
|
|
|
|
|
|
min-width: 0; |
|
|
|
|
|
|
|
width: '900'; |
|
|
|
|
|
|
|
height: '900'; |
|
|
|
flex-direction: column; |
|
|
|
flex-direction: column; |
|
|
|
min-height: '100%'; |
|
|
|
|
|
|
|
align-items: 'center'; |
|
|
|
align-items: 'center'; |
|
|
|
justify-content: 'center'; |
|
|
|
justify-content: 'center'; |
|
|
|
|
|
|
|
background-color: 'grey'; |
|
|
|
} |
|
|
|
} |
|
|
|
`;
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|