#9 added a small and ugly demo page

rofrischmann · rofrischmann · commit fe8939cffde8 · 2016-03-07T13:12:26.000+01:00
Someone could clean it up and prettify the styles, for now this closes #9
diff --git a/demo/app.jsx b/demo/app.jsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { render } from 'react-dom'
+import Box, { ScrollView, Page } from '../lib/index'
+
+const Example = () => (
+<Box fit column>
+    <Box center width="100%" flex="0 0 400px" justifyContent="space-between" style={styles.redBox}>
+        400x400 (inclusive 30px padding)
+        <Box width={200} justifyContent="flex-end">
+          <Box style={styles.greenBox}>
+            auto-size (+ 20px padding)
+          </Box>
+        </Box>
+        <Box height={400} minWidth={100} style={styles.blueBox} onClick={() => {
+    this.scrollTop()
+  }}>
+          400x min(100) (inclusive 10px padding)
+        </Box>
+      </Box>
+      <ScrollView width="100%" flex={1} style={styles.scrollView} onScroll={(scrollPos) => {
+    return false
+    }}>
+        {new Array(160).join().split(',').map((item, i) => <Box flexShrink={0} minHeight={40} style={styles.listItem}>Scroll Item {i}</Box>)}
+      </ScrollView>
+    </Box>
+  )
+
+  const styles = {
+    redBox: {
+      padding: 30,
+      background: 'red'
+    },
+    greenBox: {
+      padding: 20,
+      background: 'green'
+    },
+    blueBox: {
+      padding: 10,
+      background: 'blue'
+    },
+    scrollView: {
+      background: 'gray'
+    },
+    listItem: {
+      borderBottom: '1px solid black'
+    }
+  }
+
+  render(<Example />, document.body)
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="format-detection" content="telephone=no" />
+	<meta name="msapplication-tap-highlight" content="no" />
+	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
+	<title>Box Example</title>
+	<style>
+		html,
+		body {
+			height: 100%;
+			width: 100%;
+		}
+		* {
+			padding: 0;
+			margin: 0;
+			box-sizing: border-box;
+		}
+	</style>
+</head>
+
+<body>
+</body>
+	<script type="text/javascript" src="bundle.js"></script>
+
+</html>
