Software:Comparison of Material Design implementations

From HandWiki
Short description: None

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

Notes

As of 15 December 2018, unless indicated, all of the components listed below conform to the new Material Design specifications.

Implemented web components (2018 specifications)

Components Polymer Project AngularJS Material Materialize Material-UI Material Design Lite Material Components for the web
App bars App bars: bottom No No No Maybe [1] No No
App bars: top (formerly known as toolbar in the former specifications) Yes [2] Yes [3] Yes [4] Yes [5] Maybe [6] Yes [7]
Backdrop No No No No No No
Banner No No No No No No
Bottom navigation No No No Yes [8] No No
Buttons Text button Yes [9] Yes [10] Yes [11] Yes [12] Yes [13] Yes [14]
Outlined button No No No Yes [15] No Yes [16]
Contained button (formerly known as raised button in the former specifications) Yes [9] Yes [10] Yes [17] Yes [18] Yes [13] Yes [19]
Toggle button (not included in the former specifications) No No No Maybe [20] No No
Icon Button (not in the specifications) Yes [21] Yes [10] No Yes [22] Yes [13] Yes [23]
Icon Toggle Button (not in the specifications) No No No No Yes [24] Yes [25]
Floating Action Button (AKA FAB) Yes [26] Yes [10] Yes [27] Yes [28] Yes [13] Yes [29]
Extended FAB No No No Yes [28] No Yes [30]
Cards Yes [31] Yes [32] Yes [33] Yes [34] Yes [35] Yes [36]
Chips No (no official implementation) Yes [37] Yes [38] Yes [39] Yes [40] Yes [41]
Data tables No (no official implementation) No (no official implementation) Yes [42] Yes [43] Yes [44] No
Dialogs Yes [45] Yes [46] Yes [47] Yes [48] Maybe [49] Yes [50]
Dividers No (no official implementation) Yes [51] No Yes [52] No Maybe [53]
Image lists (formerly known as grid lists in the former specifications) No Yes [54] Yes [55] Yes [56] Yes [6] Yes [57]
Lists Yes [58] Yes [59] Yes [60] Yes [61] Yes [62] Yes [63]
Menus Dropdown menu (formerly known as menu in the former specifications) Yes [64] Yes [65] Maybe [66] Yes [67] Yes [68] Yes [69]
Exposed dropdown menu (formerly known as dropdown button in the former specifications) Yes [70] Yes [71] Yes [72] Yes [73] No (no official implementation) Yes [74]
Navigation drawer Yes [75] Yes [76] Yes [77] Yes [78] Yes [6] Yes [79]
Progress indicators Linear progress indicators Yes [80] Yes [81] Yes [82] Yes [83] Yes [84] Yes [85]
Circular progress indicators No (no official implementation) Yes [86] Yes [87] Yes [88] Yes [84] No
Selection controls Checkboxes Yes [89] Yes [90] Yes [91] Yes [92] Yes [24] Yes [93]
Radio buttons Yes [94][95] Yes [96] Yes [97] Yes [98] Yes [24] Yes [99]
Switches Yes [100] Yes [101] Yes [102] Yes [103] Yes [24] Yes [104]
Sheets Standard bottom sheet No (no official implementation) Yes [105] Maybe [106] No (no official implementation) No No
Modal bottom sheet No Yes [105] No No No No
Expanding bottom sheet No No No No No No
Standard side sheet (similar to drawers) Maybe [75] Maybe [76] Maybe [77] Yes [107] Maybe [6] Maybe [79]
Modal side sheet (similar to drawers) Maybe [75] Maybe [76] Maybe [77] Yes [108] No Maybe [79]
Sliders Continuous Slider Yes [109] Yes [110] Yes [111] Maybe [112] Yes [113] Yes [114]
Discrete Slider Yes [109] Yes [110] No No No Yes [115]
Snackbars Yes [116] Yes [117] Maybe [118] Yes [119] Yes [120] Yes [121]
Tabs Fixed tabs Yes [122] Yes [123] Yes [124] Yes [125] Maybe [6] Yes [126]
Scrollable tabs Yes [122] Yes [123] Yes [124] Yes [127] Maybe [6] Yes [126]
Text fields Filled text field Maybe [128] No No Yes [129] No Yes [130]
Outlined text field Maybe [128] No No Yes [131] No Yes [132]
Tooltips Yes [133] Yes [134] Yes [135] Yes [136] Yes [137] No
  1. ↑ "App Bar React component - Material-UI". https://material-ui.com/demos/app-bar/#bottom-app-bar. 
  2. ↑ "PolymerElements/paper-toolbar - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-toolbar. 
  3. ↑ "AngularJS Material - Demos > Toolbar". https://material.angularjs.org/latest/demo/toolbar. 
  4. ↑ "Navbar - Materialize". https://materializecss.com/navbar.html. 
  5. ↑ "App Bar React component - Material-UI". https://material-ui.com/demos/app-bar/. 
  6. ↑ 6.0 6.1 6.2 6.3 6.4 6.5 "Material Design Lite (Layout)". https://getmdl.io/components/index.html#layout-section. 
  7. ↑ "Top App Bar - Material Components for the Web". https://material.io/develop/web/components/top-app-bar/. 
  8. ↑ "Bottom Navigation React component - Material-UI". https://material-ui.com/demos/bottom-navigation/. 
  9. ↑ 9.0 9.1 "PolymerElements/paper-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-button. 
  10. ↑ 10.0 10.1 10.2 10.3 "AngularJS Material - Demos > Button". https://material.angularjs.org/latest/demo/button. 
  11. ↑ "Buttons - Materialize". https://materializecss.com/buttons.html#flat. 
  12. ↑ "(Text) Button React component - Material-UI". https://material-ui.com/demos/buttons/#text-buttons. 
  13. ↑ 13.0 13.1 13.2 13.3 "Material Design Lite (Buttons)". https://getmdl.io/components/index.html#buttons-section. 
  14. ↑ "Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/. 
  15. ↑ "(Outlined) Button React component - Material-UI". https://material-ui.com/demos/buttons/#outlined-buttons. 
  16. ↑ "(Outlined) Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/#outlined-button. 
  17. ↑ "(Raised) Buttons - Materialize". https://materializecss.com/buttons.html#raised. 
  18. ↑ "(Contained) Button React component - Material-UI". https://material-ui.com/demos/buttons/#contained-buttons. 
  19. ↑ "(Contained) Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/#contained-button. 
  20. ↑ "Toggle Button React component - Material-UI". https://material-ui.com/lab/toggle-button/. 
  21. ↑ "PolymerElements/paper-icon-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-icon-button. 
  22. ↑ "(Icon) Button React component - Material-UI". https://material-ui.com/demos/buttons/#icon-buttons. 
  23. ↑ "Icon Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/icon-buttons/. 
  24. ↑ 24.0 24.1 24.2 24.3 "Material Design Lite (Toggles)". https://getmdl.io/components/index.html#toggles-section. 
  25. ↑ "Icon Toggle Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/icon-toggle-buttons/. 
  26. ↑ "PolymerElements/paper-fab - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-fab. 
  27. ↑ "(Floating Action) Buttons - Materialize". https://materializecss.com/buttons.html#floated. 
  28. ↑ 28.0 28.1 "(Floating Action) Button React component - Material-UI". https://material-ui.com/demos/buttons/#floating-action-buttons. 
  29. ↑ "Floating Action Button - Material Components for the Web". https://material.io/develop/web/components/buttons/floating-action-buttons/. 
  30. ↑ "(Extended) Floating Action Button - Material Components for the Web". https://material.io/develop/web/components/buttons/floating-action-buttons/#extended-fab. 
  31. ↑ "PolymerElements/paper-card - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-card. 
  32. ↑ "AngularJS Material - Demos > Card". https://material.angularjs.org/latest/demo/card. 
  33. ↑ "Cards - Materialize". https://materializecss.com/cards.html. 
  34. ↑ "Card React component - Material-UI". https://material-ui.com/demos/cards/. 
  35. ↑ "Material Design Lite (Cards)". https://getmdl.io/components/index.html#cards-section. 
  36. ↑ "Cards - Material Components for the Web". https://material.io/develop/web/components/cards/. 
  37. ↑ "AngularJS Material - Demos > Chips". https://material.angularjs.org/latest/demo/chips. 
  38. ↑ "Chips - Materialize". https://materializecss.com/chips.html. 
  39. ↑ "Chip React component - Material-UI". https://material-ui.com/demos/chips/. 
  40. ↑ "Material Design Lite (Chips)". https://getmdl.io/components/index.html#chips-section. 
  41. ↑ "Chips - Material Components for the Web". https://material.io/develop/web/components/chips/. 
  42. ↑ "Table - Materialize". https://materializecss.com/table.html. 
  43. ↑ "Table React component - Material-UI". https://material-ui.com/demos/tables/. 
  44. ↑ "Material Design Lite (Tables)". https://getmdl.io/components/index.html#tables-section. 
  45. ↑ "PolymerElements/paper-dialog - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-dialog. 
  46. ↑ "AngularJS Material - Demos > Dialog". https://material.angularjs.org/latest/demo/dialog. 
  47. ↑ "Modals - Materialize". https://materializecss.com/modals.html. 
  48. ↑ "Dialog React component - Material-UI". https://material-ui.com/demos/dialogs/. 
  49. ↑ "Material Design Lite (Dialogs)". https://getmdl.io/components/index.html#dialog-section. 
  50. ↑ "Dialogs - Material Components for the Web". https://material.io/develop/web/components/dialogs. 
  51. ↑ "AngularJS Material - Demos > Divider". https://material.angularjs.org/latest/demo/divider. 
  52. ↑ "Divider React component - Material-UI". https://material-ui.com/demos/dividers. 
  53. ↑ "List (Dividers) - Material Components for the Web". https://material.io/develop/web/components/lists/#list-dividers. 
  54. ↑ "AngularJS Material - Demos > Grid List". https://material.angularjs.org/latest/demo/gridList. 
  55. ↑ "Grid - Materialize". https://materializecss.com/grid.html. 
  56. ↑ "Grid List React component - Material-UI". https://material-ui.com/demos/grid-list. 
  57. ↑ "Grid Lists - Material Components for the Web". https://material.io/develop/web/components/grid-lists/. 
  58. ↑ "PolymerElements/paper-item - webcomponents.org". https://webcomponents.org/element/@polymer/paper-item. 
  59. ↑ "AngularJS Material - Demos > List". https://material.angularjs.org/latest/demo/list. 
  60. ↑ "Collections - Materialize". https://materializecss.com/collections.html. 
  61. ↑ "List React component - Material-UI". https://material-ui.com/demos/lists. 
  62. ↑ "Material Design Lite (Lists)". https://getmdl.io/components/index.html#lists-section. 
  63. ↑ "Lists - Material Components for the Web". https://material.io/develop/web/components/lists/. 
  64. ↑ "PolymerElements/paper-menu-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-menu-button. 
  65. ↑ "AngularJ S Material - Demos > Menu". https://material.angularjs.org/latest/demo/menu. 
  66. ↑ "Dropdown - Materialize". https://materializecss.com/dropdown.html. 
  67. ↑ "Menu React component - Material-UI". https://material-ui.com/demos/menus. 
  68. ↑ "Material Design Lite (Menus)". https://getmdl.io/components/index.html#menus-section. 
  69. ↑ "Menus - Material Components for the Web". https://material.io/develop/web/components/menus/. 
  70. ↑ "PolymerElements/paper-dropdown-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-dropdown-menu. 
  71. ↑ "AngularJS Material - Demos > Select". https://material.angularjs.org/latest/demo/select. 
  72. ↑ "Select - Materialize". https://materializecss.com/select.html. 
  73. ↑ "Select React component - Material-UI". https://material-ui.com/demos/selects. 
  74. ↑ "Select Menus - Material Components for the Web". https://material.io/develop/web/components/input-controls/select-menus/. 
  75. ↑ 75.0 75.1 75.2 "PolymerElements/paper-drawer-panel - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-drawer-panel. 
  76. ↑ 76.0 76.1 76.2 "AngularJS Material - Demos > Sidenav". https://material.angularjs.org/latest/demo/sidenav. 
  77. ↑ 77.0 77.1 77.2 "Sidenav - Materialize". https://materializecss.com/sidenav.html. 
  78. ↑ "Drawer React component - Material-UI". https://material-ui.com/demos/drawers/. 
  79. ↑ 79.0 79.1 79.2 "Drawers - Material Components for the Web". https://material.io/develop/web/components/drawers/. 
  80. ↑ "PolymerElements/paper-progress - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-progress. 
  81. ↑ "AngularJS Material - Demos > Progress Linear". https://material.angularjs.org/latest/demo/progressLinear. 
  82. ↑ "(Linear) Preloader - Materialize". https://materializecss.com/preloader.html#linear. 
  83. ↑ "Linear Progress React component - Material-UI". https://material-ui.com/demos/progress/#linear. 
  84. ↑ 84.0 84.1 "Material Design Lite (Circular/Linear Progress)". https://getmdl.io/components/index.html#loading-section. 
  85. ↑ "Linear Progress - Material Components for the Web". https://material.io/develop/web/components/linear-progress/. 
  86. ↑ "AngularJS Material - Demos > Progress Circular". https://material.angularjs.org/latest/demo/progressCircular. 
  87. ↑ "(Circular) Preloader - Materialize". https://materializecss.com/preloader.html#circular. 
  88. ↑ "Circular Progress React component - Material-UI". https://material-ui.com/demos/progress/#circular. 
  89. ↑ "PolymerElements/paper-checkbox - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-checkbox. 
  90. ↑ "AngularJS Material - Demos > Checkbox". https://material.angularjs.org/latest/demo/checkbox. 
  91. ↑ "Checkboxes - Materialize". https://materializecss.com/checkboxes.html. 
  92. ↑ "Checkbox React component - Material-UI". https://material-ui.com/demos/selection-controls/#checkboxes. 
  93. ↑ "Checkboxes - Material Components for the Web". https://material.io/develop/web/components/input-controls/checkboxes/. 
  94. ↑ "PolymerElements/paper-radio-group - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-radio-group. 
  95. ↑ "PolymerElements/paper-radio-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-radio-button. 
  96. ↑ "AngularJS Material - Demos > Radio Button". https://material.angularjs.org/latest/demo/radioButton. 
  97. ↑ "Radio Buttons - Materialize". https://materializecss.com/radio-buttons.html. 
  98. ↑ "Radio React component - Material-UI". https://material-ui.com/demos/selection-controls/#radio-buttons. 
  99. ↑ "Radio Buttons - Material Components for the Web". https://material.io/develop/web/components/input-controls/radio-buttons/. 
  100. ↑ "PolymerElements/paper-toggle-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-toggle-button. 
  101. ↑ "AngularJS Material - Demos > Switch". https://material.angularjs.org/latest/demo/switch. 
  102. ↑ "Switches - Materialize". https://materializecss.com/switches.html. 
  103. ↑ "Switch React component - Material-UI". https://material-ui.com/demos/selection-controls/#switches. 
  104. ↑ "Switches - Material Components for the Web". https://material.io/develop/web/components/input-controls/switches/. 
  105. ↑ 105.0 105.1 "AngularJS Material - Demos > Bottom Sheet". https://material.angularjs.org/latest/demo/bottomSheet. 
  106. ↑ "(Bottom Sheet) Modals - Materialize". https://materializecss.com/modals.html#bottom-sheet. 
  107. ↑ "(Clipped under app bar) Drawer React component - Material-UI". https://material-ui.com/demos/drawers/#clipped-under-the-app-bar. 
  108. ↑ "(Swipeable temporary) Drawer React component - Material-UI". https://material-ui.com/demos/drawers/#swipeable-temporary-drawer. 
  109. ↑ 109.0 109.1 "PolymerElements/paper-slider - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-slider. 
  110. ↑ 110.0 110.1 "AngularJS Material - Demos > Slider". https://material.angularjs.org/latest/demo/slider. 
  111. ↑ "Range - Materialize". https://materializecss.com/range.html. 
  112. ↑ "Slider React component - Material-UI". https://material-ui.com/lab/slider/. 
  113. ↑ "Material Design Lite (Sliders)". https://getmdl.io/components/index.html#sliders-section. 
  114. ↑ "(Continuous) Sliders - Material Components for the Web". https://material.io/develop/web/components/input-controls/sliders/#continuous-slider. 
  115. ↑ "(Discrete) Sliders - Material Components for the Web". https://material.io/develop/web/components/input-controls/sliders/#discrete-slider. 
  116. ↑ "PolymerElements/paper-toast - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-toast. 
  117. ↑ "AngularJS Material - Demos > Toast". https://material.angularjs.org/latest/demo/toast. 
  118. ↑ "Toasts - Materialize". https://materializecss.com/toasts.html. 
  119. ↑ "Snackbar React component - Material-UI". https://material-ui.com/demos/snackbars/. 
  120. ↑ "Material Design Lite (Snackbar)". https://getmdl.io/components/index.html#snackbar-section. 
  121. ↑ "Snackbars - Material Components for the Web". https://material.io/develop/web/components/snackbars/. 
  122. ↑ 122.0 122.1 "PolymerElements/paper-tab - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-tabs. 
  123. ↑ 123.0 123.1 "AngularJS Material - Demos > Tabs". https://material.angularjs.org/latest/demo/tabs. 
  124. ↑ 124.0 124.1 "Tabs - Materialize". https://materializecss.com/tabs.html. 
  125. ↑ "(Fixed) Tabs React component - Material-UI". https://material-ui.com/demos/tabs/#fixed-tabs. 
  126. ↑ 126.0 126.1 "Tab - Material Components for the Web". https://material.io/develop/web/components/tabs/tab/. 
  127. ↑ "(Scrollable) Tabs React component - Material-UI". https://material-ui.com/demos/tabs/#scrollable-tabs. 
  128. ↑ 128.0 128.1 "PolymerElements/paper-input - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-input. 
  129. ↑ "(Filled) Text Field React component - Material-UI". https://material-ui.com/demos/text-fields/#filled. 
  130. ↑ "Text Field - Material Components for the Web". https://material.io/develop/web/components/input-controls/text-field/. 
  131. ↑ "(Outlined) Text Field React component - Material-UI". https://material-ui.com/demos/text-fields/#outlined. 
  132. ↑ "(Outlined) Text Field - Material Components for the Web". https://material.io/develop/web/components/input-controls/text-field/#outlined. 
  133. ↑ "PolymerElements/paper-tooltip - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-tooltip. 
  134. ↑ "AngularJS Material - Demos > Tooltip". https://material.angularjs.org/latest/demo/tooltip. 
  135. ↑ "Tooltips - Materialize". https://materializecss.com/tooltips.html. 
  136. ↑ "Tooltip React component - Material-UI". https://material-ui.com/demos/tooltips/. 
  137. ↑ "Material Design Lite (Tooltip)". https://getmdl.io/components/index.html#tooltips-section. 




Retrieved from "https://handwiki.org/wiki/index.php?title=Software:Comparison_of_Material_Design_implementations&oldid=2701318"