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

Question

我正在努力使用 Vuetify 应用栏使其水平滚动。

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

This is the image of mobile view

Answer 1

改用 v-slide-groups。 https://vuetifyjs.com/en/components/slide-groups/请查笔Link

<v-app id="inspire" flex>
    <v-app-bar
      absolute
      color="cyan accent-3">
      <div class="d-flex flex-row align-center col-12">
        <div class="col-8 col-md-8">
        <v-slide-group show-arrows v-model="model">
        <v-slide-item v-slot:default="{ active, toggle }"
                    key="a">
        <v-btn icon @click="toggle">
          <v-icon>mdi-account-group</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="b">
        <v-btn icon @click="toggle">
          <v-icon>mdi-shield</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="c">
        <v-btn icon @click="toggle">
          <v-icon>mdi-school</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="d">
        <v-btn icon @click="toggle">
          <v-icon>mdi-book-open</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="e">
        <v-btn icon @click="toggle">
          <v-icon>mdi-grid</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="f">
        <v-btn icon @click="toggle">
          <v-icon>mdi-link</v-icon>
        </v-btn>
      </v-slide-item>
    </v-slide-group>
    </div>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-face</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-door</v-icon>
      </v-btn>
    </div>
    </v-app-bar>
    <v-content>
      <v-container class="mt-10">
         <v-row>
           <v-col>
              You have clicked on {{model}} link
           </v-col>
         </v-row>
      </v-container>
    </v-content>
  </v-app>

Answer 2

Vuetify API 没有选项。任何你可以使用你找到她的想法/概念的方式（与 vue/vuetify 无关的基本 CSS）： https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp - 或 - https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu

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

示例：

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

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.22/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/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:auto; 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>
          <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-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>
        </div>

      </v-app-bar>
    </div>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.22/dist/vuetify.min.js"></script>

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