diff --git a/auto-init.html b/auto-init.html index f8ff8ae..dc520ca 100644 --- a/auto-init.html +++ b/auto-init.html @@ -20,9 +20,7 @@

Initialization

- 

-  M.AutoInit();
-
+ 
M.AutoInit();
diff --git a/buttons.html b/buttons.html index 6596638..8bd828c 100644 --- a/buttons.html +++ b/buttons.html @@ -11,35 +11,32 @@

There are main button types described in material design - the elevated button, the filled, text and floating button.

+ Standard Button
-

Filled (standard)

+

Filled (Standard)

The filled buttons communicates high emphasized actions. This is the Stadard Button Design. You can add the class filled to the button to provide this style. This should be the main Actions on a Page, so be carful. A good rule of thumb is to add just one primary action per page or field of view.

- Standard Button - Create - addCreate - editUpdate +
+ Create + addCreate + editUpdate + 
           Copied!
           content_copy
-          
-
-<a class="btn">Standard Button</a>
-<a class="btn filled">Create</a>
-<a class="btn filled icon-left">
+<code class="language-markup copiedText"><xmp><a class="btn">Standard Button</a>
+<a tabindex="0" class="btn filled">Create</a>
+<a tabindex="0" class="btn filled icon-left">
   <i class="material-icons">add</i>Create
 </a>
-<a class="btn filled icon-right rounded waves-effect waves-light">
+<a tabindex="0" class="btn filled icon-right rounded waves-effect waves-light">
   <i class="material-icons">edit</i>Update
-</a>
-
-
-
+
@@ -49,20 +46,22 @@

Tonal

additional Actions next to the primary actions.

- Create - addCreate - addCreate +
+ Create + addCreate + addCreate + 
           Copied!
           content_copy
           
 
-<a class="btn tonal">Create</a>
-<a class="btn tonal icon-left">
+<a tabindex="0" class="btn tonal">Create</a>
+<a tabindex="0" class="btn tonal icon-left">
   <i class="material-icons">add</i>Create
 </a>
-<a class="btn tonal icon-right waves-effect waves-light">
+<a tabindex="0" class="btn tonal icon-right waves-effect waves-light">
   <i class="material-icons">add</i>Create
 </a>
 
@@ -73,20 +72,22 @@ 
Tonal

               
Outlined

               
The outlined button communicates a medium emphasized action. Just add the class outlined to the button.

 
-              Create
-               addCreate 
-               addCreate 
+              
 
               
           Copied!
           content_copy
           
 
-<a class="btn outlined">Create</a>
-<a class="btn outlined icon-left">
+<a tabindex="0" class="btn outlined">Create</a>
+<a tabindex="0" class="btn outlined icon-left">
   <i class="material-icons">add</i>Create
 </a>
-<a class="btn outlined icon-right waves-effect waves-light">
+<a tabindex="0" class="btn outlined icon-right waves-effect waves-light">
   <i class="material-icons">add</i>Create
 </a>
 
@@ -100,26 +101,29 @@ 
Elevated

                 The elevated button is a tonal button with a shadow. This button that signify medium emphazied actions and seek to give depth to a mostly flat page. Try to
                 only use shadows when absolutely neccessary, to prevent shadow creep. Also keep in mind that on darker backgrounds the shadows are not really good visible.
               

-              Create
-               addCreate 
-               addCreate 
-              Create
-              addCreate
+
+              
 
               
           Copied!
           content_copy
           
 
-<a class="btn elevated">Create</a>
-<a class="btn elevated">
+<a tabindex="0" class="btn elevated">Create</a>
+<a tabindex="0" class="btn elevated">
   <i class="material-icons left">add</i>Create
 </a>
-<a class="btn elevated">
+<a tabindex="0" class="btn elevated">
   <i class="material-icons right">add</i>Create
 </a>        
-<a class="btn elevated rounded">Create</a>
-<a class="btn elevated rounded"><i class="material-icons">add</i>Create</a>
+<a tabindex="0" class="btn elevated rounded">Create</a>
+<a tabindex="0" class="btn elevated rounded"><i class="material-icons">add</i>Create</a>
@@ -131,9 +135,11 @@

Text

modal so there are not too many overlapping shadows.

- Create - - addCreate +
+ Create + + addCreate + 
           Copied!
@@ -152,6 +158,7 @@ 
Text
+ +

Helpers

@@ -243,27 +251,24 @@

Small

Disabled

This style can be applied to all button types

- Button - Button - Button - - add - +
+ Button + Button + Button + + add + + 
           Copied!
           content_copy
-          
-
-<a class="btn-large disabled">Button</a>
+<code class="language-markup copiedText"><xmp><a class="btn-large disabled">Button</a>
 <a class="btn disabled">Button</a>
 <a class="btn-flat disabled">Button</a>
 <a class="btn-floating disabled">
   <i class="material-icons">add</i>
-</a>
-
-
-
+
diff --git a/carousel.html b/carousel.html index 0b724f2..311c38c 100644 --- a/carousel.html +++ b/carousel.html @@ -161,9 +161,7 @@

Methods

               Copied!
               content_copy
-              
-  var instance = M.Carousel.getInstance(elem);
-              
+              var instance = M.Carousel.getInstance(elem);
@@ -177,10 +175,10 @@
Arguments

Integer (optional): How many times the carousel slides.

- 

-instance.next();
+              
+instance.next();
 instance.next(3); // Move next n times.
-      

+
.prev(); @@ -193,10 +191,9 @@
Arguments

Integer (optional): How many times the carousel slides.

- 

-instance.prev();
+              
instance.prev();
 instance.prev(3); // Move previous n times.
-      

+
.set(); @@ -204,18 +201,15 @@

Move carousel to nth slide

Arguments

Integer: Index of slide.

- 

-instance.set();
+              
instance.set();
 instance.set(3); // Set to nth slide.
-      

+
.destroy();

Destroy plugin instance and teardown

- 

-instance.destroy();
-
+ 
instance.destroy();
diff --git a/dropdown.html b/dropdown.html index f310576..833c5cd 100644 --- a/dropdown.html +++ b/dropdown.html @@ -13,11 +13,7 @@

Add a dropdown list to any button. Make sure that the - data-target attribute matches the id in the - -

<ul></ul> - - tag. You can add a divider with the + data-target attribute matches the id in the ul tag. You can add a divider with the <li class="divider"></li> @@ -47,9 +43,7 @@ 
           Copied!
           content_copy
-          
-
-<!-- Dropdown Trigger -->
+<code class="language-markup copiedText"><xmp><!-- Dropdown Trigger -->
 <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
 <!-- Dropdown Structure -->
 <ul id='dropdown1' class='dropdown-content'>
@@ -60,9 +54,7 @@
   <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
   <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
 </ul>
-
-          
-
+
@@ -71,15 +63,13 @@

Initialization

           Copied!
           content_copy
-          
-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.dropdown-trigger');
-    var instances = M.Dropdown.init(elems, {
-      // specify options here
-    });
+
+document.addEventListener('DOMContentLoaded', function() {
+  var elems = document.querySelectorAll('.dropdown-trigger');
+  var instances = M.Dropdown.init(elems, {
+    // specify options here
   });
-          
-
+});
@@ -237,17 +227,16 @@

Examples

-            
-  document.addEventListener('DOMContentLoaded', function() {
-    var elems = document.querySelectorAll('.dropdown-trigger')[0];
-    var instances = M.Dropdown.init(elems, {
-      // the dropdown is aligned to left
-      alignment: 'left',
-      // enabled for example to be visible
-      constrainWidth: false,
-    });
-  });
-
+ +document.addEventListener('DOMContentLoaded', function() { + var elems = document.querySelectorAll('.dropdown-trigger')[0]; + var instances = M.Dropdown.init(elems, { + // the dropdown is aligned to left + alignment: 'left', + // enabled for example to be visible + constrainWidth: false, + }); +});
@@ -258,34 +247,24 @@

Methods

               Copied!
               content_copy
-              
-    var instance = M.Dropdown.getInstance(elem);
-              
+              var instance = M.Dropdown.getInstance(elem);
.open();

Open dropdown.

- 

-  instance.open();
-
+ 
instance.open();
.close();

Close dropdown.

- 

-  instance.close();
-
+ 
instance.close();
.recalculateDimensions();

While dropdown is open, you can recalculate its dimensions if its contents have changed.

- 

-  instance.recalculateDimensions();
-
+ 
instance.recalculateDimensions();
.destroy();

Destroy plugin instance and teardown

- 

-  instance.destroy();
-
+ 
instance.destroy();
diff --git a/footer.html b/footer.html index 0897e86..9408d1a 100644 --- a/footer.html +++ b/footer.html @@ -13,24 +13,20 @@