Material UI, компонент макета для перехода с рабочего стола на мобильный

Question

Привет, я пишу одно веб-приложение с пользовательским интерфейсом материала, должен быть отзывчивым, но я не знаю, какой именно элемент управления должен выделять сетевой компонент, если это сетка или блок.

На следующем изображении показано расположение основных компонентов в md, lg, xl

На следующем изображении показано расположение основных компонентов в см, xs при ширине < 960

В Интернете я нашел много сложных и очень сложных для понимания макетов, но не нашел базового c примера. Некоторые из них похожи на «Material UI отзывчивый для чайников».

Мобильная версия будет иметь разделительную страницу между Appbar и Sidenav, оба будут занимать всю высоту, а карта на второй странице заполнит экран.

Любая помощь будет приветствоваться

Привет

Answer 1

Показать мои коды и ящики, отвечающие на вашу проблему: https://codesandbox.io/s/amazing-sound-1nj87 Он правильно отображает ваш макет для md lg xl . Для экранов xs и sm sidenav и карта берут полную высоту с разрывной страницей между sidenav и appBa r

Answer 2

Благодаря обоим, это решило основную часть того, что мне нужно.

Также необходимо осуществить изменение страницы. Я забыл упомянуть, что на карте будет React-Leaflet, поэтому необходимо внедрить кнопку с надписью над картой для мобильной версии.

Кнопка предназначена для прокрутки вверх, потому что любое движение пальца в области карты только повлияет на содержимое карты. Не влияет на прокрутку.

Еще одна вещь, которую нужно реализовать, - это концепция страницы разрыва:

Поведение Разрыв страницы похож на то, когда вы видите PDF в режиме презентации и нажимаете кнопку на клавиатуре Repag - Avpag, он меняет весь контент и никогда не видит половину вершины и половину вниз.

Grettings

Answer 3

Я сделал это для вас с помощью MU Grids и медиа-запросов, если у вас есть вопросы, задавайте. Я всегда готов помочь. Это ссылка коды и коробка. Дайте мне знать, если это поможет вам. https://codesandbox.io/s/charming-shirley-oq6l5