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>
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>
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:
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'm new to Vuetify. Here i confuse how to remove left and right margin/padding.
Here what I've done:
<template>
<v-app light>
<v-toolbar fixed app :clipped-left="clipped" color="deep-orange accent-3">
<v-toolbar-side-icon #click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title v-text="title"></v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-content>
<v-container pa-0 ma-0>
<nuxt/>
</v-container>
</v-content>
<v-footer :fixed="fixed" app></v-footer>
</v-app>
</template>
Demo
But as you can see, the grey box is still affected by margin/padding. Please help. Thanks.
I'm new to vuetify.js and started playing around with it.
This is my code.
Admin-panel.vue
<v-content class="yellow">
<v-container>
<v-layout>
<router-view></router-view>
</v-layout>
</v-container>
</v-content>
create-user.vue
<template>
<v-container class="red">
<v-layout class="blue">
<v-flex md12>
form
</v-flex>
</v-layout>
</v-container>
</template>
Here I can see v-container element gets the full width available.
What I want is my v-container inside the create-user component to get the that same width. (Yellow will disappear and red will fill the screen)
How do I achieve this?
Use the fluid prop:
<v-container
fluid
/>
Codepen.
I was having the same issue.
I realized that in my instance I had a <v-content> on both the parent and child page. The <v-content> is used to make the app look pretty and manage spacing on the nav bar and title bar.
Be sure you only have one declared in your app.
Did you try using the margin and padding classes/props?
<v-container class="red ma-0">
or
<v-container class="red" :ma-0="$vuetify.breakpoint.mdAndDown">
for having the full screen only for mobile devices?
The answer posted by #Billial Begueradj is perfect. However, problem may still persist if there's an unchecked v-container tag up the hierarchy.
This will NOT work
<v-container>
<v-container fluid>This will not work</v-container>
<v-container>
In the above code, the inner v-container tag will not achieve full-width because there's another v-container tag up in the hierarchy that is not set to layout in full-width and it'll effectively limit the inner one
This will work
<v-container fluid>
<v-container fluid> This will work </v-container>
</v-container>
Setting both the inner and the outer v-container tags to occupy full width resolves it.
use fluid and remove the padding if any
<v-container fluid class="py-0 px-0"></v-container>
you may try like this
master.vue
<v-app id="app">
<v-navigation-drawer
v-model="drawer"
temporary
absolute
>
<sidebar></sidebar>
</v-navigation-drawer>
<v-toolbar dark color="primary" fixed app>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="white--text">MyBlog</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-text-field
color="purple"
id="globalSearch"
name="globalSearch"
label="Search"
v-model="globalSearch"
v-validate="'required'"
></v-text-field>
<v-btn to="dashboard" flat>Dashboard</v-btn>
<v-btn to="login" flat>Login</v-btn>
<v-btn flat>Register</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer height="auto">
<v-card
flat
tile
class="indigo lighten-1 white--text text-xs-center"
>
<v-card-text>
<v-btn
v-for="icon in icons"
:key="icon"
icon
class="mx-3 white--text"
>
<v-icon size="24px">#{{ icon }}</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text">
©2018 — <strong>Eliyas Hossain</strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
category.vue
<template>
<v-card>
<v-card-title>
<div>
<h2 class="pl-2">Categories</h2>
<v-btn #click="dialog = !dialog" color="primary" dark>New Category</v-btn>
</div>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
</v-card>
</template>
so it will take full space in right side.
For anyone using nuxt - make sure you apply the fluid prop to the top level v-container in the layout and not the ones in your page components.
<v-main>
<v-container fluid>
<Nuxt />
</v-container>
</v-main>