小编Dan*_*dra的帖子

如何使用 vuetify 制作移动响应式导航栏

我有一个 vuetify 选项卡组件,我希望将其用作我的导航菜单。我想使用 vuetify 创建一个响应式导航栏。这是我的代码。<y 要求就像正常的导航栏一样工作。当我在移动设备中打开页面时,它应该隐藏菜单并显示汉堡菜单。

导航栏.vue


<template>
    <v-card>
      <v-toolbar
        color="cyan"
        dark
        flat
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
  

    enter code here
        <v-toolbar-title>Your Dashboard</v-toolbar-title>
  
        <v-spacer></v-spacer>
  
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
  
        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
  
        <template v-slot:extension>
          <v-tabs
            v-model="tab"
            align-with-title
          >
            <v-tabs-slider color="yellow"></v-tabs-slider>
  
            <v-tab
              v-for="item in items"
              :key="item"
            >
              {{ item }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>
  
      <v-tabs-items v-model="tab">
        <v-tab-item
          v-for="item in items"
          :key="item"
        >
         
        </v-tab-item>
      </v-tabs-items>
    </v-card>
</template>

<script>
export default {
  el: '#app',
  data () {
    return {
      tab: null,
      items: [
        'web', 'shopping', 'videos', …
Run Code Online (Sandbox Code Playgroud)

css navigation laravel vue.js vuetify.js

3
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

laravel ×1

navigation ×1

vue.js ×1

vuetify.js ×1