Comparison of Material Design implementations

This page contains general information about Google's Material Design implementations.

Implemented components

Please note that some components in the following table are not in the official material design specifications.

ComponentsPolymer ProjectAngular MaterialMaterializeMaterial-UIMaterial Design Lite
Badges??Yes [cite]Yes [cite]Yes [cite]
Bottom sheets [cite]?Yes [cite]Partial [lower-alpha 1] [cite]Yes [cite]
Buttons [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Buttons: Floating action button [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Buttons: Icon button [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Cards [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]Yes
Chips [cite]?Yes [cite]Yes [cite]Yes [cite]
CollapsiblesYes [cite]?Yes [cite]?
Content?Yes [cite]??
Data tables [cite]?Yes [cite]Yes [cite]Yes [cite]
Dialogs [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Dividers [cite]?Yes [cite]Yes [cite] Yes [cite]
File input??Yes [cite]?
Footer??Yes [cite]?
Gestures [cite]?Partial [cite]??
Grid lists [cite]?Yes [cite]?Yes [cite]?
Icons [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Image slider??Yes [cite]?
Ink effect [cite]Yes [cite]?Yes [cite]Yes [lower-alpha 2]
Lists [cite]?Yes [cite]Yes [cite]Yes [cite]
Lists: Controls [cite]?Yes [cite]Yes [cite]Yes [cite]
Menus / Select / Dropdown [cite]Yes [cite]Yes [cite]Yes [cite] [cite]Yes [cite] [cite]
Navigation drawer / Sidenav [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Navigational transitions: Parent to child [cite]??Yes [cite]??
Pickers: Date picker [cite]?Partial [cite]Partial [cite]Yes [cite]
Pickers: Time pickers [cite]??Yes [cite]Yes [cite]
Progress & activity [cite]Yes [cite] [cite]Yes [cite] [cite]Yes [cite]Yes [cite]
Pushpin??Yes [cite]??
Pagination??Yes [cite]??
Selection controls: Checkbox [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Selection controls: Radio button [cite]Yes [cite] [cite]Yes [cite]Yes [cite]Yes [cite]
Selection controls: Switch [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Sliders [cite]Yes [cite]Yes [cite]Partial [lower-alpha 3] [cite]Yes [cite]
Snackbars & toasts [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
ScrollFire??Yes [cite]??
Scrollspy??Yes [cite]??
Subheaders [cite]?Yes [cite]?Yes [cite]?
Tabs [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Text fields [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
Text fields: Autocomplete [cite]?Yes [cite]Yes [1]Yes [cite]
Text fields: Character counter [cite]?Yes [cite]Yes [cite]?
Toolbars [cite]Yes [cite] [cite]Yes [cite]Yes [cite]Yes [cite] [cite]
Tooltips [cite]?Yes [cite]Yes [cite]Partial [lower-alpha 4] [cite]Yes [cite]
Transitions??Yes [cite]?
Whiteframes [cite] [cite]Yes [cite]Yes [cite]Yes [cite]Yes [cite]
  1. ↑ Click the button "MODAL BOTTOM SHEET STYLE"
  2. ↑ Active by default
  3. ↑ Not filling color on the active part of progress. Not displaying dots to represent fragmentation on discrete sliders.
  4. ↑ Only on icon-buttons
  1. ↑ "Forms - Materialize". materializecss.com. Retrieved 2016-08-17.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.