Material notifications demos

framework7io · Jun 24, 2015 · fc551e0 · fc551e0
1 parent 48ada66
commit fc551e0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 28 deletions.
diff --git a/kitchen-sink-material/jade/notifications.jade b/kitchen-sink-material/jade/notifications.jade
@@ -10,12 +10,12 @@
           i.icon.icon-bars
   .page-content
     .content-block
-      p Framework7 comes with simple Notifications component that allows you to show some useful messages to user.
+      p Framework7 comes with simple Notifications component that allows you to show some useful messages to user and request basic actions. Such notification are also called Snackbars & Toasts in Android 
       p
-        a(href="#").button.button-raised.ks-notification-simple Default notification
+        a(href="#").button.button-raised.ks-notification-1 Single-line message
       p
-        a(href="#").button.button-raised.ks-notification-full Full-layout notification
+        a(href="#").button.button-raised.ks-notification-2 Multi-line message
       p
-        a(href="#").button.button-raised.ks-notification-custom With custom image
+        a(href="#").button.button-raised.ks-notification-3 With custom button
       p
-        a(href="#").button.button-raised.ks-notification-callback With callback on close
+        a(href="#").button.button-raised.ks-notification-4 With callback on close
diff --git a/kitchen-sink-material/js/kitchen-sink.js b/kitchen-sink-material/js/kitchen-sink.js
@@ -369,34 +369,32 @@ myApp.onPageInit('infinite-scroll', function (page) {
 
 /* ===== Notifications Page ===== */
 myApp.onPageInit('notifications', function (page) {
-    $$('.ks-notification-simple').on('click', function () {
+    $$('.ks-notification-1').on('click', function () {
         myApp.addNotification({
-            title: 'Framework7',
-            message: 'This is a simple notification message with title and message'
+            message: 'Simple message'
         });
     });
-    $$('.ks-notification-full').on('click', function () {
+    $$('.ks-notification-2').on('click', function () {
         myApp.addNotification({
-            title: 'Framework7',
-            subtitle: 'Notification subtitle',
-            message: 'This is a simple notification message with custom icon and subtitle',
-            media: '<i class="icon icon-f7"></i>'
+            message: 'Multi-line message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in magna nisi.',
         });
     });
-    $$('.ks-notification-custom').on('click', function () {
+    $$('.ks-notification-3').on('click', function () {
         myApp.addNotification({
-            title: 'My Awesome App',
-            subtitle: 'New message from John Doe',
-            message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci. Aliquam sed molestie risus, quis tincidunt dui.',
-            media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">'
+            message: 'Nice yellow button',
+            button: {
+                text: 'Click me',
+                color: 'yellow'
+            }
         });
     });
-    $$('.ks-notification-callback').on('click', function () {
+    $$('.ks-notification-4').on('click', function () {
         myApp.addNotification({
-            title: 'My Awesome App',
-            subtitle: 'New message from John Doe',
-            message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci. Aliquam sed molestie risus, quis tincidunt dui.',
-            media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">',
+            message: 'Close me to see Alert',
+            button: {
+                text: 'Close',
+                color: 'lightgreen'
+            },
             onClose: function () {
                 myApp.alert('Notification closed');
             }

diff --git a/kitchen-sink-material/notifications.html b/kitchen-sink-material/notifications.html
@@ -9,11 +9,11 @@
   </div>
   <div class="page-content">
     <div class="content-block">
-      <p>Framework7 comes with simple Notifications component that allows you to show some useful messages to user.</p>
-      <p><a href="#" class="button button-raised ks-notification-simple">Default notification</a></p>
-      <p><a href="#" class="button button-raised ks-notification-full">Full-layout notification</a></p>
-      <p><a href="#" class="button button-raised ks-notification-custom">With custom image</a></p>
-      <p><a href="#" class="button button-raised ks-notification-callback">With callback on close</a></p>
+      <p>Framework7 comes with simple Notifications component that allows you to show some useful messages to user and request basic actions. Such notification are also called Snackbars & Toasts in Android </p>
+      <p><a href="#" class="button button-raised ks-notification-1">Single-line message</a></p>
+      <p><a href="#" class="button button-raised ks-notification-2">Multi-line message</a></p>
+      <p><a href="#" class="button button-raised ks-notification-3">With custom button</a></p>
+      <p><a href="#" class="button button-raised ks-notification-4">With callback on close</a></p>
     </div>
   </div>
 </div>