Vuetify заставляет элементы оставаться в одной строке и изменять размер в зависимости от содержимого - PullRequest
Новая
       25

Vuetify заставляет элементы оставаться в одной строке и изменять размер в зависимости от содержимого

0 голосов
/ 28 мая 2020

Я хотел бы иметь один v-ряд с кнопкой на правом краю и заполнить остальное пространство множеством кнопок внутри v-chip-group. Кнопок больше, чем свободного места. Группа v-chip-group должна сжиматься / заполнять пространство между левым краем и правой кнопкой (компонент v-chip-group предоставляет стрелки, чтобы вы могли «листать» содержимое).

В настоящее время правая вместо этого нажимается на новую строку, и v-chip-group заполняет всю строку. 

<v-row no-gutters>
   <v-col>
      <v-chip-group>
         <v-btn text @click="goTo(drive)" v-for="drive in drives" :key="drive.name">{{ drive.name }}</v-btn>
         <v-btn text @click="goTo(home)">Home</v-btn>
         <v-btn text v-for="location in favourites" :key="location.name">{{ location.name }}</v-btn>
      </v-chip-group>
   </v-col>
   <v-col>
      <v-btn text><v-icon>mdi-close</v-icon></v-btn>
   </v-col>
</v-row>

1 Ответ

0 голосов
/ 28 мая 2020

Не уверен, что понимаю вашу цель на 100%, но похоже, что вы хотите добавить свойство cols в свои столбцы. Таким образом, самая правая кнопка никогда не переместится в новый ряд, а группа микросхем будет использовать максимально доступное пространство. Это поведение по умолчанию для всех размеров экрана. Если вы хотите, чтобы точка останова lg работала иначе, вы можете добавить, например, lg="6". 

    <v-row no-gutters>
        <v-col cols="11">   <--- here
          <v-chip-group>
            <v-btn text v-for="drive in drives" :key="drive.name">
              {{ drive.name }}
            </v-btn>
            <v-btn text>Home</v-btn>
            <v-btn text v-for="location in favourites" :key="location.name">
              {{ location.name }}
            </v-btn>
          </v-chip-group>
        </v-col>
        <v-col cols="1">   <---- and here
          <v-btn text><v-icon>mdi-close</v-icon></v-btn>
        </v-col>
      </v-row>
...