I have a problem that i created a navbar with Vuetify but it isn't responsive.
<template>
<v-app-bar app color="#00008B" dark class="px-8 my-nav">
<v-btn icon>
<v-icon color="E1F39E">{{icon}}</v-icon>
</v-btn>
<v-spacer> </v-spacer>
<v-btn text>Startseite</v-btn>
<router-link to="/Produkte"><v-btn text>Produkte</v-btn></router-link>
<v-btn text>Dienste</v-btn>
<v-btn text>Über uns</v-btn>
<v-btn text>News</v-btn>
<v-btn text>Kontakt</v-btn>
</v-app-bar>
</template>
Related
I'm struggling with Vuetify App bar to make it scrollable horizontally.
Is it possible to make it scrollable or collapsable in any way?
I'm using Nuxt/Vuetify to build a platform.
this is the image of web view
This is the image of mobile view
Use v-slide-groups instead. https://vuetifyjs.com/en/components/slide-groups/ Please check the pen 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>
No option by Vuetify API. Any way you could use the idea/concept you find her (Basic CSS not related to vue/vuetify):
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp -or- https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu
style="overflow-x:auto; white-space: nowrap;"
Example:
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>
Use Media-Q if you want to disable this idea on desktop.
I have written the following code for my AppBar using Vuetify component framework:
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<nav>
<v-app-bar app>
<v-btn v-if="$vuetify.breakpoint.smAndDown" #click="openDrawer = !openDrawer" text icon>
<v-icon>mdi-view-headline</v-icon>
</v-btn>
<v-btn v-else :to="{name: 'home'}" text color="primary" class="ml-3" icon>
<!-- Logo -->
<img height="48"
:src="require('#/assets/logo.svg')"
alt="Manassa Logo"/>
</v-btn>
<div v-if="$vuetify.breakpoint.mdAndUp" class="mx-6"></div>
<v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
<v-btn :to="{name: 'products'}" text color="primary">{{ $t('appBar.products') }}</v-btn>
<v-btn :to="{name: 'services'}" text color="primary">{{ $t('appBar.services') }}</v-btn>
<v-btn :to="{name: 'news'}" text color="primary">{{ $t('appBar.news')}}</v-btn>
<v-btn :to="{name: 'blogs'}" text color="primary">{{ $t('appBar.blogs')}}</v-btn>
<v-btn :to="{name: 'about'}" text color="primary">{{ $t('appBar.about')}}</v-btn>
<v-btn :to="{name: 'help'}" text color="primary">{{ $t('appBar.help')}}</v-btn>
<v-btn :to="{name: 'contact-us'}" text color="primary">{{ $t('appBar.contact-us')}}</v-btn>
</v-toolbar-items>
</v-app-bar>
</nav>
</template>
However, the navbar buttons always have background-color.
How can I fix this?
I have the below template (no need to put the here for the purpose of this question):
<template>
<div>
<v-card :color="variant">
<v-card-actions>
<v-tooltip top>
<v-btn icon slot="activator" #click="openConsole">
<v-icon>computer</v-icon>
</v-btn>
<span>Console</span>
</v-tooltip>
<v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
I want a tooltip to be shown whenever mouse hovers on the Console Icon button.
What am I missing here?
Is there an issue with tooltip on Icons inside v-card-actions ?
I looked at this reference https://codepen.io/anon/pen/MOLjVz?editors=1010 but couldn't apply it in my code
Perhaps you're using a newer vuetify version which has different syntax? Try this:
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn v-on="on" #click="openConsole" icon>
<v-icon>computer</v-icon>
</v-btn>
</template>
<span>Console</span>
</v-tooltip>
Check out Vuetify docs for more details
Found the solution myself:
need to add data-app attribute at the root div component:
<div data-app>
<v-card :color="variant">
<v-card-actions>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn v-on="on" #click="openConsole" icon>
<v-icon>computer</v-icon>
</v-btn>
</template>
<span>Console</span>
</v-tooltip>
<v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
</v-btn>
</v-card-actions>
</div>
Vuetify V2.1.9
Cant Develop a responsive navbar design with vuetify.
while i try to code using the following i am not able to develop a responsive navbar design. it is not working.if you can please fix the code it would be helpful. Thanks in advance . have a happy coding. my requirement is like a normal navbar working .when i open the page in mobile it should hide the ment and show the hamburger menu.
<v-navigation-drawer v-model="sideNav" absolute temporary>
<v-list-item-content class="hidden-sm-and-up">
<v-list dense>
<v-list-item v-for="item in guestNav" :key="item.name" link>
<v-list-item-icon>
<v-icon>mdi-user</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.name }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-list-item-content>
</v-navigation-drawer>
<v-toolbar color="#00A972" dark height="50px">
<v-spacer></v-spacer>
<v-toolbar-title>
<h5 style="font-weight: 500;">Projects</h5>
</v-toolbar-title>
<v-app-bar-nav-icon #click.native="sideNav = !sideNav" class="hidden-sm-and-up"></v-app-bar-nav-icon>
<div class="flex-grow-1"></div>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-up">
<v-row justify="center">
<v-btn
text
:ripple="false"
color="white"
style="margin-top:7px;margin-right:20px;font-weight:400"
>HOME</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-row justify="center">
<v-btn
text
:ripple="false"
color="white"
style="margin-top:7px;margin-right:20px;font-weight:400"
>STORE</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-row justify="center">
<v-btn
text
:ripple="false"
color="white"
style="margin-top:7px;margin-right:20px;font-weight:400"
>WALLET</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-row justify="center">
<v-btn
text
:ripple="false"
color
style="margin-top:7px;margin-right:20px;font-weight:400"
>LOG IN</v-btn>
<v-btn
text
:ripple="false"
class="green"
dark
style="margin-top:7px;margin-right:20px;font-weight:400;background-color: #38B98A!important;"
>SIGN UP</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-toolbar-items>
</v-toolbar>
Use the media query to make the navbar responsive as follows
#media only screen and (max-width: 768px) { .nav_item {
display: none !important; } }
This is my toolbar, and I have problems with the the first button/menu.
I want it, when highlighted to have the same look as when the other buttons are highlighted. I've tried with py-3 and py-2 class on the v-btn, but then it gets squeed or does not fill the entire toolbar erea.
<v-toolbar dark dense app color="blue-grey darken-2">
<v-toolbar-side-icon #click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase">
<router-link :to="{ name: 'home' }" class="brand-logo white--text">
<span>Byte</span>
<span class="font-weight-light">[Gym]</span>
</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-menu v-if="user" offset-y transition="slide-y-transition" open-on-hover>
<template v-slot:activator="{ on }">
<v-btn flat v-on="on">
<v-icon>expand_more</v-icon><v-btn flat to="/training">Training</v-btn>
</v-btn>
</template>
<v-list>
<v-list-tile v-for="item in traininglinks" :key="item.text" router :to="item.route">
<v-list-tile-title>{{ item.text }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-btn flat to="/nutrition">Nutrition</v-btn>
<v-btn flat to="/about">About</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-btn v-if="user" flat>{{user.email}}</v-btn>
<v-btn v-if="!user" icon to="/login">
<v-icon>account_circle</v-icon>
</v-btn>
<v-btn v-if="user" icon #click="logout">
<v-icon right>exit_to_app</v-icon>
</v-btn>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon class="hidden-sm-and-up">
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
I want it to look like the other buttons when they are active, but now its only a tiny box around it. I feels this should work out of the box?
Can't find an answer for this anywhere..
So the problem here is that you're putting a button inside of a button. If you remove the v-btn around Training then it works the way it's supposed to.
<template v-slot:activator="{ on }">
<v-btn flat v-on="on">
<v-icon>expand_more</v-icon>Training
</v-btn>
</template>
Working codepen here: https://codepen.io/CodingDeer/pen/rNBjLOJ?editors=1010