chore(sample): add carousel samples

aurelia-ui-toolkits · Feb 3, 2016 · b398f93 · b398f93
1 parent 0d65adb
commit b398f93
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 1 deletion.
diff --git a/sample/src/main.js b/sample/src/main.js
@@ -7,6 +7,7 @@ export function configure(aurelia) {
         .useBox()
         .useButton()
         .useCard()
+        .useCarousel()
         .useCheckbox()
         .useCollapsible()
         .useColors()

diff --git a/sample/src/samples/media/carousel-slider.html b/sample/src/samples/media/carousel-slider.html
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col s12 m8">
+        <md-card md-title="Slider carousel">
+          <md-carousel md-slider="true" style="height: 400px;">
+            <md-carousel-item md-href="#one!" md-image="http://lorempixel.com/800/400/food/1"></md-carousel-item>
+            <md-carousel-item md-href="#two!" md-image="http://lorempixel.com/800/400/food/2"></md-carousel-item>
+            <md-carousel-item md-href="#three!" md-image="http://lorempixel.com/800/400/food/3"></md-carousel-item>
+            <md-carousel-item md-href="#four!" md-image="http://lorempixel.com/800/400/food/4"></md-carousel-item>
+          </md-carousel>
+        </md-card>
+    </div>
+    </div>
+
+    <div class="row">
+        <div class="col s12 m8">
+          <md-card md-title="Code Preview">
+            <div class="row">
+              <ul md-tabs class="z-depth-1">
+                <li md-waves="color: primary;" class="col"><a class="active" href="#html">Html</a></li>
+              </ul>
+              <div id="html" class="z-depth-1">
+                <au-code language="markup" url="samples/media/box-sample.html"></au-code>
+              </div>
+            </div>
+          </md-card>
+        </div>
+    </div>
+  </div>
+</template>
diff --git a/sample/src/samples/media/carousel-slider.js b/sample/src/samples/media/carousel-slider.js
@@ -0,0 +1 @@
+export class CarouselSlider { }
diff --git a/sample/src/samples/media/carousel.html b/sample/src/samples/media/carousel.html
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col s12 m8">
+        <md-card md-title="Basic carousel">
+          <md-carousel>
+            <md-carousel-item md-href="#one!" md-image="http://lorempixel.com/250/250/nature/1"></md-carousel-item>
+            <md-carousel-item md-href="#two!" md-image="http://lorempixel.com/250/250/nature/2"></md-carousel-item>
+            <md-carousel-item md-href="#three!" md-image="http://lorempixel.com/250/250/nature/3"></md-carousel-item>
+            <md-carousel-item md-href="#four!" md-image="http://lorempixel.com/250/250/nature/4"></md-carousel-item>
+          </md-carousel>
+        </md-card>
+    </div>
+    </div>
+
+    <div class="row">
+        <div class="col s12 m8">
+          <md-card md-title="Code Preview">
+            <div class="row">
+              <ul md-tabs class="z-depth-1">
+                <li md-waves="color: primary;" class="col"><a class="active" href="#html">Html</a></li>
+              </ul>
+              <div id="html" class="z-depth-1">
+                <au-code language="markup" url="samples/media/box-sample.html"></au-code>
+              </div>
+            </div>
+          </md-card>
+        </div>
+    </div>
+  </div>
+</template>
diff --git a/sample/src/samples/media/carousel.js b/sample/src/samples/media/carousel.js
@@ -0,0 +1 @@
+export class Carousel { }
diff --git a/sample/src/samples/media/index.js b/sample/src/samples/media/index.js
@@ -9,7 +9,9 @@ export class Index {
       { route: 'box-caption', moduleId: './box-caption', nav: true, title: 'Material Box (caption)' },
       { route: 'slider', moduleId: './slider', nav: true, title: 'Slider' },
       { route: 'slider-fullscreen', moduleId: './slider-fullscreen', nav: true, title: 'Slider (fullscreen)' },
-      { route: 'slider-api', moduleId: './slider-api', nav: true, title: 'Slider (API)' }
+      { route: 'slider-api', moduleId: './slider-api', nav: true, title: 'Slider (API)' },
+      { route: 'carousel', moduleId: './carousel', nav: true, title: 'Carousel (basic)' },
+      { route: 'carousel-slider', moduleId: './carousel-slider', nav: true, title: 'Carousel (slider)' }
     ]);
 
     this.router = router;