Material Design Interview Questions
1 .
What is Materialize CSS?
Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present), Material Design is a language that combines the classic principles of successful design. Materialize UI components are mainly used to create innovative websites, web apps, android apps,..
2 .
What is Materialize Badges ?
Materialize CSS Badges can notify you that there are new or unread messages or notifications. You can add the new, badge classes to the badge to give it the background.
3 .
What are the classes of BreadCrumb in Materialize CSS?
Materialize CSS provides two classes for BreadCrumb :
nav-wrapper : It is used to set the nav component as breadcrumb/nav bar wrapper.
breadcrumb : It is used to set the anchor element as breadcrumb.
4 .
What are the utility classes in Materialize?
Materialize provides different utility classes that are given below:
 
Color utility classes : Examples: .red, .green, .grey etc.

Alignment utility classes : Examples: .valign-wrapper, .left-align, .right-align, .center-align, .left, .right etc.

Hiding Content utility classes as per device size : Examples: .hide, .hide-on-small-only, .hide-on-med-only etc.

Formatting utility classes : Examples: truncate, hoverable etc.
5 .
What are the classes to create responsive image and video in Materialize?
There are following classes to create responsive and video that are listed table:
 
responsive-img: This class is used to create an responsive image.
video-container: It is used to create responsive container. That has embedded videos.
responsive-video: It is used to create HTML5 videos responsive.
6 .
What is the class of BreadCrumb in Materialize?
Materialize provides two classes that are:
 
nav-wrapper: It is used to set the nav component as breadcrumb/nav bar wrapper.
breadcrumb: It is used to set the anchor element as breadcrumb.
7 .
What do you mean by Dialogs in materialize?
Materialize provides various method to show unremarkable alerts. It also provides a term toast form them. Following is given syntax:
 
Materialize.toast(message, displayLength, className, completeCallback);
Where
 
message: It is used to displayed Message to the user.
displayLength: Duration of the message after it will disappear.
className: Style class to be applied to the toast. For example, ’rounded’.
completeCallback: This Callback method to be called once toast is dismissed.
8 .
What Is Badge In Materialize Css? What Is The Use Of Badges Classes?
Materialize CSS Badges can notify you that there are new or unread messages or notifications. You can add the new, badge classes to the badge to give it the background.
 
The following classes of Badges are used in Materialize CSS:
 
badge: It identifies element as an MDL badge component.
 
new: It is used to add a new class to badge component.
9 .
What Are The Dropdown Classes In Materialize Css?
There are two types of dropdown classes in Materialize CSS:
 
dropdown-content: It Identifies HTML tag as an materialize dropdown component.
data-activates: It is id of the dropdown ul element.
10 .
How Can You Create A Pagination In Materialize CSS?
Materialize CSS Pagination is used to split out your long pages into shorter, easier to understand blocks.
pagination : It is used to set the ul element as a pagination component.

<div class="container">

    <ul class="pagination">
        <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        <li class="active"><a href="#!">1</a></li>
        <li class="waves-effect"><a href="#!">2</a></li>
        <li class="waves-effect"><a href="#!">3</a></li>
        <li class="waves-effect"><a href="#!">4</a></li>
        <li class="waves-effect"><a href="#!">5</a></li>
        <li class="waves-effect"><a href="#!">6</a></li>
        <li class="waves-effect"><a href="#!">7</a></li>
        <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
    </ul>

</div>​