Не в состоянии понять взаимосвязь между компоновкой MDL и компонентами MDL Grid

С сайта MDL:

  • Компоновка: "Компонент компоновки MDL представляет собой комплексный подход к компоновке страницы, который использует принципы разработки MDL, позволяет эффективно использовать компоненты MDL и автоматически адаптируется к различным браузерам, размерам экрана и устройствам".
    Дальше вперед -
    "Использование принципов компоновки MDL упрощает создание масштабируемых страниц за счет предоставления повторно используемых компонентов и обеспечения согласованности в разных средах путем создания узнаваемых визуальных элементов, соблюдения логических структурных сеток и поддержания соответствующего расстояния между различными платформами и размерами экрана".

  • Grid: "Компонент Grid MDL - это упрощенный метод для размещения контента на экранах нескольких размеров".

Таким образом, из приведенного выше определения макета может показаться, что поведение сетки включено. Не в состоянии понять, как.

Я не смог найти ни одного примера, которые бы использовали MDL Grid и Layout вместе.

Итак, они как-то взаимоисключающие? Как эти два связаны? Каковы лучшие практики для использования каждого из них, вместе или один над другим?

Пожалуйста, помогите мне понять. Благодарю.

Источник

2 ответа

Решение

Макет MDL - это контейнер, который содержит различные компоненты, заключенные между классом mdl-layout и, по сути, структурой проекта. Вообразите это как внешние стены здания.

Сетка MDL - это сетка из 12 столбцов, в которой вы можете выбрать, где разместить определенные компоненты на странице. Они заключены в классы mdl-grid, mdl-cell, mdl-cell - # - col. Представьте это как мебель внутри здания и решите, где ее поставить.

Они отличаются тем, что MDL Layout на самом деле не является инструментом разметки, поэтому вы можете указать, куда направляется компонент. Это то, что он предоставляет вам строительные блоки, которые вы можете реализовать в своем проекте, такие как панель навигации, ящик, нижний колонтитул и т. Д. Что это означает, когда он говорит:

"Компонент MDL Layout - это комплексный подход к макету страницы, который использует принципы разработки MDL, позволяет эффективно использовать компоненты MDL и автоматически адаптируется к различным браузерам, размерам экрана и устройствам".

заключается в том, что при просмотре на экранах разных размеров некоторые компоненты будут автоматически настраиваться без необходимости создавать медиазапросы для разных устройств. Например, ящик будет скрыт на телефоне, а рабочий стол покажет его (если указан). Или только рабочий стол будет иметь панель навигации / заголовка, а телефон - нет. Или даже панель навигации / заголовка будет зафиксирована на рабочем столе / телефоне, в то время как другие будут прокручиваться вместе с экраном.

Сетка MDL, однако, является способом размещения вашего другого контента на странице. Вы хотите сделать две вещи рядом на рабочем столе и рухнуть при просмотре его на телефоне? MDL Grid делает это. Хотите показать три фотографии рядом на рабочем столе, а затем свернуть, чтобы показать их в разных строках при просмотре на телефоне? MDL Grid делает это. MDL Grid не предоставляет готовые компоненты. Это всего лишь инструмент для указания, где выложить вещи на странице. Чтобы найти больше информации, ищите 12-сеточную систему. Это должно пролить свет на это.

Шаблон блога, представленный на странице getmdl.io, использует их в сочетании друг с другом: http://www.getmdl.io/templates/blog/index.html

Источник

Компоновка MDL будет динамически сдвигать то, что вы создаете, в зависимости от ширины экрана.

Сетка MDL позволяет вам определять, что будет отображаться в любое время, устанавливая количество столбцов для экранов разного размера.

Например, допустим, вы делаете страницу, которая просто отображает

(1, 2, 3, 4)

Под MDL-Layout, если устройство просмотра сжимается, оно может изменить эту страницу для отображения

(1, 2,

3, 4)

Под MDL-Grid, если вы пошли и написали mdl-cell -4-col-phone с каждым номером в отдельном столбце, независимо от того, насколько мала область просмотра (1, 2, 3, 4), она всегда будет отображаться встроенной, даже если его ширина уменьшилась до такой степени, что он стал нечитаемым, поскольку вы определили поведение при просмотре на этом размере экрана.

Таким образом, они являются взаимоисключающими, поскольку вы либо позволяете компоненту макета MDL решать, что отображать при разной ширине вида, либо устанавливаете его самостоятельно с помощью MDL-Grid. Тем не менее, я не удивлюсь, если бы они действовали очень похожим образом для класса "

Отказ от ответственности, я никогда не использовал MDL-Lite, но использовал угловой материал и смотрел его для будущих проектов.

Источник
Другие вопросы по тегам