Comparison of Material Design implementations

This page contains general information about Material Design implementations.

Implemented components

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

Components Polymer Project Angular Material Materialize Material-UI Material Design Lite
Badges ? ? Yes [cite] ? Yes [cite]
Bottom sheets [cite] ? Yes [cite] Partial [lower-alpha 1] [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
Chips [cite] ? Yes [cite] Yes [cite] ?
Collapsibles Yes [cite] ? Yes [cite] ?
Content ? Yes [cite] ? ?
Data tables [cite] ? ? Yes [cite] ?
Dialogs [cite] Yes [cite] Yes [cite] Yes [cite] Yes [cite]
Dividers [cite] ? Yes [cite] Yes [cite] ?
File input ? ? Yes [cite] ?
Footer ? ? Yes [cite] ?
Gestures [cite] ? Partial [cite] ? ?
Grid lists [cite] ? Yes [cite] ? ?
Icons [cite] Yes [cite] Yes [cite] Yes [cite] Yes [cite]
Image slider ? ? Yes [cite] ?
Ink effect [cite] Yes [cite] ? Yes [cite] ?
Lists [cite] ? Yes [cite] Yes [cite] Yes [cite]
Lists: Controls [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]
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 2] [cite] Partial [lower-alpha 3] [cite]
Snackbars & toasts [cite] Yes [cite] Yes [cite] Yes [cite] Yes [cite]
ScrollFire ? ? Yes [cite] ? ?
Scrollspy ? ? Yes [cite] ? ?
Subheaders [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] ?
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] ? 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. ↑ Not filling color on the active part of progress. Not displaying dots to represent fragmentation on discrete sliders.
  3. ↑ Missing discrete slider
  1. ↑ "Forms - Materialize". materializecss.com. Retrieved 2016-08-17.
This article is issued from Wikipedia - version of the 11/18/2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.