css - 如何使用 Vuetify 的组件“导航抽屉”重现此导航？

Question

我正在使用 Vuetify 和组件Navigation Drawer

我正在尝试重现此导航。

左边的菜单是固定的，即使我们调整浏览器窗口的大小，宽度也不会改变。

而当我们调整大小直到断点（宽度仍然没有改变）时，菜单消失并出现一个图标按钮，可以重新打开菜单悬停内容。

这正是我想要做的，但我尝试了很多东西，但没有任何效果。

有什么帮助吗？

这是我的代码：

    <v-navigation-drawer v-model="drawer" class="nav-container d-flex">
        <div class="options">
            <li></li> //items..
        </div>
      </v-navigation-drawer>
    
      <div style="min-width: 100px; max-width: 100%;" class="d-flex flex-column flex-grow-1 flex-shrink-0">
            //content
      </div>

有没有办法只用 Vuetify 来做到这一点？

标签： cssangularjsvue.jsvuetify.js

Answer 1

我认为这是 CSS 问题。

<div class="container">
 <div class="left-side">
  <ul>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
  </ul>
 </div>
</div>

CSS 样式

.container {
    display: flex;
    position: static;
    transform: translate3d(0,0,0);
    width: 272px;
    min-width: 272px;
    max-width: 272px;
}
.container > * {
    min-width: 218px;
}