I'm starting to use vuetify and I want to create a menu similar to https://www.vipsanteetbeaute.com/.
However v-app-bar confuses me: do I need to use v-app-bar and inside use v-button and in this vbutton use v-menu ? I don't know how/where to start there is a lot of element.
This is what I done the only issue now is all on the left and I want it center
<template>
<v-app-bar app color="primary">
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text>Menu 1</v-btn>
<v-btn text>Menu 2</v-btn>
<v-btn text>Menu 3</v-btn>
</v-toolbar-items>
<v-img
:src="require('#/assets/logo.png')"
#click="$vuetify.goTo(0)"
class="mr-5"
contain
height="48"
width="48"
max-width="48"
/>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text>Menu 1</v-btn>
<v-btn text>Menu 2</v-btn>
<v-btn text>Menu 3</v-btn>
</v-toolbar-items>
</v-app-bar>
</template>
Related
I faced following problem with v-app-var.
When I scroll down, I expect app bar to shrink smoothly and evenly, but instead it behaves laggy
Here is an example to see it yourself , but screen size must be set to 1440х900 in order to reproduce a problem
https://qx5v2.csb.app/
Here's a video how it looks like
Please help me out.
Just run these commands :
<template>
<v-app>
<v-app-bar
app
class="light-blue"
dark
height="400"
shrink-on-scroll
fade-img-on-scroll
src="https://picsum.photos/1920/1080?random"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
></v-img>
</template>
</v-app-bar>
<v-main>
<v-container fluid>
<div>Lorem ipsum.</div>
<div>Officia, quos!</div>
<div>Modi, quas!</div>
<div>Sapiente, fugiat!</div>
<div>Facere, ex.</div>
<div>Alias, quaerat!</div>
<div>Exercitationem, vel.</div>
<div>Eligendi, architecto.</div>
<div>Minima, animi.</div>
<div>Nulla, aspernatur.</div>
<div>Consectetur, aliquid!</div>
<div>Tempore, commodi.</div>
<div>Odit, voluptas!</div>
<div>Excepturi, iste.</div>
<div>Optio, amet.</div>
<div>Eos, laudantium.</div>
<div>Facere, veritatis!</div>
<div>A, architecto!</div>
<div>Ad, tempora.</div>
<div>Optio, expedita.</div>
<div>Quasi, quas.</div>
<div>A, consequatur.</div>
<div>Aperiam, debitis.</div>
<div>Quod, modi.</div>
<div>A, consequatur.</div>
</v-container>
</v-main>
<v-footer app absolute>
<v-container>
<v-row justify="center">
<div class="ma-4">
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-facebook</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-instagram</v-icon>
</v-btn>
</div>
</v-row>
</v-container>
</v-footer>
</v-app>
</template>
<script>
export default {
name: 'layout',
components: {}
}
</script>
The stock app bar component aligns items hard left, and if using the v-spacer component will the push items to the hard right.
I have tried wrapping the button items with v-container inside the v-app-bar but it breaks the layout once other components are added.
Ideally, the button on the left would align with hello and likewise with the buttons on the right, they should align with the right side of the v-container of the body.
I tried wrapping v-app-bar with v-container:
This is essentially the layout I want but obviously not with the background colour pushed in, it should fill out the width like in the first image.
Is there a native way to do this or will I need to get creative?
<template>
<v-container>
<v-app-bar
color="indigo accent-4"
dense
flat
dark
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in items" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</template>
Similar question but no answers. Problem with placing v-app-bar content in container?
Found a workaround in the interim, not sure how clean it is:
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
In case you want the v-app-bar to be fixed to the top of the page, I solved this by wrapping a v-app-bar inside a v-container inside another v-app-bar:
<template>
<v-app-bar app fixed dense color="grey lighten-4" elevation="1">
<v-container>
<v-app-bar dense elevation="0">
<v-app-bar-title nuxt href="/">
My Title
</v-app-bar-title>
</v-app-bar>
</v-container>
</v-app-bar>
</template>
I want to have a v-text-field inside of a v-tooltip so when a user is shown a tooltip they can enter information inside of the tooltip, but no clicks or input seem to register for the elements inside of the tooltip
<v-tooltip top :open-on-click="true" :open-on-hover="false">
<template v-slot:activator="{ on }">
<v-list-item-content v-on="on">
<v-list-item-title>Title</v-list-item-title>
<v-list-item-subtitle>Subtitle</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-text-field></v-text-field>
</v-tooltip>
Actually tool-tips are used only for show some tips, so the all pointer events will be blocked by css pointer-events: none;, We need to override this style with our CSS.
see my working example here
Template
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon color="grey lighten-1">mdi-cart</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
<v-text-field
label="Regular"
></v-text-field>
</v-tooltip>
CSS
.v-tooltip__content{
pointer-events: all;
}
The v-tooltip shows a disabled item when you hover, and the addition of events to this item will not work. You can achieve a similar effect v-menu.
<v-menu bottom right
:close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-list-item-content v-on="on">
<v-list-item-title>Title</v-list-item-title>
<v-list-item-subtitle>Subtitle</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-card class="pa-3">
<v-text-field hide-details v-model="textVal" #change="update"></v-text-field>
</v-card>
</v-menu>
methods: {
update(){
console.log(this.textVal)
}
}
As the title states, I have a component that opens a dialog. The dialog contains a card with a toolbar at the top and a form within the card. I am trying to make the toolbar fixed such that it does not disappear when scrolling. I have tried to add the "fixed" attribute to my toolbar but doesnt seem to give me the results I expect. Below is my code and thanks in advance...
<template>
<v-dialog :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-toolbar fixed flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text>
<v-form ref="form">
<v-container>
<v-layout row wrap>
<v-subheader class="">
Section
</v-subheader>
<v-flex xs12 v-for="n in 20">
<v-text-field
label="Field Name"
outline
>
</v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For me this is work (Vuetify version 2)
Add scrollable prop in <v-dialog>
inside <v-card> use <v-card-title> instead of <v-toolbar>
then your <v-toolbar> put inside <v-card> and remove fixed prop in <v-toolbar>
Last, add class="pa-0" in <v-card-title> for removing the padding in v-card-title element
<template>
<!-- Add Scrollable Prop -->
<v-dialog scrollable :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-card-title class="pa-0">
<v-toolbar flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
</v-card-title>
...
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For browsers that support position: sticky (https://caniuse.com/css-sticky), you can use pure CSS to set the toolbar to be sticky positioned at the top:
.v-dialog > .v-card > .v-toolbar {
position: sticky;
top: 0;
z-index: 999;
}
You could write this selector differently if you didn't want this applying to all situations where this occurs in your application - add a specific class to your toolbar, for example.
In my case, fixed title was not working until I did not wrap my div in v-card-text
<template>
<v-dialog v-model="modal" scrollable fullscreen>
<v-card>
<v-card-title>
<span>Title text</span>
</v-card-title>
<!-- VCardText after VCardTitle -->
<v-card-text>
<div>
...
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
PS. the Vuetify semantic is very important for correct working all of features (ex. using v-card-actions in v-card instead of custom div)
I'm just checking out vuetify and I would like to add a dialog that contains a v-navigation-drawer.
How do I need to structure the layout inside the dialog to achieve the same effect in the dialog like with a v-navigation-drawer ( menu on the left, content on the right ).
thats my markup right now:
v-app
v-dialog
v-toolbar
v-navigation-drawer
v-list
.. menuitems
v-content
(content here is under the left menu not on the right side as on my screenshot)
v-content
v-container
https://imgur.com/a/dRTpC
This may not be the cleanest solution, but it could be something like this:
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%" fullscreen hide-overlay >
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
permanent
absolute
left
width="250"
class='mt-5'
height=""
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-flex class="text-xs-center">
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</v-flex>
</v-card>
</v-dialog>
</v-app>
</div>