Материалдық дизайнның орындалуын салыстыру - Comparison of Material Design implementations

Бұл парақта Google туралы жалпы ақпарат бар Материалдық дизайн іске асыру.

Ескертулер

2018 жылдың 15 желтоқсанындағы жағдай бойынша, егер көрсетілмесе, төменде келтірілген компоненттердің барлығы жаңа Материалдық дизайн сипаттамаларына сәйкес келеді.

Орындалған веб-компоненттер (2018 техникалық сипаттамалары)

КомпоненттерПолимер жобасыAngularJS материалыМатериалдауМатериал-UIMaterial Design 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]
Қалқымалы әрекет түймесі (АКА 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. ^ «App Bar React компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  2. ^ «PolymerElements / құралдар тақтасы - webcomponents.org». Алынған 15 желтоқсан 2018.
  3. ^ «AngularJS материалы - демонстар> құралдар тақтасы». Алынған 15 желтоқсан 2018.
  4. ^ «Навбар - материалдандыру». Алынған 15 желтоқсан 2018.
  5. ^ «App Bar React компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  6. ^ а б c г. e f «Материалдық дизайн Lite (макеті)». Алынған 15 желтоқсан 2018.
  7. ^ «Top App Bar - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  8. ^ «Төменгі навигациялық реакция компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  9. ^ а б «PolymerElements / paper-button - webcomponents.org». Алынған 15 желтоқсан 2018.
  10. ^ а б c г. «AngularJS материалы - демо> батырма». Алынған 15 желтоқсан 2018.
  11. ^ «Түймелер - іске асыру». Алынған 15 желтоқсан 2018.
  12. ^ «(Мәтін) Түймешік реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  13. ^ а б c г. «Material Design Lite (батырмалар)». Алынған 15 желтоқсан 2018.
  14. ^ «Түймешіктер - Интернетке арналған компоненттер». Алынған 15 желтоқсан 2018.
  15. ^ «(Сипатталған) батырманың реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  16. ^ «(Сипатталған) батырмалар - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  17. ^ «(Көтерілген) батырмалар - іске асыру». Алынған 15 желтоқсан 2018.
  18. ^ «(Қамтылған) батырманың реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  19. ^ «(Қамтылған) батырмалар - Интернетке арналған компоненттер». Алынған 15 желтоқсан 2018.
  20. ^ «Түймешіктерді қосу реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  21. ^ «PolymerElements / paper-icon-button - webcomponents.org». Алынған 15 желтоқсан 2018.
  22. ^ «(Белгіше) Түймешік реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  23. ^ «Белгіше батырмалары - Интернетке арналған компоненттер». Алынған 15 желтоқсан 2018.
  24. ^ а б c г. «Material Design Lite (қосқыштар)». Алынған 15 желтоқсан 2018.
  25. ^ «Іске қосу түймелері - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  26. ^ «PolymerElements / paper-fab - webcomponents.org». Алынған 15 желтоқсан 2018.
  27. ^ «(Өзгермелі әрекет) түймелері - іске асады». Алынған 15 желтоқсан 2018.
  28. ^ а б «(Өзгермелі әрекет) батырмасының реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  29. ^ «Қалқымалы әрекет түймесі - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  30. ^ «(Кеңейтілген) өзгермелі әрекет түймесі - Интернетке арналған компоненттер». Алынған 15 желтоқсан 2018.
  31. ^ «PolymerElements / қағаз-карта - webcomponents.org». Алынған 15 желтоқсан 2018.
  32. ^ «AngularJS материалы - демо> карта». Алынған 15 желтоқсан 2018.
  33. ^ «Карталар - материалдандыру». Алынған 15 желтоқсан 2018.
  34. ^ «Card React компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  35. ^ «Material Design Lite (карталар)». Алынған 15 желтоқсан 2018.
  36. ^ «Карталар - Интернеттегі материалдық компоненттер». Алынған 15 желтоқсан 2018.
  37. ^ «AngularJS материалы - демо> чиптер». Алынған 15 желтоқсан 2018.
  38. ^ «Чиптер - іске асыру». Алынған 15 желтоқсан 2018.
  39. ^ «Chip React компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  40. ^ «Material Design Lite (чиптер)». Алынған 15 желтоқсан 2018.
  41. ^ «Чиптер - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  42. ^ «Кесте - материалдандыру». Алынған 15 желтоқсан 2018.
  43. ^ «Table React компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  44. ^ «Material Design Lite (кестелер)». Алынған 15 желтоқсан 2018.
  45. ^ «PolymerElements / paper-dialog - webcomponents.org». Алынған 15 желтоқсан 2018.
  46. ^ «AngularJS материалы - демо> диалог». Алынған 15 желтоқсан 2018.
  47. ^ «Модальдар - материалдандыру». Алынған 15 желтоқсан 2018.
  48. ^ «Диалог реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  49. ^ «Material Design Lite (диалогтар)». Алынған 15 желтоқсан 2018.
  50. ^ «Диалогтар - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  51. ^ «AngularJS материалы - демонстар> бөлгіш». Алынған 15 желтоқсан 2018.
  52. ^ «Бөлгіштің реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  53. ^ «Тізім (бөлгіштер) - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  54. ^ «AngularJS материалы - демо> тор тізімі». Алынған 15 желтоқсан 2018.
  55. ^ «Тор - материалдандыру». Алынған 15 желтоқсан 2018.
  56. ^ «Торлар тізімі реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  57. ^ «Тор тізімдері - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  58. ^ «PolymerElements / paper-item - webcomponents.org». Алынған 15 желтоқсан 2018.
  59. ^ «AngularJS материалы - демо> тізім». Алынған 15 желтоқсан 2018.
  60. ^ «Жинақтар - материалдандыру». Алынған 15 желтоқсан 2018.
  61. ^ «List React компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  62. ^ «Material Design Lite (тізімдер)». Алынған 15 желтоқсан 2018.
  63. ^ «Тізімдер - Интернеттегі материалдық компоненттер». Алынған 15 желтоқсан 2018.
  64. ^ «PolymerElements / paper-menu-button - webcomponents.org». Алынған 15 желтоқсан 2018.
  65. ^ «AngularJ S материалы - демо> мәзір». Алынған 15 желтоқсан 2018.
  66. ^ «Ашу - іске асыру». Алынған 15 желтоқсан 2018.
  67. ^ «Мәзір реакциясы компоненті - материал-UI».
  68. ^ «Material Design Lite (мәзірлер)». Алынған 15 желтоқсан 2018.
  69. ^ «Мәзірлер - Интернетке арналған компоненттер». Алынған 15 желтоқсан 2018.
  70. ^ «PolymerElements / paper-dropdown-button - webcomponents.org». Алынған 15 желтоқсан 2018.
  71. ^ «AngularJS материалы - демонстрациялар> таңдау». Алынған 15 желтоқсан 2018.
  72. ^ «Таңдау - материалдандыру». Алынған 15 желтоқсан 2018.
  73. ^ «React компонентін таңдаңыз - Material-UI». Алынған 15 желтоқсан 2018.
  74. ^ «Мәзірді таңдау - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  75. ^ а б c «PolymerElements / paper-drawer-panel - webcomponents.org». Алынған 15 желтоқсан 2018.
  76. ^ а б c «AngularJS материалы - демо> Сиденав». Алынған 15 желтоқсан 2018.
  77. ^ а б c «Сиденав - материалдандыру». Алынған 15 желтоқсан 2018.
  78. ^ «Тартпа реакциясы компоненті - материал-UI». Алынған 15 желтоқсан 2018.
  79. ^ а б c «Жәшіктер - Интернеттегі материал компоненттері». Алынған 15 желтоқсан 2018.
  80. ^ «PolymerElements / paper-progress - webcomponents.org». Алынған 15 желтоқсан 2018.
  81. ^ «AngularJS материалы - демонстрациялар> сызықтық прогресс». Алынған 16 желтоқсан 2018.
  82. ^ «(Сызықтық) алдын-ала жүктегіш - материалдандыру». Алынған 16 желтоқсан 2018.
  83. ^ «Сызықтық прогресс реакциясы компоненті - материал-UI». Алынған 16 желтоқсан 2018.
  84. ^ а б «Material Design Lite (шеңберлік / сызықтық прогресс)». Алынған 16 желтоқсан 2018.
  85. ^ «Сызықтық прогресс - Интернеттегі материалдық компоненттер». Алынған 16 желтоқсан 2018.
  86. ^ «AngularJS материалы - демонстрациялар> ілгерілеу шеңбері». Алынған 16 желтоқсан 2018.
  87. ^ «(Дөңгелек) алдын-ала тиегіш - материалдандыру». Алынған 16 желтоқсан 2018.
  88. ^ «Дөңгелек прогресс реакциясы компоненті - материал-UI». Алынған 16 желтоқсан 2018.
  89. ^ «PolymerElements / paper-checkbox - webcomponents.org». Алынған 16 желтоқсан 2018.
  90. ^ «AngularJS материалы - көрсетілімдер> құсбелгі». Алынған 16 желтоқсан 2018.
  91. ^ «Құсбелгілер - іске асыру». Алынған 16 желтоқсан 2018.
  92. ^ «Реакция құсбелгі компоненті - материал-UI». Алынған 16 желтоқсан 2018.
  93. ^ «Құсбелгілер - Интернеттегі материал компоненттері». Алынған 16 желтоқсан 2018.
  94. ^ «PolymerElements / paper-radio-group - webcomponents.org». Алынған 16 желтоқсан 2018.
  95. ^ «PolymerElements / қағаз-радио-батырма - webcomponents.org». Алынған 16 желтоқсан 2018.
  96. ^ «AngularJS материалы - демонстрациялар> радио батырмасы». Алынған 16 желтоқсан 2018.
  97. ^ «Радио батырмалары - материалдандыру». Алынған 16 желтоқсан 2018.
  98. ^ «Radio React компоненті - материал-UI». Алынған 16 желтоқсан 2018.
  99. ^ «Радио батырмалары - Интернеттегі материал компоненттері». Алынған 16 желтоқсан 2018.
  100. ^ «PolymerElements / paper-toggle-button - webcomponents.org». Алынған 16 желтоқсан 2018.
  101. ^ «AngularJS материалы - демо> ауыстырып қосу». Алынған 16 желтоқсан 2018.
  102. ^ «Ауыстырғыштар - іске асыру». Алынған 16 желтоқсан 2018.
  103. ^ «Switch React компоненті - Material-UI». Алынған 16 желтоқсан 2018.
  104. ^ «Ауыстырғыштар - Интернеттегі материалдың компоненттері». Алынған 16 желтоқсан 2018.
  105. ^ а б «AngularJS материалы - демонстрациялар> төменгі парақ». Алынған 16 желтоқсан 2018.
  106. ^ «(Төменгі парақ) қалыптары - материалдандыру». Алынған 16 желтоқсан 2018.
  107. ^ «(Қолданба жолағымен қиылған) Тартпа реакциясы компоненті - Material-UI». Алынған 17 желтоқсан 2018.
  108. ^ «(Жылжытылатын уақытша) тартпаның реактивті компоненті - материал-UI». Алынған 17 желтоқсан 2018.
  109. ^ а б «PolymerElements / paper-slider - webcomponents.org». Алынған 17 желтоқсан 2018.
  110. ^ а б «AngularJS материалы - демо> слайдер». Алынған 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. ^ «PolymerElements / қағаз-тост - webcomponents.org». Алынған 17 желтоқсан 2018.
  117. ^ «AngularJS материалы - демо> тост».
  118. ^ «Тосттар - іске асу». Алынған 17 желтоқсан 2018.
  119. ^ «Snackbar React компоненті - Material-UI». Алынған 17 желтоқсан 2018.
  120. ^ «Material Design Lite (Snackbar)». Алынған 17 желтоқсан 2018.
  121. ^ «Snackbars - Интернеттегі материал компоненттері». Алынған 17 желтоқсан 2018.
  122. ^ а б «PolymerElements / paper-tab - webcomponents.org». Алынған 17 желтоқсан 2018.
  123. ^ а б «AngularJS материалы - демо> қойындылар». Алынған 17 желтоқсан 2018.
  124. ^ а б «Қойындылар - материалдандыру». Алынған 17 желтоқсан 2018.
  125. ^ «(Fixed) Tabs React компоненті - Material-UI». Алынған 17 желтоқсан 2018.
  126. ^ а б «Tab - Интернеттегі материал компоненттері». Алынған 17 желтоқсан 2018.
  127. ^ «(Айналдырылатын) қойындылар React компоненті - Material-UI». Алынған 17 желтоқсан 2018.
  128. ^ а б «PolymerElements / paper-input - webcomponents.org». Алынған 17 желтоқсан 2018.
  129. ^ «(Толтырылған) Мәтін өрісінің реакциясы компоненті - материал-UI». Алынған 17 желтоқсан 2018.
  130. ^ «Мәтін өрісі - Интернеттегі материал компоненттері». Алынған 17 желтоқсан 2018.
  131. ^ «(Мазмұны көрсетілген) мәтін өрісінің реакциясы компоненті - материал-UI». Алынған 17 желтоқсан 2018.
  132. ^ «(Қысқаша) мәтін өрісі - Интернеттегі материал компоненттері». Алынған 17 желтоқсан 2018.
  133. ^ «PolymerElements / қағаз кеңесі - webcomponents.org». Алынған 17 желтоқсан 2018.
  134. ^ «AngularJS материалы - көрсетілімдер> кеңестер». Алынған 17 желтоқсан 2018.
  135. ^ «Кеңестер - материалдандыру». Алынған 17 желтоқсан 2018.
  136. ^ «React компоненттерінің кеңесі - материал-UI». Алынған 17 желтоқсан 2018.
  137. ^ «Материалдық дизайн нұсқасы (кеңестер)». Алынған 17 желтоқсан 2018.