将 v-btn-toggle 扩展到容器宽度的 100%

Question

我正在使用 vuetify 和 v-btn-toggle。我想让按钮扩展到它们所在容器的 100%。我想有一种方法可以使用 vuetify 的各个方面而不是自定义 css 来做到这一点，但如果是这样的话我无法弄清楚.有没有 vuetify 的方法来做到这一点？

<v-btn-toggle v-model="type" mandatory tile color="primary">
  <v-btn value="text">Note</v-btn>
  <v-btn value="list">List</v-btn>
  <v-btn value="upload">Upload</v-btn>
</v-btn-toggle>

Answer 1

使用d-flex

<v-btn-toggle v-model="type" mandatory tile color="primary" class="d-flex flex-row">
  <v-btn value="text" class="flex-grow-1">Note</v-btn>
  <v-btn value="list" class="flex-grow-1">List</v-btn>
  <v-btn value="upload" class="flex-grow-1">Upload</v-btn>
</v-btn-toggle>

将 v-btn-toggle 扩展到容器宽度的 100%

Expand v-btn-toggle to 100% width of container

vuejs2

vuetify.js