@WindBridges

Как в Vuetify ограничить контейнер по ширине, прижав к нему v-navigation-drawer?

Что хочу получить: контейнер с одной колонкой для контента, справа сайдбар ака navigation-drawer. Использовать сетку с колонками не нужно, т. к. контейнер должен занимать всю ширину экрана. Получается так:

<v-app>
  <v-navigation-drawer app clipped right permanent>...</v-navigation-drawer>
  <v-app-bar app clipped-right>...</v-app-bar>
  <v-main>
    <v-flex class="flex-column fill-height pa-4">
      ...
    </v-flex>
  </v-main>
</v-app>


Но при ширине окна больше 1200px, мой контент становится слишком растянутым и напрашивается ограничение максимальной ширины. Ширина контейнера, насколько я понял, в Vuetify ограничивается просто вручную с помощью max-width.

И оно работает, но проблема в том, что на большом разрешении контейнер располагается в центре, а сайдбар привязан к правому краю экрана, за счет чего между контейнером и сайдбаром образовывается пустое пространство. А хотелось бы, чтобы сайдбар был прижат к правому краю контейнера и образовывал с ним как бы неразрывный блок. А свободное место добавлялось бы слева от контейнера и справа от сайдбара. Условно что-то вроде этого:

[ . . . . . . . top bar . . . . . . . . ]
[space][....container....][drawer][space]


а сейчас получается так:
[ . . . . . . . top bar . . . . . . . . ]
[....container....][...space....][drawer]


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

Возможно так сделать?
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ответы на вопрос 1
@WindBridges Автор вопроса
Придумал решение на случай, если ничего более элегантного не найду.

@media (min-width: 1000px) {
        .v-application {
            max-width: calc(1000px - 30px);
            margin-left: calc((100vw - 1000px) / 2);
        }

        .v-navigation-drawer--right {
            right: calc((100vw - 1000px) / 2);
        }
    }


1000px можно заменить на другую максимальную ширину контейнера. 30px - это сумма отступов сайдбара или контейнера.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы