Блог

Главная - Вопросы по программированию - V-вкладки Vuetify оставляют левую область пустой

V-вкладки Vuetify оставляют левую область пустой

#vue.js #nuxt.js #vuetify.js

Вопрос:

Я использую Vuetify в проекте Vuejs / Nuxt.

Элемент управления v-вкладками действительно хорош, но при очень маленьком экране он оставляет ненужное пустое пространство слева:

введите описание изображения здесь

Хотя показательные стрелки=ложь:

     <v-col cols="12" md="8" lg="9">
      <v-tabs
        coninuous
        :show-arrows="false"
        color="rgba(255, 255, 255, 0.6)"
        centered
        center-active
        icons-and-text
      >

У кого-нибудь есть идея, как использовать всю ширину видимого экрана для компонента v-вкладок?

Комментарии:

1. Попробуйте использовать grow реквизит для v-tabs

2. Очень хорошая идея… но также не заполняйте пространство слева, которое появляется, когда доступно немного ширины (и элементы не могут полностью отображаться в видимой области. Но вместо того, чтобы использовать полную ширину слева направо, он всегда оставляет пустой div. Вы можете увидеть, например, здесь более подробно: i.imgur.com/otLSQKv.png

3. Может быть, это из-за show-arrows реквизита. Удалите это полностью и посмотрите, что произойдет.

4. Существует открытая проблема, касающаяся этой проблемы на github vuetify.

Ответ №1:

В vuetify есть такие случаи, но в качестве той же проблемы я решил ее, добавив свой пользовательский css в .v-tab 

 .v-tab {
    letter-spacing: normal !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid #f7f7f7;
    margin: 13px 13px;
}
Метки: