Vuetify - 更改默认导航抽屉宽度

Question

显然Vuetify有300px作为导航抽屉的默认宽度.

即使我将初始宽度更改为不同

<v-navigation-drawer id="add-expense-menu" ... style="width: 325px">

用于隐藏抽屉的变换仍然是300px,因此它的一部分突出.

有没有办法更改此组件的默认宽度？

Answer 1

不要使用内联CSS设置样式.相反,请使用组件可用的道具,并将所需的宽度绑定到它,即:

<v-navigation-drawer v-bind:width="325">

如果你熟悉短号,那么使用:width="325"就行了,即

<v-navigation-drawer :width="325">

Answer 2

从最新版本的 vuetify 开始，您可以将宽度作为 prop 直接传递给 v-navigation-drawer。幸运的是，这也允许使用百分比：

<v-navigation-drawer width="325"> //pixels
<v-navigation-drawer width="25%"> //percentage