Как я могу создать этот полужидкий макет в пользовательском интерфейсе React Material?

Question

Я пытаюсь создать следующий макет для полноэкранного настольного веб-приложения с использованием пользовательского интерфейса React Material:

• Строка заголовка будет обычной AppBar
• Панель инструментов слева имеет фиксированную ширину и тянется до нижней части экрана
• Нижняя область имеет фиксированную высоту
• Основная область и боковая область заполняют оставшуюся область, причем боковая область составляет примерно 30% ширины основной области

Обратите внимание, что это для применения при ширине 100% и высоте 100% (нет вертикальная прокрутка). Ни одна из областей не требует скольжения (т.е. выдвижные ящики).

Хотя я мог бы закодировать это с использованием простого CSS, этот проект требует "подхода с использованием пользовательского интерфейса материала". Я чувствую себя перегруженным многими вариантами макета и не могу определить, какие Компоненты были бы адекватны для этого полужидкого макета.

Каким был бы способ «Material UI» для реализации этого?

Answer 1

После отсутствия ответов и некоторых экспериментов, я обнаружил, что Material UI предоставляет компонент "Grid" в качестве абстракции элементов flexbox.

Я решил это, используя следующие свойства Grid:

• flexBasis для создания элементов фиксированной ширины
• flexGrow: 1 для увеличения размера элементов сетки для заполнения оставшегося пространства
• высота: 100% на всех контейнерах структуры (включая HTML и BODY) для заполнения высоты экрана.

Различные значения flexGrow позволяют дать некоторым столбцам относительную ширину , аналогично указанию процентов.

Я не пишу соответствующий код, поскольку flexbox широко обсуждался в StackOverflow; ответ на этот вопрос был «использовать элемент сетки». Следующая ссылка ясно объясняет концепции: Полное руководство по FlexBox