Tag Archives: materialize framework tutorial

Materialize Switches


Materialize Switches : Switches are basically used to show the On/Off state. Materialize uses checkboxes for switches it sets checkbox’s value to 1 when we click on “on” level, and it sets checkbox’s value to 0 when we click on “Off” level. It is very simple to create switches in Materialize framework. Here in tutorial we are going to explain how you can create switches in Materialize. You can also use our online editor to edit and run the code online.


Materialize Switches Example

Let us first create a very basic and simple switch. First create a div with class=”switch” and then add label tag and inside the label tag add input type=”checkbox” and a span with class=”lever”.

Materialize Switches Example:

Try it »

If you run the above example it will produce output something like this –

Materialize Switches Example:

Materialize Checkboxes


Materialize Checkboxes : Checkboxes are used to enable users to select one or more than options from the given options. Materialize provides classes to create checkboxes with cool look and feel. Here in this tutorial we are going to explain how you can create checkboxes in Materialize framework. You can also use our online editor to edit and run the code online.


Materialize Checkboxes Example

Let create a very basic and default checkbox in Materialize –

Materialize Checkboxes | Example:

Try it »

If you run the above example it will produce the output something like this –

Materialize Checkboxes | Example:

Learn More

Let us have some More example and demo about the Matrialize Checkboxes.


Filled In Checkbox

Class filled-in is used to create filled in Checkbox. Here is an example of filled in checkbox –

Materialize Filled In Checkbox Example

  
  

Try it »

The above example will give output something like this –

Materialize Filled In Checkbox

Disabled Checkbox

To create disabled checkbox just add disabled=”disabled” simply as below –

Materialize Disabled Checkbox Example

  
  

Try it »

If you run the above example it will produce output something like this –

Disabled Checkbox example

Materialize Radio Button


Materialize Radio Button: Radio button are basically used to select one option from the given option. It is very simple to create radio button in materialize framework. Here in this tutorial we are going to explain how you can create radio buttons in materialize. You can also use our online demo run and see the output.


Materialize Radio Button Example

Let us create simple radio buttons-

Materialize Radio Button Example:

 

Try it »

In the above example we have created simple radio button which allows user to select gender from the male and female option. If you run the above example it will produce output something like this –

Materialize Radio Button

Radio Buttons With Gap

If you want to add gap inside the radio button, just add class=”with-gap” to the radio button. Here a simple example of radio buttons with gap-

Materialize Radio Button Gap Example:

 

Try it »

If you run the above example it will produce the output of radio buttons with gap as below-

Materialize Radio Button With Gap Example

Materialize Select


Materialize Select Dropdown : Select allows user to select one or more options from the dropdown. To create select box in materialize just wrap the select options with the div having class input-field, and initialize it in JavaScript. Here in this tutorial we are going to explain how you can use materialize pre-defined classes to create dropdown options.
You can also use our online editor to edit and run the code online.


Materialize Select Box Example

Let us create a simple select dropdown in materialize framework-

Materialize Select Dropdown | Select Box | Example:

Try it »

Note– This is jQuery Plugin so don’t forget to initialize it.

If you run the above example it will produce the output something like this –

Materialize Select Dropdown Example

Muliple Select

To create Muli selct in Materialize just add the class multiple to the select tag simply as below –

Materialize Muliple Select Example

   

Try it »

If you run the above example it will produce the output something like this –

Materialize Multi Select Example

Add Icons | Images To Select Options | Left | Right

The attribute data-icon is used to add icons or images to the options, you can add position left or right for the icon or images. If you want to add circle images then add class circle to the image. Here is a simple example of select dropdown with icons & images –

Materialize Muliple Select Example

   

Try it »

Disabled Select Dropdown

To make select dropdown disable just add the class disabled to select element simply as below-

Disabled Select Dropdown Example

   

Try it »

If you run the above example it will produce the output something like this –

Materialize disabled dropdown

Update | Destroy Select Dropdown

Sometimes we need to update or destroy the select dropdown in materialize which can be done simply as in below example-

Update | Destroy Select Box jQuery Example

  
 

Materialize Forms


Materialize Forms– Forms are basically used to get the user input. Materialize provides the various form input with smooth transition and smoothness. Here in this tutorial we are going to explain how you can create materialize forms. You can also use our online editor to edit and run the code online.


Materialize Forms Example

Materialize provides inbuilt classes to create form inputs, to show error/success messages, adding icons, changing colors and to add date pickers etc. Let us go step by step to understand the materialize
form inputs and elements.

Input Fields

Input fields are basically used to accept the user inputs. To create input field in Materialize wrap the input and label with div having class .input-field. In case of HTML 5 validation It adds the valid and invalid class as per the validation.

Now let us create a simple example form containing the basic form input fields.

Materialize Input Fields Example:

Try it »

Note : If you don’t want the red/green validation states remove the validate from the form inputs.

If you run the above example it will produce the output something like this –

Materialize Forms Input Example

Prefilling Text Inputs

Sometimes we need to add some default(Prefilled) value in input field, you can do this by simply adding value attribute. Here is an example of Prefilling Text –

Prefilling Text Inputs Example:

Try it »

If you run the above example it will produce the output something like this –

Materialize Input Add Default Value

Icon Prefixes | Add Icons To Input Field

Just add a icon before the form input field and add prefix class. Here is an example of Adding icons to input field in Materialize –

You can add –

How to Add Icons to input Fields in Materialize ?

   
phone

Try it »

If you run the above example it will produce the output something like this –

Materialize Add Icons to the Input Field

Materialize Textarea

Add class materialize-textarea to textarea and wrap this textarea with a div having class input-field simply as below –

Materialize Textarea Example

   

Try it »

If you run the above example it will produce the textarea with materialize effects.


Learn More

Let us have some More example and demo about the Materialize Forms.


Custom Error | Success Messages

Sometimes we need customization in error or success messages, we can add custom error or success messges by simply adding the attribute
data-error and data-success to input labels. Here is an example of Custom error and messages –

How to Add Custom Error | Success Messages in Materialize ?

    

Try it »

If you run the above example it will produce the output something like this –

Add custom error message in Materialize form input field

Materialize Footer


Materialize Footer – Footer is an important part of any website, it contains useful information and navigation. Here in this tutorial we are going to explain how you can create Footer in Materialize. You can also use our online editor to edit and run the code online.


Materialize Footer Example

Let us create a simple footer in Materialize-

Materialize Footer Example:

  

Try it »

If you run the above example it will produce output something like this –

Materialize Footer Example

Sticky Footer

Sometimes we need sticky footer which always stays on the bottom of the page. To create the sticky footer add the following css –

Materialize Sticky Example

   body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }                                                                                                                                                                                                                   

Materialize Collections


Materialize Collections MaterializeCSS Collections allows us to group list objects together and display them. Almost in every application, we need to display data in lists, the collection provides readymade rich collection with various styles which can be used easily. Here in this tutorial, we are going to explain how you can create Collections in MaterializeCSS Framework. You can use our online editor to edit and run the code online.


Materialize Collections Example- MaterializeCSS

Let us go one by one to understand how collections work with example & demo. There are following types of collections available in Materialize Framework-

  • 1. Basic
  • 2. Links
  • 3. Headers
  • 4. Secondary Content
  • 5. Avatar Content
  • 6. Dismissable Content

Now let us go one by one to understand the materialize collections.

Basic

Add collection class to ul and collection-item class to the list item simply as below –

Materialize Collection Example: Basic

    
  • Item 1
  • Item 2
  • Item 3
  • Item 4

If you run the above example it will produce the output something like this –

Materialize Collection Example: Basic

Links

You can create Link Collection simply as below –

Materialize Collection Example: Link

    
                                                                                                                                                                                                                                      

If you run the above example it will generate output something like this –

Materialize Collections Example

Header

To create Header in Collection add class with-header to ul and collection-header to li simply as below –

Collection With Example

    
  • Header Item
  • Item 1
  • Item 2
  • Item 3
  • Item 4

If you run the above example it will produce output something like this –

Materialize Collections Header Example

Secondary Content

You can add secondary content simply as below –

Secondary Content With Example

    
                                                                                                                                                                                                                                      

If you run the above example it will produce the output something like this –

Add Secondary Content in Materialize Collection

Avatar Content

Here is an example to create Avatar Content –

Avatar Content Example

   
                                                                                                                                                                                                                                      

The output of the above example will be –

Avatar Content Example

Dismissable Content

You can create Dismissable content just add the class dismissable the items simply as below –

Dismissable Content With Example

    
                                                                                                                                                                                                                                      

Learn More


Let us have look over some more important examples.

Bullet List

In Defualt collection bullet points are removed in MaterializeCSS framework still if you need bulleted List you can add your custom class to make it bullet list.

Bullet List Example:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Try it »

Materialize Chips


Materialize Chips Example: Chips are basically small blocks which are used to represent the small piece of information. Chips are used basically for tags or contacts. Class “chips” is used to define chips. It is very easy to create chips in MaterializeCss framework. Here in this tutorial we are going to explain how you can create chips in Materialize framework. You can also use our online editor to edit and run the code online.


Materialize Chips Example – MaterializeCss

There are basically two types of Chips in MaterializeCss-

  • Contacts
  • Tags

Contacts

To create contact chip just wrap image by div container and add class “chip” to the div. Here is an example of contact chip-

Materialize Contact Chip Example:

Contact Chip David

Try it »

If you run the above example it will produce the output something like this –

Materialize Chips Example: Contact Chip

Tags

Create div with class chip add tag name and close icon simply as below –

Materialize Tag Chip Example:

 
Tag Name close

Try it »

We can add close button in chips using class close material-icons. When you click on the close icon chip will be automatically closed. If you run the above example it will produce the output something like this –

Materialize Tag Chip Example

Learn More

Let us Learn More about the Materialize Chips.


JavaScript Plugin Usage

Let us create dynamic Chips using JavaScript Plugin.

Materialize Tag Chip JavaScript Dynamic Example:

 

Try it »

If you run the above example it will produce output something like this –

Materialize Tag Chip JavaScript Dynamic Example & Demo Online

Options

Following Options are available in jQuery Plugin-

  • data(array): You can use this to set the chip data.
  • placeholder(string): This is used to show the primary placeholder for Adding tags.
  • secondaryPlaceholder(string): This is used to show second placeholder when adding additional tags
  • autocompleteData(object): This is used to set the autocomplete data.
  • autocompleteLimit(int): You can use this to set the autocomplete Limit.

Events

  • chips.add : This method is triggered when a chip is added.
  • chips.delete : This method is triggered when a chip is deleted.
  • chips.select : This method is triggered when a chip is selected.

Now Let us create example to understand the above events –

Materialize Chips Add Event

Here is an example of add event in Materialize Chips. This event will be called when you add a tag in chip –

Materialize Chips Add Event Example:

     $('.chips').on('chip.add', function(e, chip){
      alert("You Have added chip");
     });                                                                                                                                                                                                                                      

Try it »

Materialize Chips Delete Event

This event will be called when you delete a chip –

Materialize Chips delete tag Event Example:

     $('.chips').on('chip.delete', function(e, chip){
      alert("Do you want to delete this chip");
     });
                                                                                                                                                                                                                                      

Try it »

Materialize Chips Select Event

This event will be called when you select a chip –

Materialize Chips select chip | tag Example:

     $('.chips').on('chip.select', function(e, chip){
      alert("You Have Selected chip");
     });
                                                                                                                                                                                                                                      

Try it »

Methods

If you want to get the stored data of chip you can use the following method –

Materialize Get Chip Data Example:

     var chip_data = $('.chips-initial').material_chip('data');                                                                                                                                                                                                                                      

Materialize Breadcrumb


Materialize Breadcrumb Breadcrumbs are basically used to display the current location. In this tutorial we are going to explain how you can create breadcrumbs in Materialize framework.
You can also use our online editor to edit and run the code online.


Materialize Breadcrumb Example

Class nav-wrapper and breadcrumb is used to create Breadcrumb in Materialize. Here is a simple example of Breadcrumb-

Materialize Breadcrumb | Example:

  

Try it »

In the above example we have created a simple breadcrumb with the current location “codeigniter”, which means you are on codeigniter page and it is under PHP category and Home points home page.

If you run the above example it will produce the output something like this –

Materialize Breadcrumb Example