Vuetify 使项目保持在一行并根据内容调整大小

Question

我希望在右侧边缘有一个带有按钮的单个 v-row，并在 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>

Answer 1

不确定我是否 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>