Bumps nodegui version and adds scrollview example

master
Atul R 5 years ago
parent 2075566b4f
commit 19e6503662
  1. 1152
      package-lock.json
  2. 2
      package.json
  3. 17
      src/index.tsx

1152
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -12,7 +12,7 @@
"start:watch": "nodemon -e js,ts,tsx --ignore dist/ --ignore node_modules/ --exec npm start" "start:watch": "nodemon -e js,ts,tsx --ignore dist/ --ignore node_modules/ --exec npm start"
}, },
"dependencies": { "dependencies": {
"@nodegui/nodegui": "^0.1.9", "@nodegui/nodegui": "^0.2.1",
"@nodegui/react-nodegui": "^0.1.9", "@nodegui/react-nodegui": "^0.1.9",
"react": "^16.9.0" "react": "^16.9.0"
}, },

@ -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";
@ -16,31 +17,39 @@ 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';
} }
`; `;

Loading…
Cancel
Save