Search within TutorialsPark

MDL : Classes


How to use Material Design Lite Badges within your Document.


Material Design Lite : Classes

MDL Class Description
mdl-badge To Define a MDL Component Badge, is required
mdl-badge--no-background To create a transparent open circle effect on badge, its optional.
mdl-badge--overlap To create a badge that overlap with its container, its optional
data-badge="value" To assign a value of the badge.

Material Design Lite : Classes

MDL Class Description
mdl-button To Define a button as an MDL Component.
mdl-js-button To assign a MDL button behaviour.
none To create a flat button, default
mdl-button--raised To create a button with raised effect.
mdl-button--fab To create a standard sized fab button.
mdl-button--mini-fab To create a mini-fab button
mdl-button--icon To apply icon effects on buttons.
mdl-button--colored To apply colored effects , defined within materials.min.css
mdl-button--primary To apply primary color to buttons, defined within materials.min.css
mdl-button--accent To apply accent color to buttons, defined within materials.min.css
mdl-js-ripple-effect To create a ripple effect when clicked.

Material Design Lite : Classes

MDL Class Description
mdl-card To Define any div element as an MDL Card Component Container.
mdl-card--border To Add a Border within card sections.
mdl-shadow--Xdp To apply shadow with variable depth defined by value of X, X can be 2, 3, 4, 6, 8 or 16
mdl-card__title To Define the title container within any div
mdl-card__title-text To apply text charactersitics to the title of MDL card, H1-H6
mdl-card_subtitle-text To apply text charactersitics to the sub-title of MDL card
mdl-card__media To Define a div element as a media container
mdl-card__supporting-text To Define a div element as a container for supporting text.
mdl-card__actions To define a div element as a container of the action element

Material Design Lite : Navigation Layout Classes

MDL Class Description
mdl-layout To Define a div element as a Container of Navigation layout
mdl-js-layout To Assign a MDL behaviour to layout component.
mdl-layout__header To Define a Container of the Layout Header.
mdl-layout-icon To Set the icon of the menu, icon is hidden complete menu is visible.
mdl-layout__header-row To Create a Container of MDL header row
mdl-layout-title To Define the layout's title text.
mdl-layout-spacer To Insert a spacer within the layout.
mdl-navigation To Define a nav element as a container for navigation group.
mdl-navigation__link To Define an anchor as MDL Navigation link.
mdl-layout__drawer To a div element as a container for MDL layout drawer.
mdl-layout__content To Define a container of the layout content.
mdl-layout__header--scroll When applied, makes the header to scroll along with the content.
mdl-layout--fixed-header To Make the header visible, on small displays
mdl-layout--large-screen-only To Hide elements on smaller displays.
mdl-layout--small-screen-only To hide elements on large sized displays.
mdl-layout__header--waterfall To create a waterfall effect navigation bar with multiple header lines.
mdl-layout__header--transparent To make the navigation bar transparent.
mdl-layout__tab-bar To define a div element as a MDL tab bar.
mdl-layout__tab To Define an anchor element as a tab link
is-active To assign a tab as default active tab
mdl-layout__tab-panel To define a container as tab content panel
mdl-layout--fixed-tabs To define fixed tabs instead instead of scrollable tabs(default)

Material Design Lite : Navigation Layout Classes

MDL Class Description
mdl-grid To Define a div element as a Container of Navigation layout
mdl-cell To Assign a MDL behaviour to layout component.
mdl-grid--no-spacing To Define a Container of the Layout Header.
mdl-cell--N-col To Set the icon of the menu, icon is hidden complete menu is visible.
mdl-cell--N-col-desktop To Create a Container of MDL header row
mdl-cell--N-col-tablet To Define the layout's title text.
mdl-cell--N-col-phone To Insert a spacer within the layout.
mdl-cell--hide-desktop When used, hides grid cells displayed in desktop sized screen.
mdl-cell--hide-tablet Used to hide grid cells when displayed in tablet sized mode.
mdl-cell--hide-phone Used to hide grid cells when displayed in phone sized display.
mdl-cell--stretch When used, the cell is stretched vertically filling the parent.
mdl-cell--top To Align the grid cell to the top of the parent.
mdl-cell--middle To Align the grid cell to the middle of the parent
mdl-cell--bottom To Align the grid cell at the bottom of the parent

Material Design Lite : Tabs Classes

MDL Class Description
mdl-tabs To Define a div element as a Container for Tabs
mdl-js-tabs To assign MDL behaviour to Tab Container.
mdl-js-ripple-effect To To Apply a ripple effect while switching tabs
mdl-tabs__tab-bar A Container for tab Headings(links)
mdl-tabs__tab To set a link as an MDL tab launcher
is-active To denote the currently active tab.
mdl-tabs__panel To Define an a container as a tab panel

Material Design Lite : Footer Classes

MDL Class Description
mdl-mega-footer To Define a footer element as a Container of mega-footer
mdl-mega-footer__left-section To define a left section container of the footer
mdl-mega-footer__top-section To Define a top section container of the footer.
mdl-mega-footer__social-btn To create a styled square within a mega footer for social buttons.
mdl-mega-footer__right-section To Create a Footer Container for Right Section
mdl-mega-footer__middle-section To Define a Footer Container for Middle Section
mdl-mega-footer__link-list To Define an unordered list as a vertical(drop-down) list
mdl-mega-footer__bottom-section When used, the cell is stretched vertically filling the parent.
mdl-logo A Container for the Heading or Logo of the Website.
mdl-mini-footer Used to Define a container a for mini-footer.
mdl-mini-footer__left-section A Container to create the left section of the footer.
mdl-mini-footer__link-list To Create an Unordered list as a horizontal(inline) list.

Material Design Lite : Progress Bar Classes

MDL Class Description
mdl-progress To create a container for progress bar.
mdl-js-progress To assign MDL behaviour to progress bar component
mdl-progress-indeterminate To apply animation effect to MDL progress bar.

Material Design Lite : Progress Bar Classes

MDL Class Description
mdl-spinner To create a container for progress bar.
mdl-js-spinner To assign MDL behaviour to progress bar component
is-active To apply animation effect to MDL progress bar.
mdl-spinner--single-color To create a spinner with only the primary palette instead of multiple colors

Material Design Lite : Progress Bar Classes

MDL Class Description
mdl-spinner To create a container for progress bar.
mdl-js-spinner To assign MDL behaviour to progress bar component
is-active To apply animation effect to MDL progress bar.
mdl-spinner--single-color To create a spinner with only the primary palette instead of multiple colors

Material Design Lite : Progress Bar Classes

MDL Class Description
mdl-button To create a container for progress bar.
mdl-button--icon To assign MDL behaviour to progress bar component
material-icons To apply animation effect to MDL progress bar.
mdl-menu To Create a Container for MDL Menu Component.
mdl-js-menu To Assign MDL behaviour to the menu bar
mdl-menu__item To Define each mdl option on the menu popup.
mdl-js-ripple-effect To apply a ripple effect to the option links within the menu
mdl-menu--top-left To position the menu above the button, and aligns the left edge of the menu with the button
mdl-menu--bottom-left To position the menu below the button, and aligns the left edge of the menu with the button
mdl-menu--top-right To position the menu above the button, and aligns the right edge of the menu with the button
mdl-menu-bottom-right To position the menu below the button, and aligns the right edge of the menu with the button

Material Design Lite : Slider Classes

MDL Class Description
mdl-slider An Input element as MDL Component.
mdl-js-slider To assign MDL behaviour to MDL Slider component

Material Design Lite : Checkbox Classes

MDL Class Description
mdl-checkbox To create a Check box Container
mdl-js-checkbox To Assign MDL behaviour to Checkbox
mdl-checkbox__input To create a checkbox with basic MDL Features
mdl-checkbox__label To Create a Label for Checkbox
mdl-js-ripple-effect To apply a ripple effect when clicked

Material Design Lite : Radio Button Classes

MDL Class Description
mdl-radio To create a radio button Container
mdl-js-radio To Assign MDL behaviour to radio button
mdl-radio__button To create a radio button with basic MDL Features
mdl-radio__label To Create a Label for Radio Button
mdl-js-ripple-effect To apply a ripple effect when clicked

Material Design Lite : Icon Toggle Classes

MDL Class Description
mdl-icon-toggle To create a icon toggle Container
mdl-js-icon-toggle To Assign MDL behaviour to icon toggle
mdl-icon-toggle__input To create a icon toggle with basic MDL Features
mdl-icon-toggle__label To Create a Label for Icons
mdl-js-ripple-effect To apply a ripple effect when clicked

Material Design Lite : Switch Classes

MDL Class Description
mdl-switch To create a MDL switch container
mdl-js-switch To Assign MDL behaviour to switch
mdl-switch__input To create a switch with basic MDL Features
mdl-switch__label To Create a Label for switch
mdl-js-ripple-effect To apply a ripple effect when clicked

Material Design Lite : Data-Table Classes

MDL Class Description
mdl-data-table To create a MDL Table container
mdl-js-data-table To Assign MDL behaviour to Tables
mdl-data-table--selectable To create table with individual selectable rows
mdl-data-table__cell--non-numeric To apply text formatting to data cell
none The default table cell formatting for numeric values

Material Design Lite : MDL Textfield Classes

MDL Class Description
mdl-textfield To create a MDL textfield container
mdl-js-textfield To Assign basic MDL behaviour to text input
mdl-textfield__input To define a textfield input
mdl-textfield__label To Define an element with input textfield
mdl-textfield--floating-label To apply a floating label effect .
mdl-textfield__error To create an error message for MDL text field
mdl-textfield--expandable To create an Expandable MDL text field Container
mdl-button To Set a Label as MDL Icon Button
mdl-js-button To assign basic behaviour to MDL icon container
mdl-button--icon To Define an MDL icon container
mdl-input__expandable-holder To Define a container for expandable MDL component

Material Design Lite : Tooltip Classes

MDL Class Description
mdl-tooltip To create a MDL tooltip container
mdl-tooltip-large To Create large MDL tooltip Container