재료 설계 구현 비교

Comparison of Material Design implementations

이 문서에는 Google의 재료 설계 구현에 대한 일반적인 정보가 포함되어 있습니다.

메모들

2018년 12월 15일 현재, 명시되지 않는 한, 아래에 나열된 모든 구성 요소는 새로운 재료 설계 사양을 준수합니다.

웹 컴포넌트 구현(2018년 사양)

구성 요소들 폴리머 프로젝트 AngularJS 재료 실현 재료 UI 재료 디자인 라이트 웹용 재료 구성 요소
앱바 앱 바: 하단 No No No Maybe [1] No No
앱 바: 상단(이전 사양에서는 툴바라고 함) Yes [2] Yes [3] Yes [4] Yes [5] Maybe [6] Yes [7]
배경 No No No No No No
배너 No No No No No No
하단 내비게이션 No No No Yes [8] No No
단추 텍스트 버튼 Yes [9] Yes [10] Yes [11] Yes [12] Yes [13] Yes [14]
아웃라인 버튼 No No No Yes [15] No Yes [16]
Contained 버튼(이전 사양에서는 상승 버튼이라고도 함) Yes [9] Yes [10] Yes [17] Yes [18] Yes [13] Yes [19]
전환 버튼(이전 사양에는 포함되지 않음) No No No Maybe [20] No No
아이콘 버튼(사양에 없음) Yes [21] Yes [10] No Yes [22] Yes [13] Yes [23]
아이콘 전환 버튼(사양에 없음) No No No No Yes [24] Yes [25]
플로팅 액션 버튼(AKAFAB) Yes [26] Yes [10] Yes [27] Yes [28] Yes [13] Yes [29]
확장 No No No Yes [28] No Yes [30]
카드 Yes [31] Yes [32] Yes [33] Yes [34] Yes [35] Yes [36]
칩스 No (공식 실장 없음) Yes [37] Yes [38] Yes [39] Yes [40] Yes [41]
데이터 테이블 No (공식 실장 없음) No (공식 실장 없음) Yes [42] Yes [43] Yes [44] No
대화 상자 Yes [45] Yes [46] Yes [47] Yes [48] Maybe [49] Yes [50]
칸막이 No (공식 실장 없음) Yes [51] No Yes [52] No Maybe [53]
이미지 목록(이전 사양에서는 그리드 목록이라고 함) No Yes [54] Yes [55] Yes [56] Yes [6] Yes [57]
리스트 Yes [58] Yes [59] Yes [60] Yes [61] Yes [62] Yes [63]
메뉴 드롭다운 메뉴(이전 사양에서는 메뉴로 알려짐) Yes [64] Yes [65] Maybe [66] Yes [67] Yes [68] Yes [69]
[ Exposed ]드롭다운메뉴(이전 사양에서는 드롭다운버튼으로 불림) Yes [70] Yes [71] Yes [72] Yes [73] No (공식 실장 없음) Yes [74]
내비게이션 드로어 Yes [75] Yes [76] Yes [77] Yes [78] Yes [6] Yes [79]
진행률 표시기 선형 진행률 표시기 Yes [80] Yes [81] Yes [82] Yes [83] Yes [84] Yes [85]
순환 진행률 표시기 No (공식 실장 없음) Yes [86] Yes [87] Yes [88] Yes [84] No
선택 컨트롤 체크 박스 Yes [89] Yes [90] Yes [91] Yes [92] Yes [24] Yes [93]
라디오 버튼 Yes [94][95] Yes [96] Yes [97] Yes [98] Yes [24] Yes [99]
스위치 Yes [100] Yes [101] Yes [102] Yes [103] Yes [24] Yes [104]
시트 표준 바닥 시트 No (공식 실장 없음) Yes [105] Maybe [106] No (공식 실장 없음) No No
모달 하단 시트 No Yes [105] No No No No
하단 시트 확장 No No No No No No
표준 사이드 시트 (서랍과 유사) Maybe [75] Maybe [76] Maybe [77] Yes [107] Maybe [6] Maybe [79]
모달 사이드 시트 (서랍과 유사) Maybe [75] Maybe [76] Maybe [77] Yes [108] No Maybe [79]
슬라이더 연속 슬라이더 Yes [109] Yes [110] Yes [111] Maybe [112] Yes [113] Yes [114]
디스크리트 슬라이더 Yes [109] Yes [110] No No No Yes [115]
스낵바 Yes [116] Yes [117] Maybe [118] Yes [119] Yes [120] Yes [121]
탭 고정 탭 Yes [122] Yes [123] Yes [124] Yes [125] Maybe [6] Yes [126]
스크롤 가능한 탭 Yes [122] Yes [123] Yes [124] Yes [127] Maybe [6] Yes [126]
텍스트 필드 입력된 텍스트 필드 Maybe [128] No No Yes [129] No Yes [130]
아웃라인 텍스트 필드 Maybe [128] No No Yes [131] No Yes [132]
툴팁 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.