How do I get rid of the padding separating the toolbar from the content?
I would like to achieve the same result like the picture below
Expectation:
What I got:
This is my App.vue file
<v-app>
<app-navigation></app-navigation>
<v-main>
<v-content class="ma-0 pa-0">
<div class="d-flex flex-wrap justify-center" width="900">
<img src="https://picsum.photos/300/300"/>
<img src="https://picsum.photos/600/300"/>
<img src="https://picsum.photos/700/300"/>
<img src="https://picsum.photos/200/300"/>
<img src="https://picsum.photos/400/300"/>
<img src="https://picsum.photos/500/300"/>
</div>
</v-content>
</v-main>
</v-app>
And this is my AppNavigation file - basically, the toolbar component:
<v-toolbar color="transparent" flat>
<router-link to="/">
<v-toolbar-title class="pr-10"> {{ appTitle }} </v-toolbar-title>
</router-link>
<v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
<v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
<v-btn class="hidden-sm-and-down" text rounded to="/about"> About </v-btn>
<v-spacer class="hidden-sm-and-down" ></v-spacer>
<v-btn class="hidden-sm-and-down" outlined rounded to="/sign-up"> SIGN UP</v-btn>
<v-btn class="hidden-sm-and-down" outlined rounded to="/log-in"> LOG IN </v-btn>
</v-toolbar>
Add absolute and width="100%" to the <v-toolbar/>.
<v-toolbar flat color="transparent" absolute width="100%">
...
</v-toolbar>
Demo:
Related
When using Vuetifies V-Window component I recognized that the left and right buttons are jumping when moving left or right.
Even on their examples it is the case: https://vuetifyjs.com/en/components/windows/#customized-arrows
Can anyone say how it can be fixed the best way for the "customized arrows" example?
You can set a height in v-windows component to solve it.
https://codepen.io/vinisalves/pen/yLVGVjZ?editors=1010
<div id="app">
<v-app id="inspire">
<v-card
color="black"
dark
flat
tile
>
<v-window v-model="onboarding" style="height: 200px"> <!-- here -->
<v-window-item
v-for="n in length"
:key="`card-${n}`"
>
<v-card
color="transparent"
height="200"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<v-card-text>
Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.
</v-card-text>
</v-row>
</v-card>
</v-window-item>
</v-window>
<v-card-actions class="justify-space-between">
<v-btn
text
#click="prev"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-item-group
v-model="onboarding"
class="text-center"
mandatory
>
<v-item
v-for="n in length"
:key="`btn-${n}`"
v-slot="{ active, toggle }"
>
<v-btn
:input-value="active"
icon
#click="toggle"
>
<v-icon>mdi-record</v-icon>
</v-btn>
</v-item>
</v-item-group>
<v-btn
text
#click="next"
>
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
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?
Need to place toolbar on top of the appbbar in the middle
now
how to do
The toolbar is in the appbar tag. And I need the toolbar to be in the center and above the appbar as in the picture. How to do it?
<template>
<v-app>
<v-app-bar app color="primary" dark prominent>
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>ГринКэп</v-toolbar-title>
<v-spacer></v-spacer>
<div>
<v-toolbar>
<v-toolbar-items>
<v-btn v-for="link in links" :key="link.title" :to="link.url" text>
<v-icon left>{{ link.icon }}</v-icon>
{{ link.title }}
</v-btn>
</v-toolbar-items>
</v-toolbar>
</div>
</v-app-bar>
Try this
<template>
<v-app>
<v-app-bar app color="primary" dark prominent style="position: relative;">
<v-app-bar-nav-icon #click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>ГринКэп</v-toolbar-title>
<v-spacer></v-spacer>
<div>
<v-toolbar absolute style="top: 65%;left: 50%; transform: translateX(-50%)">
<v-toolbar-items>
<v-btn v-for="link in links" :key="link.title" :to="link.url" text>
<v-icon left>{{ link.icon }}</v-icon>
{{ link.title }}
</v-btn>
</v-toolbar-items>
</v-toolbar>
</div>
</v-app-bar>
</template>
I have added top and left to the toolbar, you can remove position: relative on app bar if you want.
I use v-toolbar but when I scroll down it get disappears. Basically I want to a sticky header.
This is my code basically.
<div id="app">
<v-app>
<v-toolbar dense>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
<h1 v-for="n in 20" :key="n">{{n}}</h1>
</main>
</v-app>
</div>
Edit: Vuetify version 1.5:
You just need to add fixed to your v-toolbar which fixes the position, So:
<v-toolbar dense fixed>
You can see the documentation here
Version 2.0.0
Change from vuetify version 1.5 :
v-app-bar: Brand new component that was created to better scope the functionality of v-toolbar. All existing scrolling techniques and app functionality from v-toolbar has been moved. New scrolling techniques such as collapsing bar, scroll shrink and more have been added.
<v-app-bar fixed> would fix the toolbar. Documentation
Try this code.
<v-app id="inspire">
<div
class="hide-overflow"
style="position: relative;"
>
<v-toolbar
color="teal lighten-3"
dark
scroll-off-screen
scroll-target="#scrolling-techniques"
dense
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<main id="scrolling-techniques" class="scroll-y"
style="max-height: 625px;">
<h1 v-for="n in 20" :key="n">{{n}}</h1>
</main>
</div>
</v-app>
For those who just wants to have a sticky element either above or below,
you might want to try snackbars
<v-snackbar v-model="snackbar" timeout="-1" top app>
jojojojojo asdfjasldf
</v-snackbar>
I'm using Vuetify and to create multiple styled v-card, each card should contain link to a target but only by clicking the card's internal title or image. The problem is that I'm looping over my array of object's and wrapping each v-card with <router-link> so the entire card is clickable. here is the code:
<router-link v-for="recipe in recipes" :key="recipe.title" :to="{path: `recipe/${recipe.title}`}">
<v-card>
<v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75"></v-img>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ recipe.title }}</h3>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange" disabled>Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</router-link>
i found a way to attach router link to specific element using tags but that only allows me to connect single html element and here i want to use the same link on multiple elements.
any idea how can i modify this code so only the v-img and v-card-title will be linked to the recipe?
hope it works for you
<v-card v-for="recipe in recipes" :key="recipe.title">
<v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75"
:to="{path: `recipe/${recipe.title}`}"></v-img>
<v-card-title primary-title :to="{path: `recipe/${recipe.title}`}">
<div>
<h3 class="headline mb-0">{{ recipe.title }}</h3>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange" disabled>Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
i ended up setting it like this:
<v-card v-for="recipe in recipes" :key="recipe.title">
<router-link :to="{path: `recipe/${recipe.title}`}">
<v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75"></v-img>
</router-link>
<v-card-title primary-title>
<div>
<router-link :to="{path: `recipe/${recipe.title}`}">
{{ recipe.title }}
</router-link>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange" disabled>Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>