Comparison of Material Design implementations

This page 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 [1]
App bars: top (formerly known as toolbar in the former specifications) [2] [3] [4] [5] [6] [7]
Backdrop
Banner
Bottom navigation [8]
Buttons Text button [9] [10] [11] [12] [13] [14]
Outlined button [15] [16]
Contained button (formerly known as raised button in the former specifications) [9] [10] [17] [18] [13] [19]
Toggle button (not included in the former specifications) [20]
Icon Button (not in the specifications) [21] [10] [22] [13] [23]
Icon Toggle Button (not in the specifications) [24] [25]
Floating Action Button (AKA FAB) [26] [10] [27] [28] [13] [29]
Extended FAB [28] [30]
Cards [31] [32] [33] [34] [35] [36]
Chips (no official implementation) [37] [38] [39] [40] [41]
Data tables (no official implementation) (no official implementation) [42] [43] [44]
Dialogs [45] [46] [47] [48] [49] [50]
Dividers (no official implementation) [51] [52] [53]
Image lists (formerly known as grid lists in the former specifications) [54] [55] [56] [6] [57]
Lists [58] [59] [60] [61] [62] [63]
Menus Dropdown menu (formerly known as menu in the former specifications) [64] [65] [66] [67] [68] [69]
Exposed dropdown menu (formerly known as dropdown button in the former specifications) [70] [71] [72] [73] (no official implementation) [74]
Navigation drawer [75] [76] [77] [78] [6] [79]
Progress indicators Linear progress indicators [80] [81] [82] [83] [84] [85]
Circular progress indicators (no official implementation) [86] [87] [88] [84]
Selection controls Checkboxes [89] [90] [91] [92] [24] [93]
Radio buttons [94][95] [96] [97] [98] [24] [99]
Switches [100] [101] [102] [103] [24] [104]
Sheets Standard bottom sheet (no official implementation) [105] [106] (no official implementation)
Modal bottom sheet [105]
Expanding bottom sheet
Standard side sheet (similar to drawers) [75] [76] [77] [107] [6] [79]
Modal side sheet (similar to drawers) [75] [76] [77] [108] [79]
Sliders Continuous Slider [109] [110] [111] [112] [113] [114]
Discrete Slider [109] [110] [115]
Snackbars [116] [117] [118] [119] [120] [121]
Tabs Fixed tabs [122] [123] [124] [125] [6] [126]
Scrollable tabs [122] [123] [124] [127] [6] [126]
Text fields Filled text field [128] [129] [130]
Outlined text field [128] [131] [132]
Tooltips [133] [134] [135] [136] [137]
    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. "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. "PolymerElements/paper-button - webcomponents.org". Retrieved 15 December 2018.
    10. "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. "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. "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. "(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. "PolymerElements/paper-drawer-panel - webcomponents.org". Retrieved 15 December 2018.
    76. "AngularJS Material - Demos > Sidenav". Retrieved 15 December 2018.
    77. "Sidenav - Materialize". Retrieved 15 December 2018.
    78. "Drawer React component - Material-UI". Retrieved 15 December 2018.
    79. "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. "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. "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. "PolymerElements/paper-slider - webcomponents.org". Retrieved 17 December 2018.
    110. "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. "PolymerElements/paper-tab - webcomponents.org". Retrieved 17 December 2018.
    123. "AngularJS Material - Demos > Tabs". Retrieved 17 December 2018.
    124. "Tabs - Materialize". Retrieved 17 December 2018.
    125. "(Fixed) Tabs React component - Material-UI". Retrieved 17 December 2018.
    126. "Tab - Material Components for the Web". Retrieved 17 December 2018.
    127. "(Scrollable) Tabs React component - Material-UI". Retrieved 17 December 2018.
    128. "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.

    This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.