Tuesday, March 7, 2017

Materialize - Collections

The Materialize provides a special classes to represent various types of collections where a collection represents group of related information items.

S.N.	Class Name & Description
1	collection Set the div or ul container as collection.
2	collection-item

Materialize - Footer

The Materialize provides a special classes to represent various types of collections where a collection represents group of related information items.

S.N.	Class Name & Description
1	page-footer Set the div container as footer.
2	footer-copyright Set the div container as footer-copyright container.

Materialize - Form

Materialize has a very beautiful and responsive CSS for form designing. The following CSS are used:

S.N.	Class Name & Description
1	input-field Set the div container as input field container. Required.
2	validate Adds validation styles to an input field.

Materialize - Icons

Materialize supports the following popular icon libraries:

Font Awesome Icons
Google Material Icons
Bootstrap Icons

Materialize - Navbar

The Materialize provides various CSS classes to create a nice navigation bar in easy way. The below table mentions the available classes and their effects.

Materialize - Pagination

The Materialize provides various CSS classes to create a nice pagination bar in easy way. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	pagination Set the ul element as pagination component.

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of preloaders or progress bars. The below table mentions the available classes and their effects.

Materialize - Collapsible

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of accordions. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	collapsible Identifies element as an materialize collapsible component. Required for ul element.
2	collapsible-header Sets div as section header.
3	collapsible-body Sets div as section content container.
4	popout Creates a popout collapsible.
5	active Opens a section.
6	expandable Marks a collapsible component as expandable.
7	accordion Marks a collapsible component as accordion.

Following are the examples of using accordions in different ways.

Example

materialize_collapsible.htm

<html>
   <head>
      <title>The Materialize Collapsible Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container"> 
      <h4>Simple Accordion</h4>
      <ul class="collapsible" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      <h4>Popout Accordion</h4>
      <ul class="collapsible popout" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      <h4>Accordion with Preselected Section</h4>
      <ul class="collapsible" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header active"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>     
      <h4>Expandables</h4>
      <ul class="collapsible" data-collapsible="expandable">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>       
   </body>  
</html>

Result

Verify the result.

Materialize - Dialogs

The Materialize provides various special methods to show unobtrusive alerts to the users. Materialize provides a term toast for them. Following is the syntax to show a dialog as toast.

Materialize.toast(message, displayLength, className, completeCallback);

Where

Materialize - Dropdowns

The Materialize provides dropdown CSS class to make a ul element as a dropdown and add the id of the ul element to the data-activates attribute of the button or anchor element.The below table mentions the available classes and their effects.

Materialize - Tabs

The Materialize provides tabs CSS class to make a ul element as a tabs. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	tabs Identifies ul as an materialize tab component. Required for ul element.
2	active Make a tab active.

Following are the examples of using a tab.

Materialize - Waves

The Materialize uses Waves, an external library to create ink effect outlined in Material Design. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	waves-effect Put the wave effect on the control.
2	waves-light Put the wave effect as white colored.
3	waves-red Put the wave effect as red colored.
4	waves-green Put the wave effect as green colored.
5	waves-yellow Put the wave effect as yellow colored.
6	waves-orange Put the wave effect as orange colored.
7	waves-purple Put the wave effect as purple colored.
8	waves-teal Put the wave effect as teal colored.

Following are the examples of using a wave effects on buttons.

Example

materialize_waves.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Waves Effects Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
   </head>
   <body class="container"> 
   <h3>Waves Effects Demo</h3>
      <div class="collection waves-color-demo">
         <div class="collection-item">
      <code class=" language-markup">Default</code>
            <a href="#!" class="waves-effect btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-light</code>
            <a href="#!" class="waves-effect waves-light btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-red</code>
            <a href="#!" class="waves-effect waves-red btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-yellow</code>
            <a href="#!" class="waves-effect waves-yellow btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-orange</code>
            <a href="#!" class="waves-effect waves-orange btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-purple</code>
            <a href="#!" class="waves-effect waves-purple btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-green</code>
            <a href="#!" class="waves-effect waves-green btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-teal</code>
            <a href="#!" class="waves-effect waves-teal btn secondary-content">Click Me!</a>
         </div>
      </div>
   </body>
</html>

Result

Verify the result.

Waves Effects Demo

Default

waves-light waves-red waves-yellow waves-orange waves-purple waves-green waves-teal

পৃষ্ঠাসমূহ

Labels

Search Your Article

CS

Pageviews

Tuesday, March 7, 2017

Materialize - Collections

Materialize - Footer

Materialize - Form

Materialize - Icons

Materialize - Navbar

Materialize - Pagination

Materialize - Preloader

Materialize - Collapsible

Example

Result

Materialize - Dialogs

Materialize - Dropdowns

Materialize - Tabs

Materialize - Waves

Example

Result

Waves Effects Demo