Bumps nodegui version and adds scrollview example

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

1156
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";
@ -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}>
<View id="container"> <ScrollArea style={`height: '100%';width: '100%';`}>
<Text style="font-size: 15px; font-weight: bold; margin-bottom: 20px;">Hello World</Text> <View id="container">
<Image <Text style="font-size: 15px; font-weight: bold; margin-bottom: 20px;">
style={imageStyle} Hello World
src={distImgUrl} </Text>
aspectRatioMode={AspectRatioMode.KeepAspectRatio} <Image
/> style={imageStyle}
</View> src={distImgUrl}
aspectRatioMode={AspectRatioMode.KeepAspectRatio}
/>
</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