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>
Related
I have created a card in which I added a expand button at the bottom. It works perfectly fine in normal mode but when I integrate Masonry.js then the card is working fine and when I expand the bottom of the card it overlaps with the bottom element
image 1
image 2
<v-row class="masonry">
<v-col
class="pa-3"
cols="12"
md="4"
sm="6"
v-for="program in allPrograms"
:key="program._id"
>
<single-card :content="program"></single-card> </v-col
></v-row>
<script>
mounted: function () {
var msnry = new Masonry( '.masonry', {
itemSelector: "[class*='col-']",
});
</script>
Card expansion code
<v-card-actions>
<v-btn color="orange" text #click="openLink(content.timeline)">
Timeline
</v-btn>
<v-spacer></v-spacer>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? "mdi-chevron-up" : "mdi-chevron-down" }}</v-icon>
</v-btn>
</v-card-actions>
<v-expand-transition>
<div v-show="show">
<v-divider></v-divider>
<v-card-text class="text-justify">
{{ content.description }}
</v-card-text>
</div>
</v-expand-transition>
after doing a lot of research I found a way to solve it for this I am using https://www.npmjs.com/package/vue-masonry instead of masonry.js
so after every click, we need to redraw our masonry for this we have to use a function this.$redrawVueMasonry('containerId')
for more detail head over to https://www.npmjs.com/package/vue-masonry
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>
Can you tell me why the icon to the right of the v-text-field is not displayed?
I want to make the calendar open when you click on the icon.
codepen
<div id="app">
<v-app id="inspire">
<v-menu>
<template v-slot:activator="{ on }">
<v-text-field label="Hello world" style="max-width: 200px">
<!--The icon is not displayed-->
<v-icon v-on="on" color="primary" dark>event</v-icon>
</v-text-field>
</template>
<v-date-picker>
</v-date-picker>
</v-menu>
</v-app>
</div>
P.S.
Here is a good example. It's not mine.
Codepen
The HTML input field is empty https://www.w3schools.com/tags/tag_input.asp
There's an attribute to prepend and append icons in textfields in Vuetify: https://vuetifyjs.com/en/components/text-fields/#icons
You simply need to add it:
<v-text-field label="Hello world" style="max-width: 200px" append-icon="event">
I managed to do it. I did this without the activator template.
codepen vuetify
<div id="app">
<v-app id="inspire">
<v-text-field
label="Hello world"
style="max-width: 200px"
append-icon="event"
#click:append="show">
</v-text-field>
<v-menu
v-model="menu"
:position-x="x"
:position-y="y"
absolute >
<v-date-picker />
</v-menu>
</v-app>
</div>
show (e) {
console.log(123);
e.preventDefault();
this.menu = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.menu = true
})
},
I have 3 cards when mouse hover on card title it shows a arrow_down icon & i can click on it , it a drop down menu with Delete function when i hover over the v-card-title it shows the icon but after i click on it, mouse on drop-down menu the arrow_down icon disappeared,
how to properly implement it ?
https://codepen.io/sharon-the-encoder/pen/WLWyoG?editors=0010
const cards = [
{
title: "Gooey PBJ Brownies",
author: "John Walibur",
image: "https://placeimg.com/640/480/nature"
},
{
title: "Crisp Spanish Tortilla Matzo Brei",
author: "Colman Andrews",
image: "https://placeimg.com/640/480/animals"
},
{
title: "Grilled Shrimp with Lemon and Garlic",
author: "Celeste Mills",
image: "https://placeimg.com/640/480/arch"
}
];
new Vue({
el: "#app",
data: {
cards: cards,
selectedCard: -1
},
methods: {
hoverCard(selectedIndex) {
this.selectedCard = selectedIndex
},
isSelected(cardIndex) {
return this.selectedCard === cardIndex
},
passmsgid(index) {
alert(index)
}
}
});
body {
background-color: #e1e7e7;
}
.grey--text.selected {
color: red !important;
}
.iconkey {
display: none;
}
.iconkey.selected {
display: block;
color: blue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.4.2/vuetify.min.js">
</script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<div id="app">
<v-app>
<v-content>
<v-container>Hello world</v-container>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 sm4 md4 lg4 v-for="(card, index) in cards" :key="index">
<v-card class="ml-3 mt-3">
<v-img :src="card.image" height="200px">
</v-img>
<v-card-title primary-title #mouseover="hoverCard(index)" #mouseout="hoverCard(-1)">
<div>
<div class="headline">{{card.title}}</div>
<span class="grey--text" :class="{'selected': isSelected(index)}">{{card.author}} -
</span>
<v-expand-transition>
<v-menu bottom transition="scale-transition" nudge-bottom="40">
<v-btn icon slot="activator" styole="margin-bottom: -1em;">
<v-icon class="iconkey" :class="{'selected': isSelected(index)}">keyboard_arrow_down</v-icon>
</v-btn>
<v-list>
<v-list-tile>
<v-list-tile-title #click="passmsgid(index)">Delete</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-expand-transition>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat>Share</v-btn>
<v-btn flat color="purple">Explore</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
Updated pen using more CSS, and without v-hover: Codepen
(Originally I used v-hover but for this case not needed)
Codepen
We will control visibility by using the following CSS class:
.hidden {
visibility: hidden;
}
menu-button is hidden unless:
a) we are hovering over its parent-tile or
b) when the corresponding menu is opened.
So we need to set up custom item (tile) component:
Set menu visibility control:
data: () => ({
menu: false, // control button-menu state (opened / closed)
})
And our template starts with v-hover component so we can detect when we hover over it and react to that event:
<template>
<v-hover>
<v-list-tile slot-scope="{ hover }" #click="">
// ...
<v-menu v-model="menu" offset-y left >
<v-btn slot="activator"
:class="{hidden: !hover && !menu}"
>
:class="{hidden: !hover && !menu}" - we set hidden class on button when we are not hovering over the parent-tile and when corresponding menu is closed.
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)