Comparison of Material Design implementations

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search

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

Notes[edit]

Please note that as of 15 December 2018, unless indicated, all of the components listed below conform to the new Material Design specifications.

Implemented web components (2018 specs)[edit]

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". Retrieved 15 December 2018.
  2. ^ "PolymerElements/paper-toolbar - webcomponents.org". Retrieved 15 December 2018.
  3. ^ "AngularJS Material - Demos > Toolbar". Retrieved 15 December 2018.
  4. ^ "Navbar - Materialize". Retrieved 15 December 2018.
  5. ^ "App Bar React component - Material-UI". Retrieved 15 December 2018.
  6. ^ a b c d e f "Material Design Lite (Layout)". Retrieved 15 December 2018.
  7. ^ "Top App Bar - Material Components for the Web". Retrieved 15 December 2018.
  8. ^ "Bottom Navigation React component - Material-UI". Retrieved 15 December 2018.
  9. ^ a b "PolymerElements/paper-button - webcomponents.org". Retrieved 15 December 2018.
  10. ^ a b c d "AngularJS Material - Demos > Button". Retrieved 15 December 2018.
  11. ^ "Buttons - Materialize". Retrieved 15 December 2018.
  12. ^ "(Text) Button React component - Material-UI". Retrieved 15 December 2018.
  13. ^ a b c d "Material Design Lite (Buttons)". Retrieved 15 December 2018.
  14. ^ "Buttons - Material Components for the Web". Retrieved 15 December 2018.
  15. ^ "(Outlined) Button React component - Material-UI". Retrieved 15 December 2018.
  16. ^ "(Outlined) Buttons - Material Components for the Web". Retrieved 15 December 2018.
  17. ^ "(Raised) Buttons - Materialize". Retrieved 15 December 2018.
  18. ^ "(Contained) Button React component - Material-UI". Retrieved 15 December 2018.
  19. ^ "(Contained) Buttons - Material Components for the Web". Retrieved 15 December 2018.
  20. ^ "Toggle Button React component - Material-UI". Retrieved 15 December 2018.
  21. ^ "PolymerElements/paper-icon-button - webcomponents.org". Retrieved 15 December 2018.
  22. ^ "(Icon) Button React component - Material-UI". Retrieved 15 December 2018.
  23. ^ "Icon Buttons - Material Components for the Web". Retrieved 15 December 2018.
  24. ^ a b c d "Material Design Lite (Toggles)". Retrieved 15 December 2018.
  25. ^ "Icon Toggle Buttons - Material Components for the Web". Retrieved 15 December 2018.
  26. ^ "PolymerElements/paper-fab - webcomponents.org". Retrieved 15 December 2018.
  27. ^ "(Floating Action) Buttons - Materialize". Retrieved 15 December 2018.
  28. ^ a b "(Floating Action) Button React component - Material-UI". Retrieved 15 December 2018.
  29. ^ "Floating Action Button - Material Components for the Web". Retrieved 15 December 2018.
  30. ^ "(Extended) Floating Action Button - Material Components for the Web". Retrieved 15 December 2018.
  31. ^ "PolymerElements/paper-card - webcomponents.org". Retrieved 15 December 2018.
  32. ^ "AngularJS Material - Demos > Card". Retrieved 15 December 2018.
  33. ^ "Cards - Materialize". Retrieved 15 December 2018.
  34. ^ "Card React component - Material-UI". Retrieved 15 December 2018.
  35. ^ "Material Design Lite (Cards)". Retrieved 15 December 2018.
  36. ^ "Cards - Material Components for the Web". Retrieved 15 December 2018.
  37. ^ "AngularJS Material - Demos > Chips". Retrieved 15 December 2018.
  38. ^ "Chips - Materialize". Retrieved 15 December 2018.
  39. ^ "Chip React component - Material-UI". Retrieved 15 December 2018.
  40. ^ "Material Design Lite (Chips)". Retrieved 15 December 2018.
  41. ^ "Chips - Material Components for the Web". Retrieved 15 December 2018.
  42. ^ "Table - Materialize". Retrieved 15 December 2018.
  43. ^ "Table React component - Material-UI". Retrieved 15 December 2018.
  44. ^ "Material Design Lite (Tables)". Retrieved 15 December 2018.
  45. ^ "PolymerElements/paper-dialog - webcomponents.org". Retrieved 15 December 2018.
  46. ^ "AngularJS Material - Demos > Dialog". Retrieved 15 December 2018.
  47. ^ "Modals - Materialize". Retrieved 15 December 2018.
  48. ^ "Dialog React component - Material-UI". Retrieved 15 December 2018.
  49. ^ "Material Design Lite (Dialogs)". Retrieved 15 December 2018.
  50. ^ "Dialogs - Material Components for the Web". Retrieved 15 December 2018.
  51. ^ "AngularJS Material - Demos > Divider". Retrieved 15 December 2018.
  52. ^ "Divider React component - Material-UI". Retrieved 15 December 2018.
  53. ^ "List (Dividers) - Material Components for the Web". Retrieved 15 December 2018.
  54. ^ "AngularJS Material - Demos > Grid List". Retrieved 15 December 2018.
  55. ^ "Grid - Materialize". Retrieved 15 December 2018.
  56. ^ "Grid List React component - Material-UI". Retrieved 15 December 2018.
  57. ^ "Grid Lists - Material Components for the Web". Retrieved 15 December 2018.
  58. ^ "PolymerElements/paper-item - webcomponents.org". Retrieved 15 December 2018.
  59. ^ "AngularJS Material - Demos > List". Retrieved 15 December 2018.
  60. ^ "Collections - Materialize". Retrieved 15 December 2018.
  61. ^ "List React component - Material-UI". Retrieved 15 December 2018.
  62. ^ "Material Design Lite (Lists)". Retrieved 15 December 2018.
  63. ^ "Lists - Material Components for the Web". Retrieved 15 December 2018.
  64. ^ "PolymerElements/paper-menu-button - webcomponents.org". Retrieved 15 December 2018.
  65. ^ "AngularJ S Material - Demos > Menu". Retrieved 15 December 2018.
  66. ^ "Dropdown - Materialize". Retrieved 15 December 2018.
  67. ^ "Menu React component - Material-UI".
  68. ^ "Material Design Lite (Menus)". Retrieved 15 December 2018.
  69. ^ "Menus - Material Components for the Web". Retrieved 15 December 2018.
  70. ^ "PolymerElements/paper-dropdown-button - webcomponents.org". Retrieved 15 December 2018.
  71. ^ "AngularJS Material - Demos > Select". Retrieved 15 December 2018.
  72. ^ "Select - Materialize". Retrieved 15 December 2018.
  73. ^ "Select React component - Material-UI". Retrieved 15 December 2018.
  74. ^ "Select Menus - Material Components for the Web". Retrieved 15 December 2018.
  75. ^ a b c "PolymerElements/paper-drawer-panel - webcomponents.org". Retrieved 15 December 2018.
  76. ^ a b c "AngularJS Material - Demos > Sidenav". Retrieved 15 December 2018.
  77. ^ a b c "Sidenav - Materialize". Retrieved 15 December 2018.
  78. ^ "Drawer React component - Material-UI". Retrieved 15 December 2018.
  79. ^ a b c "Drawers - Material Components for the Web". Retrieved 15 December 2018.
  80. ^ "PolymerElements/paper-progress - webcomponents.org". Retrieved 15 December 2018.
  81. ^ "AngularJS Material - Demos > Progress Linear". Retrieved 16 December 2018.
  82. ^ "(Linear) Preloader - Materialize". Retrieved 16 December 2018.
  83. ^ "Linear Progress React component - Material-UI". Retrieved 16 December 2018.
  84. ^ a b "Material Design Lite (Circular/Linear Progress)". Retrieved 16 December 2018.
  85. ^ "Linear Progress - Material Components for the Web". Retrieved 16 December 2018.
  86. ^ "AngularJS Material - Demos > Progress Circular". Retrieved 16 December 2018.
  87. ^ "(Circular) Preloader - Materialize". Retrieved 16 December 2018.
  88. ^ "Circular Progress React component - Material-UI". Retrieved 16 December 2018.
  89. ^ "PolymerElements/paper-checkbox - webcomponents.org". Retrieved 16 December 2018.
  90. ^ "AngularJS Material - Demos > Checkbox". Retrieved 16 December 2018.
  91. ^ "Checkboxes - Materialize". Retrieved 16 December 2018.
  92. ^ "Checkbox React component - Material-UI". Retrieved 16 December 2018.
  93. ^ "Checkboxes - Material Components for the Web". Retrieved 16 December 2018.
  94. ^ "PolymerElements/paper-radio-group - webcomponents.org". Retrieved 16 December 2018.
  95. ^ "PolymerElements/paper-radio-button - webcomponents.org". Retrieved 16 December 2018.
  96. ^ "AngularJS Material - Demos > Radio Button". Retrieved 16 December 2018.
  97. ^ "Radio Buttons - Materialize". Retrieved 16 December 2018.
  98. ^ "Radio React component - Material-UI". Retrieved 16 December 2018.
  99. ^ "Radio Buttons - Material Components for the Web". Retrieved 16 December 2018.
  100. ^ "PolymerElements/paper-toggle-button - webcomponents.org". Retrieved 16 December 2018.
  101. ^ "AngularJS Material - Demos > Switch". Retrieved 16 December 2018.
  102. ^ "Switches - Materialize". Retrieved 16 December 2018.
  103. ^ "Switch React component - Material-UI". Retrieved 16 December 2018.
  104. ^ "Switches - Material Components for the Web". Retrieved 16 December 2018.
  105. ^ a b "AngularJS Material - Demos > Bottom Sheet". Retrieved 16 December 2018.
  106. ^ "(Bottom Sheet) Modals - Materialize". Retrieved 16 December 2018.
  107. ^ "(Clipped under app bar) Drawer React component - Material-UI". Retrieved 17 December 2018.
  108. ^ "(Swipeable temporary) Drawer React component - Material-UI". Retrieved 17 December 2018.
  109. ^ a b "PolymerElements/paper-slider - webcomponents.org". Retrieved 17 December 2018.
  110. ^ a b "AngularJS Material - Demos > Slider". Retrieved 17 December 2018.
  111. ^ "Range - Materialize". Retrieved 17 December 2018.
  112. ^ "Slider React component - Material-UI". Retrieved 17 December 2018.
  113. ^ "Material Design Lite (Sliders)". Retrieved 17 December 2018.
  114. ^ "(Continuous) Sliders - Material Components for the Web". Retrieved 17 December 2018.
  115. ^ "(Discrete) Sliders - Material Components for the Web". Retrieved 17 December 2018.
  116. ^ "PolymerElements/paper-toast - webcomponents.org". Retrieved 17 December 2018.
  117. ^ "AngularJS Material - Demos > Toast".
  118. ^ "Toasts - Materialize". Retrieved 17 December 2018.
  119. ^ "Snackbar React component - Material-UI". Retrieved 17 December 2018.
  120. ^ "Material Design Lite (Snackbar)". Retrieved 17 December 2018.
  121. ^ "Snackbars - Material Components for the Web". Retrieved 17 December 2018.
  122. ^ a b "PolymerElements/paper-tab - webcomponents.org". Retrieved 17 December 2018.
  123. ^ a b "AngularJS Material - Demos > Tabs". Retrieved 17 December 2018.
  124. ^ a b "Tabs - Materialize". Retrieved 17 December 2018.
  125. ^ "(Fixed) Tabs React component - Material-UI". Retrieved 17 December 2018.
  126. ^ a b "Tab - Material Components for the Web". Retrieved 17 December 2018.
  127. ^ "(Scrollable) Tabs React component - Material-UI". Retrieved 17 December 2018.
  128. ^ a b "PolymerElements/paper-input - webcomponents.org". Retrieved 17 December 2018.
  129. ^ "(Filled) Text Field React component - Material-UI". Retrieved 17 December 2018.
  130. ^ "Text Field - Material Components for the Web". Retrieved 17 December 2018.
  131. ^ "(Outlined) Text Field React component - Material-UI". Retrieved 17 December 2018.
  132. ^ "(Outlined) Text Field - Material Components for the Web". Retrieved 17 December 2018.
  133. ^ "PolymerElements/paper-tooltip - webcomponents.org". Retrieved 17 December 2018.
  134. ^ "AngularJS Material - Demos > Tooltip". Retrieved 17 December 2018.
  135. ^ "Tooltips - Materialize". Retrieved 17 December 2018.
  136. ^ "Tooltip React component - Material-UI". Retrieved 17 December 2018.
  137. ^ "Material Design Lite (Tooltip)". Retrieved 17 December 2018.