【问题标题】:Vuetify 2 toolbar ans 1 navigation drawer with 1 toolbar above the navigation drawerVuetify 2 个工具栏和 1 个导航抽屉,导航抽屉上方有 1 个工具栏
【发布时间】:2019-09-15 23:02:21
【问题描述】:

我正在尝试实现这样的目标:

其实我有这个:

我的问题是目前我无法将第一个工具栏放在导航抽屉上方。

<template>
  <v-app>
    <v-toolbar app class="elevation-1">
        <span>Toolbar1</span>
    </v-toolbar>

    <v-toolbar app class="mt-5 elevation-1" style="top: 16px">
      <span>Toolbar2</span>
    </v-toolbar>

    <v-navigation-drawer app fixed permanent>
      <v-toolbar></v-toolbar>
      <v-toolbar flat>
        <v-list>
          <v-list-tile>
            <v-list-tile-title class="title">Filter</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-toolbar>
    </v-navigation-drawer>

    <v-content class="mt-5">
      <HomePage/>
    </v-content>
  </v-app>
</template>

【问题讨论】:

    标签: html vue.js vuetify.js


    【解决方案1】:

    我会先将clipped-left 添加到第一个工具栏,然后像这样将其移动到navigation-drawer 下。

    <template>
      <v-app>
        <v-navigation-drawer app fixed permanent>
          <v-toolbar></v-toolbar>
          <v-toolbar flat>
            <v-list>
              <v-list-tile>
                <v-list-tile-title class="title">Filter</v-list-tile-title>
              </v-list-tile>
            </v-list>
          </v-toolbar>
        </v-navigation-drawer>
    
        <v-toolbar app clipped-left class="elevation-1">
          <span>Toolbar1</span>
        </v-toolbar>
    
        <v-toolbar app class="mt-5 elevation-1" style="top: 16px">
          <span>Toolbar2</span>
        </v-toolbar>
    
        <v-content class="mt-5">
          <HomePage/>
        </v-content>
      </v-app>
    </template>
    

    不过,我强烈建议您熟悉 Vuetify 文档(关于这 2 个组件)上的可用道具,以便能够准确获得您想要的东西


    更新

    我对之前的答案做了一些丑陋的修复,以处理响应性并稍微清理代码。

    <template>
      <v-app>
        <v-navigation-drawer clipped permanent app>
          <v-list>
            <v-list-tile>
              <v-list-tile-title class="title">Menu Item #1</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-navigation-drawer>
    
        <v-toolbar clipped-left app>
          <span>Toolbar</span>
        </v-toolbar>
    
        <v-toolbar class="mt-5" :style="$vuetify.breakpoint.smAndDown ? 'top: 8px' : 'top: 16px'" app>
          <span>SubToolbar</span>
        </v-toolbar>
    
        <v-content :style="$vuetify.breakpoint.smAndDown ? 'padding-top: 112px' : 'padding-top: 128px'">
          <v-container fluid>
            Content
            <!-- <router-view></router-view> -->
          </v-container>
        </v-content>
      </v-app>
    </template>
    

    【讨论】:

    • 正是我想要的!我已经尝试过剪裁但没有指定left ....谢谢
    【解决方案2】:

    我刚刚回答了另一个类似的问题,尽管我第一次做错了,但我想我在编辑中赎回了自己,here

    无论如何,我也想做同样的事情,所以我将 v-content 更改为 v-main,以获得实际内容。 此外,使用了应用程序,永久和剪辑,没有固定道具。 在您的情况下,应用程序导航栏也应该具有裁剪权限。 这对我有用

    <v-app-bar
    app
    clipped-left
    color="#c4161c"
    dark
    >
    ...
    </v-app-bar>
    
    ...
    
    <v-navigation-drawer
    app
    permanent        
    clipped
    class="mt-100"        
    >
    ...
    </v-navigation-drawer>
    

    【讨论】:

      【解决方案3】:

      您可能想查看vuetify wireframes 的示例。 该功能有点隐藏,但是如果您单击示例,例如“Discord”,您将在右下角看到一个蓝色的 github 图标。只需点击它,它就会引导您前往code

      【讨论】:

        猜你喜欢
        • 2014-12-23
        • 2019-11-13
        • 2015-01-15
        • 2015-02-26
        • 2016-03-26
        • 1970-01-01
        • 2021-05-14
        • 1970-01-01
        相关资源
        最近更新 更多