如何使Vuetify应用程序栏可水平滚动

Question

我正在努力使Vuetify应用程序栏能够水平滚动。

是否可以使其以任何方式滚动或折叠？我正在使用Nuxt / Vuetify构建平台。this is the image of web view

This is the image of mobile view

Answer 1

Vuetify API没有选项。您可以使用任何找到她的想法/概念（基本CSS）：https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

style="overflow-x:scroll; white-space: nowrap;"

示例：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
  <v-app id="inspire">
    <div>
      <v-app-bar
                 color="deep-purple accent-4"
                 dense
                 dark
                 >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-spacer></v-spacer>
        <div style="overflow-x:scroll; white-space: nowrap;">
          <v-btn icon>
            <v-icon>mdi-heart</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-domain</v-icon>
          </v-btn>
           <v-btn icon>
            <v-icon>mdi-message</v-icon>
          </v-btn>
           <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-email</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-call-split</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-call-split</v-icon>
          </v-btn>        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
          </v-btn>
        </div>
       
      </v-app-bar>
    </div>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

如果要在桌面上禁用此想法，请使用Media-Q。