I am trying to create an expandable app bar in Vuetify, which shows a datepicker within the app bar when the app bar is expanded.
When the app bar is expanded, the datepicker is shown as an overlay instead of expanding the app bar. How do I make the app bar expand to contain the datepicker instead of showing the datepicker on top of the app bar.
I have created a codepen as an example: https://codepen.io/thomasabcd/pen/eYmOoVQ
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar dark>
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon #click="extended=!extended">
<v-icon>mdi-calendar</v-icon>
</v-btn>
<template v-slot:extension v-if="extended">
<v-date-picker full-width />
</template>
</v-app-bar>
</div>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return{
extended: false
}
}
})
Use the extension-height prop of the app-bar..
<v-app-bar dark extension-height="100%">
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon #click="extended=!extended">
<v-icon>mdi-calendar</v-icon>
</v-btn>
<template v-slot:extension v-if="extended">
<v-date-picker full-width dark />
</template>
</v-app-bar>
https://codeply.com/p/tJ3HM4HRZg
Related
I need a vertical navbar to the left of my app's layout, and with the content all across the right.
As it stands, I can't do that. My navbar pushes all the content down. How can I fix this?
This is what my App.vue's template looks like:
<template>
<div id="app">
<v-app>
<navbar/>
<v-main>
<v-container class="main-container">
<router-view/>
</v-container>
</v-main>
</v-app>
</div>
</template>
For the navbar component I am using vuetify, specifically the mini navbar
As per the example code, here is what it currently looks like:
<template>
<v-navigation-drawer
v-model="drawer"
:mini-variant.sync="mini"
permanent
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-title>John Leider</v-list-item-title>
<v-btn
icon
#click.stop="mini = !mini"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
#Component<Navbar>({})
export default class Navbar extends Vue {
private value: string = 'home';
private drawer: boolean = true;
private items: Array<Object> = [
{ title: 'Home', icon: 'mdi-home-city' },
{ title: 'My Account', icon: 'mdi-account' },
{ title: 'Users', icon: 'mdi-account-group-outline' }
]
private mini: boolean = true;
}
</script>
As mentioned on the top, this is still just pushing all the app's content down. This is what it currently looks like:
What can I do so that on the left I have my navbar but on the right
Edit: For the sake of clarification, I do want the navbar to be vertical, but I just don't want it to push down all the content. Basically I want my app to have a side navigation
Wrap the navbar and main in a <v-row>:
<template>
<div id="app">
<v-app>
<v-row>
<navbar/>
<v-main>
<v-container class="main-container">
<router-view/>
</v-container>
</v-main>
</v-row>
</v-app>
</div>
</template>
By default, v-app has an internal wrapper with flex-direction: column CSS, meaning that its child elements are placed vertically. By wrapping these 2 child elements in a v-row, you place them in a wrapping element with flex-direction: row.
I guess you are misunderstanding the concepts. You are wrapping a v-navigation-drawer inside a navbar component.
In Vuetify v-navigation-drawer is a component used to build Sidebars and that's why your component is on vertical.
You should try to use v-app-bar instead. Here's the documentation: https://vuetifyjs.com/en/components/app-bars/
Edit 1
You can configure an app sidebar or an app navbar using the app option inside the component like that:
<v-navigation-drawer
app
>
...
</v-navigation-drawer>
Just like in the official documentation. If you do it that way, the component will work properly and your content will not be pushed down.
I'm trying to create a navbar for Vue application, I'm using Vuetify, on large screen there is toolbar, on small there is hamburger icon which opens the navigation drawer.
It works, but there is an overlay that comes in front of drawer and I can't change a page.
Here is the code:
<template>
<div>
<v-app-bar dark>
<v-app-bar-nav-icon class="hidden-md-and-up" #click="sidebar = !sidebar"></v-app-bar-nav-icon>
<v-navigation-drawer v-model="sidebar" app>
<v-list>
<v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
</v-list>
</v-navigation-drawer>
<v-toolbar-title>Jobify</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text v-for="item in menuItems" :key="item.title">
<router-link :to="item.path">{{item.title}}</router-link>
</v-btn>
</v-toolbar-items>
</v-app-bar>
</div>
</template>
<script>
export default {
data: function() {
return {
sidebar: false,
menuItems: [
{ path: "/jobs", name: "jobs", title: "Jobs" },
{ path: "/companies", name: "companies", title: "Companies" },
{ path: "/jobs/new", name: "new-job", title: "Add job" }
]
};
}
};
</script>
<style>
</style>
Only Vuetify components that I'm using are here, there is, actually, v-app in App component.
Try to add hide-overlay prop to the v-navigation-drawer component in order to hide the overlay :
<v-navigation-drawer v-model="sidebar" app hide-overlay >
I'm using the combobox component of VuetifyJS and I need to add an icon in front of every entry in the drop down. How to do that?
Here is a CodePen example of the combobox: https://codepen.io/anon/pen/KBLXYO
HTML
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout wrap>
<v-flex xs12>
<v-combobox
v-model="select"
:items="items"
label="Select a favorite activity or create a new one"
></v-combobox>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
JS:
new Vue({
el: '#app',
data () {
return {
select: 'Programming',
items: [
'Programming',
'Design',
'Vue',
'Vuetify'
]
}
}
})
Use the item scoped slot.
<v-combobox
v-model="select"
:items="items"
label="Select a favorite activity or create a new one">
<template slot="item" slot-scope="data">
<v-icon>home</v-icon> {{data.item}}
</template>
</v-combobox>
Here is your pen updated.
FWIW, this is all covered in the documentation.
I need to use a fixed toolbar (with an extension). Problem is that The toolbar overlays the content as soon as the fixed prop gets added. How to place the content below the toolbar?
CodePen example: https://codepen.io/anon/pen/jpgjyd?&editors=101
<div id="app">
<v-app id="inspire">
<v-toolbar
color="primary"
dark
fixed
extended
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title slot="extension">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
</v-toolbar>
<v-layout>
<v-flex xs1 >
+++ FIRST LINE +++
[lots of text...]
</v-flex>
</v-layout>
</v-app>
</div>
One solution is adding app to v-toolbar and wrap v-layout inside v-content
<v-toolbar
app
color="primary"
dark
fixed
extended
>
...
</v-toolbar>
<v-content>
<v-layout>
</v-layout>
</v-content>
Demo https://codepen.io/ittus/pen/mGdbeN?editors=1010
References: Vuetify application layout tutorial
Add app to v-toolbar and wrap v-layout inside v-content
Couldn't get exactly your question, is this what you wanted to achieve:
new Vue({
el: '#app',
mounted(){
var fixedElement = document.getElementsByClassName('v-toolbar--fixed')[0];
var layout = document.getElementsByClassName('layout')[0];
layout.style = "padding-top: "+ fixedElement.offsetHeight + 'px';
}
});
https://codepen.io/Younes_k/pen/LJEjOL
I setting up my browser window to mobile size to show the toolbar icon of navigation-drawer. When I click the toolbar icon then navigation-drawer will show up but when I switch back my browser to 100%, navigation-drawer will not disappear and it turns into permanent. So by that I can't close the drawer anymore because toolbar only appears in mobile window which supposed to be close during the resize back to desktop size
Heres my template
<template>
<div>
<v-navigation-drawer
v-model="sideNav.model"
absolute
overflow
disable-resize-watcher
disable-route-watcher
left
persistent
:app="sideNav.type = ''"
>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon>supervisor_account</v-icon>
</v-list-tile-action>
<v-list-tile-content>Login</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app dark class="primary" >
<v-toolbar-side-icon
#click.stop="sideNav.model = !sideNav.model" class="hidden-sm-and-up"
></v-toolbar-side-icon>
<v-toolbar-title>DevMeetup</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only">
<v-btn flat router :to="{name : 'Home'}">
<v-icon left dark>supervisor_account</v-icon>
Home
</v-btn>
<v-btn flat router :to="{name : 'Login'}" >
<v-icon left dark>supervisor_account</v-icon>
Login
</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
</main>
</div>
</template>
<script>
export default {
data : () => ({
sideNav: {
model: false,
type: 'persistent',
clipped: false,
floating: false,
mini: false,
stateless:true
},
isMobile: false
}),
mounted(){
}
}
</script>
You've disabled the resize watcher. Try that.