[英]How to prevent vuetify navigation drawer wrap content?
I am making a vuetify v-navigation-drawer
with two lists.我正在制作一个带有两个列表的 vuetify
v-navigation-drawer
。
If my window has enough height, the two lists looks good like this:如果我的 window 有足够的高度,这两个列表看起来不错:
But if I resize my window height to be shorter, the second list wrapped to the bottom like this image:但是,如果我将 window 高度调整为更短,第二个列表会像这张图片一样包裹到底部:
My drawer template is:我的抽屉模板是:
<v-navigation-drawer
id="nav1"
permanent
clipped
app
:width="drawerWidth"
>
<v-row class="fill-height" no-gutters>
<v-col>
<v-navigation-drawer id="nav2" permanent :mini-variant="isMiniVariant">
<v-list>
<v-list-item-group v-model="selectedId" mandatory>
<v-list-item
v-for="(item, i) in mainItems"
:key="i"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.name" />
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
</v-col>
<v-col>
<v-list
width="56px"
style="background-color: darkred"
>
<v-list-item-group>
<v-list-item
v-for="(s, index) in subFunctions"
:key="s.name"
:value="index"
style="padding-left: 0px; padding-right: 0px"
>
<v-icon style="margin: 16px">{{ s.icon }}</v-icon>
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
</v-row>
</v-navigation-drawer>
I want the right list not to be wrapped, even if the scrollbar is visible.我希望不包装正确的列表,即使滚动条可见。 How could I achieve this?
我怎么能做到这一点?
I found that the scrollbar is generated by the v-row
.我发现滚动条是由
v-row
生成的。
The default style of v-row
has an attribute of flex-wrap: auto
, so I have to modify my v-row
to have style="flex-wrap: nowrap"
. v-row
的默认样式具有flex-wrap: auto
属性,因此我必须修改我的v-row
以使其具有style="flex-wrap: nowrap"
。
Now since there is no scrollbar, the right v-col
will not be wrapped anymore.现在由于没有滚动条,右边的
v-col
将不再被包裹。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.