WikiDer > Сравнение реализаций Material Design

Comparison of Material Design implementations

Эта страница содержит общую информацию о Google Материальный дизайн реализации.

Примечания

По состоянию на 15 декабря 2018 года, если не указано иное, все перечисленные ниже компоненты соответствуют новым спецификациям Material Design.

Реализованные веб-компоненты (спецификации 2018 г.)

Составные частиПолимерный проектAngularJS МатериалМатериализоватьМатериал-UIМатериальный дизайн LiteКомпоненты материалов для Интернета
Панели приложенийПанели приложений: внизуНетНетНетМожет быть [1]НетНет
Панели приложений: вверху (ранее известный как панель инструментов в прежние спецификации)да [2]да [3]да [4]да [5]Может быть [6]да [7]
ФонНетНетНетНетНетНет
БаннерНетНетНетНетНетНет
Нижняя навигацияНетНетНетда [8]НетНет
КнопкиТекстовая кнопкада [9]да [10]да [11]да [12]да [13]да [14]
Обрисованная кнопкаНетНетНетда [15]Нетда [16]
Содержимая кнопка (ранее известный как приподнятая кнопка в прежние спецификации)да [9]да [10]да [17]да [18]да [13]да [19]
Кнопка-переключатель (не входит в предыдущие спецификации)НетНетНетМожет быть [20]НетНет
Значок Кнопка (нет в спецификации)да [21]да [10]Нетда [22]да [13]да [23]
Значок Кнопка переключения (нет в спецификации)НетНетНетНетда [24]да [25]
Плавающая кнопка действия (AKA FAB)да [26]да [10]да [27]да [28]да [13]да [29]
Расширенный FABНетНетНетда [28]Нетда [30]
Открыткида [31]да [32]да [33]да [34]да [35]да [36]
ЧипсыНет (нет официальной реализации)да [37]да [38]да [39]да [40]да [41]
Таблицы данныхНет (нет официальной реализации)Нет (нет официальной реализации)да [42]да [43]да [44]Нет
Диалогида [45]да [46]да [47]да [48]Может быть [49]да [50]
РазделителиНет (нет официальной реализации)да [51]Нетда [52]НетМожет быть [53]
Списки изображений (ранее известный как сеточные списки в прежние спецификации)Нетда [54]да [55]да [56]да [6]да [57]
Спискида [58]да [59]да [60]да [61]да [62]да [63]
МенюВыпадающее меню (ранее известный как меню в прежние спецификации)да [64]да [65]Может быть [66]да [67]да [68]да [69]
Открытое раскрывающееся меню (ранее известный как выпадающая кнопка в прежние спецификации)да [70]да [71]да [72]да [73]Нет (нет официальной реализации)да [74]
Панель навигациида [75]да [76]да [77]да [78]да [6]да [79]
Индикаторы прогрессаЛинейные индикаторы прогрессада [80]да [81]да [82]да [83]да [84]да [85]
Круговые индикаторы прогрессаНет (нет официальной реализации)да [86]да [87]да [88]да [84]Нет
Элементы управления выборомФлажкида [89]да [90]да [91]да [92]да [24]да [93]
Радио-кнопкида [94][95]да [96]да [97]да [98]да [24]да [99]
Переключателида [100]да [101]да [102]да [103]да [24]да [104]
ЛистыСтандартный нижний листНет (нет официальной реализации)да [105]Может быть [106]Нет (нет официальной реализации)НетНет
Модальный нижний листНетда [105]НетНетНетНет
Расширяющийся нижний листНетНетНетНетНетНет
Стандартный боковой лист (аналогично ящикам)Может быть [75]Может быть [76]Может быть [77]да [107]Может быть [6]Может быть [79]
Боковой лист из модала (аналогично ящикам)Может быть [75]Может быть [76]Может быть [77]да [108]НетМожет быть [79]
СлайдерыНепрерывный слайдерда [109]да [110]да [111]Может быть [112]да [113]да [114]
Дискретный слайдерда [109]да [110]НетНетНетда [115]
Закусочнаяда [116]да [117]Может быть [118]да [119]да [120]да [121]
ВкладкиФиксированные вкладкида [122]да [123]да [124]да [125]Может быть [6]да [126]
Прокручиваемые вкладкида [122]да [123]да [124]да [127]Может быть [6]да [126]
Текстовые поляЗаполненное текстовое полеМожет быть [128]НетНетда [129]Нетда [130]
Контурное текстовое полеМожет быть [128]НетНетда [131]Нетда [132]
Всплывающие подсказкида [133]да [134]да [135]да [136]да [137]Нет
  1. ^ "Компонент React панели приложений - UI-материал". Получено 15 декабря 2018.
  2. ^ "ПолимерЭлементы / бумага-панель инструментов - webcomponents.org". Получено 15 декабря 2018.
  3. ^ «Материал AngularJS - Демо> Панель инструментов». Получено 15 декабря 2018.
  4. ^ «Навбар - Материализовать». Получено 15 декабря 2018.
  5. ^ "Компонент React панели приложений - UI-материал". Получено 15 декабря 2018.
  6. ^ а б c d е ж «Material Design Lite (макет)». Получено 15 декабря 2018.
  7. ^ «Верхняя панель приложения - компоненты материалов для Интернета». Получено 15 декабря 2018.
  8. ^ «Компонент React для нижней навигации - Material-UI». Получено 15 декабря 2018.
  9. ^ а б "ПолимерЭлементы / бумага-кнопка - webcomponents.org". Получено 15 декабря 2018.
  10. ^ а б c d «Материал AngularJS - Демо> Кнопка». Получено 15 декабря 2018.
  11. ^ «Кнопки - Материализуются». Получено 15 декабря 2018.
  12. ^ "(Текст) Компонент React кнопки - Материал-UI". Получено 15 декабря 2018.
  13. ^ а б c d «Material Design Lite (кнопки)». Получено 15 декабря 2018.
  14. ^ «Кнопки - материальные компоненты для Интернета». Получено 15 декабря 2018.
  15. ^ "(Обведено) Компонент Button React - Материал-UI". Получено 15 декабря 2018.
  16. ^ «(Обведены) кнопки - компоненты материалов для Интернета». Получено 15 декабря 2018.
  17. ^ «(Поднятые) кнопки - материализуются». Получено 15 декабря 2018.
  18. ^ «(Содержится) компонент Button React - Материал-UI». Получено 15 декабря 2018.
  19. ^ «(Содержащиеся) кнопки - материальные компоненты для Интернета». Получено 15 декабря 2018.
  20. ^ «Переключить компонент React Button - Material-UI». Получено 15 декабря 2018.
  21. ^ "PolymerElements / бумага-значок-кнопка - webcomponents.org". Получено 15 декабря 2018.
  22. ^ "(Значок) Компонент React кнопки - UI Материал". Получено 15 декабря 2018.
  23. ^ «Кнопки с пиктограммами - компоненты материалов для Интернета». Получено 15 декабря 2018.
  24. ^ а б c d "Material Design Lite (переключает)". Получено 15 декабря 2018.
  25. ^ «Кнопки переключения значков - компоненты материалов для Интернета». Получено 15 декабря 2018.
  26. ^ «ПолимерЭлементы / бумага-фабрика - webcomponents.org». Получено 15 декабря 2018.
  27. ^ "(Плавающее действие) Кнопки - Материализация". Получено 15 декабря 2018.
  28. ^ а б "(Плавающее действие) Компонент" Реагировать на кнопку "- UI-материал". Получено 15 декабря 2018.
  29. ^ «Плавающая кнопка действия - компоненты материалов для Интернета». Получено 15 декабря 2018.
  30. ^ «(Расширенная) кнопка с плавающим действием - компоненты материалов для Интернета». Получено 15 декабря 2018.
  31. ^ "ПолимерЭлементы / бумага-карта - webcomponents.org". Получено 15 декабря 2018.
  32. ^ "AngularJS Material - Demos> Card". Получено 15 декабря 2018.
  33. ^ «Карты - Материализуйтесь». Получено 15 декабря 2018.
  34. ^ «Компонент Card React - Material-UI». Получено 15 декабря 2018.
  35. ^ «Material Design Lite (карты)». Получено 15 декабря 2018.
  36. ^ «Карты - материальные компоненты для Интернета». Получено 15 декабря 2018.
  37. ^ "AngularJS Material - Demos> Chips". Получено 15 декабря 2018.
  38. ^ «Чипсы - материализуются». Получено 15 декабря 2018.
  39. ^ «Компонент Chip React - Material-UI». Получено 15 декабря 2018.
  40. ^ «Материальный дизайн Lite (чипы)». Получено 15 декабря 2018.
  41. ^ «Чипы - материальные компоненты для Интернета». Получено 15 декабря 2018.
  42. ^ «Таблица - Материализовать». Получено 15 декабря 2018.
  43. ^ «Компонент Table React - Материал-UI». Получено 15 декабря 2018.
  44. ^ «Material Design Lite (таблицы)». Получено 15 декабря 2018.
  45. ^ "ПолимерЭлементы / бумага-диалог - webcomponents.org". Получено 15 декабря 2018.
  46. ^ "AngularJS Material - Demos> Dialog". Получено 15 декабря 2018.
  47. ^ «Модальные окна - Материализовать». Получено 15 декабря 2018.
  48. ^ «Компонент Dialog React - Материал-UI». Получено 15 декабря 2018.
  49. ^ «Material Design Lite (диалоги)». Получено 15 декабря 2018.
  50. ^ «Диалоги - материальные компоненты для Интернета». Получено 15 декабря 2018.
  51. ^ "AngularJS Material - Demos> Divider". Получено 15 декабря 2018.
  52. ^ «Компонент Divider React - Material-UI». Получено 15 декабря 2018.
  53. ^ «Список (разделители) - компоненты материалов для Интернета». Получено 15 декабря 2018.
  54. ^ «Материал AngularJS - Демо> Список сеток». Получено 15 декабря 2018.
  55. ^ «Сетка - Материализовать». Получено 15 декабря 2018.
  56. ^ "Реагирующий компонент Grid List - Material-UI". Получено 15 декабря 2018.
  57. ^ «Списки сетки - компоненты материалов для Интернета». Получено 15 декабря 2018.
  58. ^ "ПолимерЭлементы / бумага - webcomponents.org". Получено 15 декабря 2018.
  59. ^ "AngularJS Material - Demos> List". Получено 15 декабря 2018.
  60. ^ «Коллекции - Материализуйтесь». Получено 15 декабря 2018.
  61. ^ «Список компонентов React - Материал-UI». Получено 15 декабря 2018.
  62. ^ «Material Design Lite (Списки)». Получено 15 декабря 2018.
  63. ^ «Списки - материальные компоненты для Интернета». Получено 15 декабря 2018.
  64. ^ "PolymerElements / бумага-меню-кнопка - webcomponents.org". Получено 15 декабря 2018.
  65. ^ "AngularJ S Material - Демо> Меню". Получено 15 декабря 2018.
  66. ^ «Раскрывающийся список - Материализовать». Получено 15 декабря 2018.
  67. ^ «Компонент React меню - Material-UI».
  68. ^ «Material Design Lite (меню)». Получено 15 декабря 2018.
  69. ^ «Меню - компоненты материалов для Интернета». Получено 15 декабря 2018.
  70. ^ "PolymerElements / paper-dropdown-button - webcomponents.org". Получено 15 декабря 2018.
  71. ^ "AngularJS Material - Demos> Select". Получено 15 декабря 2018.
  72. ^ «Выбрать - Материализовать». Получено 15 декабря 2018.
  73. ^ «Выберите компонент React - Material-UI». Получено 15 декабря 2018.
  74. ^ «Выберите меню - компоненты материалов для Интернета». Получено 15 декабря 2018.
  75. ^ а б c "ПолимерЭлементы / бумажный ящик-панель - webcomponents.org". Получено 15 декабря 2018.
  76. ^ а б c "AngularJS Material - Demos> Sidenav". Получено 15 декабря 2018.
  77. ^ а б c "Sidenav - Материализовать". Получено 15 декабря 2018.
  78. ^ «Компонент Drawer React - Материал-UI». Получено 15 декабря 2018.
  79. ^ а б c «Выдвижные ящики - компоненты материалов для Интернета». Получено 15 декабря 2018.
  80. ^ «ПолимерЭлементы / бумага-прогресс - webcomponents.org». Получено 15 декабря 2018.
  81. ^ "AngularJS Material - Demos> Progress Linear". Получено 16 декабря 2018.
  82. ^ "(Линейный) предварительный загрузчик - Материализовать". Получено 16 декабря 2018.
  83. ^ «Компонент Linear Progress React - Material-UI». Получено 16 декабря 2018.
  84. ^ а б «Material Design Lite (круговой / линейный прогресс)». Получено 16 декабря 2018.
  85. ^ «Линейный прогресс - материальные компоненты для Интернета». Получено 16 декабря 2018.
  86. ^ "AngularJS Material - Demos> Progress Circular". Получено 16 декабря 2018.
  87. ^ "(Циклический) предварительный загрузчик - Материализовать". Получено 16 декабря 2018.
  88. ^ «Компонент Circular Progress React - Material-UI». Получено 16 декабря 2018.
  89. ^ "ПолимерЭлементы / бумага-флажок - webcomponents.org". Получено 16 декабря 2018.
  90. ^ "AngularJS Material - Demos> Checkbox". Получено 16 декабря 2018.
  91. ^ «Флажки - Материализовать». Получено 16 декабря 2018.
  92. ^ "Checkbox React component - Material-UI". Получено 16 декабря 2018.
  93. ^ «Флажки - компоненты материалов для Интернета». Получено 16 декабря 2018.
  94. ^ "ПолимерЭлементы / paper-radio-group - webcomponents.org". Получено 16 декабря 2018.
  95. ^ "ПолимерЭлементы / бумага-радио-кнопка - webcomponents.org". Получено 16 декабря 2018.
  96. ^ "AngularJS Material - Demos> Radio Button". Получено 16 декабря 2018.
  97. ^ «Радиокнопки - материализуются». Получено 16 декабря 2018.
  98. ^ «Компонент Radio React - Material-UI». Получено 16 декабря 2018.
  99. ^ «Радио-кнопки - материальные компоненты для Интернета». Получено 16 декабря 2018.
  100. ^ "PolymerElements / paper-toggle-button - webcomponents.org". Получено 16 декабря 2018.
  101. ^ "AngularJS Material - Demos> Switch". Получено 16 декабря 2018.
  102. ^ «Переключатели - Материализоваться». Получено 16 декабря 2018.
  103. ^ «Переключить компонент React - Material-UI». Получено 16 декабря 2018.
  104. ^ «Коммутаторы - материальные компоненты для Интернета». Получено 16 декабря 2018.
  105. ^ а б "Материал AngularJS - Демонстрации> Нижний лист". Получено 16 декабря 2018.
  106. ^ "(Нижний лист) Модальные элементы - Материализовать". Получено 16 декабря 2018.
  107. ^ "(Обрезано под панелью приложения) Компонент Drawer React - Material-UI". Получено 17 декабря 2018.
  108. ^ «(Перелистываемый временный) компонент Drawer React - Material-UI». Получено 17 декабря 2018.
  109. ^ а б «ПолимерЭлементы / бумага-слайдер - webcomponents.org». Получено 17 декабря 2018.
  110. ^ а б "AngularJS Material - Demos> Slider". Получено 17 декабря 2018.
  111. ^ «Диапазон - Материализовать». Получено 17 декабря 2018.
  112. ^ «Компонент Slider React - Material-UI». Получено 17 декабря 2018.
  113. ^ «Material Design Lite (слайдеры)». Получено 17 декабря 2018.
  114. ^ «(Непрерывные) слайдеры - компоненты материалов для Интернета». Получено 17 декабря 2018.
  115. ^ «(Дискретные) слайдеры - компоненты материалов для Интернета». Получено 17 декабря 2018.
  116. ^ "ПолимерЭлементы / бумага-тост - webcomponents.org". Получено 17 декабря 2018.
  117. ^ "AngularJS Material - Demos> Toast".
  118. ^ «Тосты - материализуйся». Получено 17 декабря 2018.
  119. ^ «Компонент Snackbar React - Material-UI». Получено 17 декабря 2018.
  120. ^ «Material Design Lite (закусочная)». Получено 17 декабря 2018.
  121. ^ «Закусочные - компоненты материалов для Интернета». Получено 17 декабря 2018.
  122. ^ а б "ПолимерЭлементы / бумага-вкладка - webcomponents.org". Получено 17 декабря 2018.
  123. ^ а б «Материал AngularJS - Демонстрации> Вкладки». Получено 17 декабря 2018.
  124. ^ а б «Вкладки - Материализовать». Получено 17 декабря 2018.
  125. ^ "(Исправлено) Вкладки React component - Material-UI". Получено 17 декабря 2018.
  126. ^ а б «Вкладка - Компоненты материалов для Интернета». Получено 17 декабря 2018.
  127. ^ "(Прокручиваемый) компонент React Tabs - UI-материал". Получено 17 декабря 2018.
  128. ^ а б "ПолимерЭлементы / бумага-ввод - webcomponents.org". Получено 17 декабря 2018.
  129. ^ "(Заполненный) компонент React текстового поля - UI-материал". Получено 17 декабря 2018.
  130. ^ «Текстовое поле - компоненты материалов для Интернета». Получено 17 декабря 2018.
  131. ^ «(Обведенный) компонент React текстового поля - UI Материал». Получено 17 декабря 2018.
  132. ^ «(Обведенное) текстовое поле - компоненты материалов для Интернета». Получено 17 декабря 2018.
  133. ^ "PolymerElements / paper-tooltip - webcomponents.org". Получено 17 декабря 2018.
  134. ^ "AngularJS Material - Demos> Tooltip". Получено 17 декабря 2018.
  135. ^ «Всплывающие подсказки - Материализовать». Получено 17 декабря 2018.
  136. ^ «Компонент Tooltip React - Material-UI». Получено 17 декабря 2018.
  137. ^ «Material Design Lite (всплывающая подсказка)». Получено 17 декабря 2018.