Material Component Documentation

Cards

Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/cards/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-cards.html

Chips

Chips can be used for various types of entities, including brief information, free form text, or short title. Chips may also contain icons or photos. Chips can be deletable. Use <a> s or <button> s to create actionable chips with active, focus and hover states by adding .chip-action.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/chips/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-chips.html

Dialogs

Elevation & Shadow

All the available elevation and shadow variables are defined in material-extended / variables / _elevation-shadow.scss. This page summarises the default elevation and shadow values used by Material components.

Material also provides utility classes to quickly add or remove a shadow for any componenet/element.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/elevation-and-shadows/
Elevation and Shadow https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-elevation-shadows.html/#material-elevation-shadows

Expansion Panels

Expansion panels are best used for lightweight editing of an element. A collapsed panel displays summary information. Upon selecting the collapsed panel, it expands to display the full expansion panel, allowing users to add or edit information. An expansion panel can stand alone. An expansion panel can also be connected to a larger surface, such as a card.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/expansion-panels/
Exapnsion Panels https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-expansion-panels.html/#material-expansion-panels
Exapnsion Panels Usage https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-expansion-panels.html/#material-exapnsion-usage

Icons

You can download material icons directly from the this page. You can change Icons' properties like size, color.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/icons
Icons https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-icons.html/#material-icons

Menus appear upon interaction with a action, button, or other control. They display a list of choices, with one choice per line.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/menu
Behaviour & Type https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-menu.html

The navigation drawer contains the navigation destinations for your app or site. Material provides some basic styles for a set of components that are normally used in a navigation drawer such as headings and navs. A permanent navigation drawer is always visible at the same elevation as the content.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/navigation-drawer/
Navigation Drawer https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-navigation.html/#material-navigation
Navigation Drawer with Variations https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-navigation.html/#material-navigation-variations
Permanent Drawer https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-navigation.html/#material-navigation-permanent

Progress

Progress indicators are visual indications of an app loading content. When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/progress/
Circular Progress https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-progress.html/#material-progress-circular
Linear Progress https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-progress.html/#material-progress-linear

Selection Controls

Selection controls allow the user to select options. Three types of selection controls are covered in this guidance:

  • Checkboxes allow the selection of multiple options from a set.
  • Radio buttons allow the selection of a single option from a set.
  • Switches allow a selection to be turned on or off.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/selection-controls/
Selection Controls https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-selection-controls.html

Tabs

Tabs enable content organization at a high level, such as switching between views. Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.

Referrals :

Type URL
Material Link http://daemonite.github.io/material/docs/4.1/material/tabs/
Fixed Tabs https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-tabs.html/#material-fixed-tabs
Scrollable Tabs https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/material-component-tabs.html/#material-scroll-tabs