Блог

Я создал отзывчивую панель навигации, используя компонент панели приложений React material UI.

Если размер экрана большой, на нем отображаются вкладки на панели навигации. Если размер экрана средний или меньше, он использует отзывчивый ящик material UI для отображения панели навигации (главная страница, информация и т.д.) С левой стороны прямо под панелью навигации. Как я могу переместить ящик пользовательского интерфейса с отзывчивыми материалами вправо?

https://material-ui.com/components/drawers/#responsive-drawer

Вы можете использовать доступный anchor реквизит (подробнее читайте здесь).

anchor='right'

          <Drawer
            container={container}
            variant="temporary"
            anchor='right'
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
          }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
         {drawer}
        </Drawer>
 

Вы можете просмотреть код и поле здесь