add transparent image example

lineupjs · Jun 4, 2019 · ba68415 · ba68415
1 parent 6562298
commit ba68415
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/demo/image.html b/demo/image.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>LineUp Builder Test</title>
+
+  <link href="./LineUpJS.css" rel="stylesheet">
+  <link href="./demo.css" rel="stylesheet">
+</head>
+<body>
+<script src="./LineUpJS.js"></script>
+
+<script>
+  window.onload = function () {
+    const arr = [];
+    const cats = ['c1', 'c2', 'c3'];
+    for (let i = 1; i <= 10; ++i) {
+      arr.push({
+        img: `https://loremflickr.com/320/240?lock=${i}`
+      });
+    }
+    arr.unshift({
+      img: `./transparent_image.png`
+    })
+    const b = LineUpJS.builder(arr);
+    b.rowHeight(240);
+    b.column(LineUpJS.buildStringColumn('img').pattern('${value}').renderer('image').width(320));
+    window.lineup = b.build(document.body);
+  };
+</script>
+
+</body>
+</html>
diff --git a/demo/transparent_image.png b/demo/transparent_image.png
diff --git a/src/builder/LineUpBuilder.ts b/src/builder/LineUpBuilder.ts
@@ -139,7 +139,7 @@ export default class LineUpBuilder {
    * height and padding of a row
    * @default 18 and 2
    */
-  rowHeight(rowHeight: number, rowPadding: number) {
+  rowHeight(rowHeight: number, rowPadding: number = 2) {
     this.options.rowHeight = rowHeight;
     this.options.rowPadding = rowPadding;
     return this;
@@ -149,7 +149,7 @@ export default class LineUpBuilder {
    * height and padding of an aggregated group in pixel
    * @default 40 and 5
    */
-  groupRowHeight(groupHeight: number, groupPadding: number) {
+  groupRowHeight(groupHeight: number, groupPadding: number = 5) {
     this.options.groupHeight = groupHeight;
     this.options.groupPadding = groupPadding;
     return this;