I'm using v-dialog from vuetify. When I set it to persistent, there is a bounce effect when the user clicks outside the dialog. I would like to manually create that effect when some random button is clicked. How is that possible?
Dialog has a method called animateClick, you can call the same.
CODEPEN
<v-dialog ref="dialog" v-model="dialog" width="400px">
<v-card >
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
</v-card-text>
<v-divider></v-divider>
<v-card-action>
<v-btn #click="doAnimation">Animate Me</v-btn>
</v-card-action>
</v-card>
</v-dialog>
....
....
<script>
export default{
...
methods: {
methods:{
doAnimation(){
this.$refs.dialog.animateClick()
}
}
}
}
</script>
Related
imagine we have two components, Modal.vue which is lets say a component that is used to display modal content (uses slots to take in JSX), and Component.vue which is the one with content we wish to test with vitest/jest:
//Modal.vue
<template>
<div>
<slot name="header" />
<slot />
<slot name="footer" />
</div>
</template>
//component.vue
<template>
<Modal>
<template #header>
<h1>Hello world</h1>
</template>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<template #footer>
<button>Great</button>
</template>
</Modal>
</template>
The problem is that I cannot reach the wrapper HTML within my test, as it will console log something similar to this:
// snipet from the test file
...
it('should mount Component.vue', () => {
console.log(wrapper.html())
expect(wrapper).toBeTruthy()
})
...
The console.log in the test will result to this:
<div>
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
</div>
Question is: How can I access the wrapper HTML that is define in 'Component.vue'??
When you click outside a persistent dialog, it will play a animation and dialog will not close, I would like to play this animation when form validation fail and dialog refuse to close
I cannot find any information at vuetify doc, would like to have some pointer to find this out, I am new to java framework and have no idea how I can drag into the source to find out any hint on this.
UPDATED
Dialog has a method called animateClick, you can call the same.
CODEPEN
<div id="app">
<v-app id="inspire">
<v-container fill-height>
<v-row>
<v-col align=center>
<v-btn color="primary" #click="dialog = true">Open</v-btn>
<v-col>
</v-row>
</v-container>
<v-dialog ref="dialog" v-model="dialog" width="400px">
<v-card >
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
</v-card-text>
<v-divider></v-divider>
<v-card-action>
<v-btn #click="doAnimation">Animate Me</v-btn>
</v-card-action>
</v-card>
</v-dialog>
</v-app>
</div>
<script>
export default{
...
methods: {
methods:{
doAnimation(){
this.$refs.dialog.animateClick()
}
}
}
}
</script>
in my vuejs application, I have a file called ProductDetails.vue. For the template, I used Vuetify to create a grid system where the product's image will be at the left, and the product's content to the right. However, I have encountered two problems. Firstly, how do i shift the images and content away from one another so that there is space. Secondly, how to shift the button to the right most of the product's content. Below is my code, a screenshot of my current design and a screenshot of my desired design.
https://codepen.io/Issaki/pen/qwRWgZ
Update #1: I am still trying to solve this issue, is there anyone that can help me?
<template>
<div>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md5 lg5>
<v-img
class="white--text"
height="350px"
src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
/>
</v-flex>
<v-flex xs12 sm6 md7 lg7>
<p class="subheading font-weight-light grey--text text--darken-1 mb-1">Samsung</p>
<p class="display-1 font-weight-light">OnePlus 3</p>
<p
class="subheading"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="headline font-weight-medium">$329</p>
<p class="muted">Inclusive of all taxes. Free home delivery.</p>
<v-btn color="yellow">
<v-icon left>shopping_cart</v-icon>Add to Cart
</v-btn>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
You can add space between the two v-flex if you simply add some padding to one of them. So by adding class="pl-3" which translates to padding-left-3 to the second v-flex you can add some space. You can learn more about spacing helpers.
For the button just wrap it in:
<v-layout align-end justify-end>
<v-btn color="yellow" >
<v-icon left>shopping_cart</v-icon>Add to Cart
</v-btn>
</v-layout>
You can learn more about it here.
Update: A better way to add spacing though would be to add grild-list-* to your container. In that case it will add some spacing to all your elements in the container so you dont need the added padding anymore. You can see the updated Codepen below and read more here.
I have forked and edited your Codepen.
Hope it helps :)
I'm trying to use vuetify expansion-panels in Vue.js.
But you can see that arrow image doesn't show in this picture.
Even I tried to delete :expand-icon="images.arrow" it apears string "keyboard-arrow-down"
Here's my code.
Any ideas? thanks.
images: {
check: require('../assets/check.png'),
uncheck: require('../assets/uncheck.png'),
memo: require('../assets/memo.png'),
thumbsUp: require('../assets/thumbs-up.svg'),
chrome: require('../assets/chrome.svg'),
arrow: require('../assets/arrow.svg'),
},
...
<v-expansion-panel>
<v-expansion-panel-content :expand-icon="images.arrow" v-for="(item,i) in 5" :key="i">
<div slot="header">Item</div>
<v-card>
<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
It's possible to create a v-list in vuetify with fixed height and when my user add some content he show a scrollbar in the v-list
tks
What your asking is not entirely clear, but with CSS you can add a scroll bar to a card if its not automatic.
Here is the codepen:
https://codepen.io/AleaQ/pen/WJZqWb
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout>
<v-flex xs6>
<v-card class="scroll" height="100">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
//CSS MARKUP
.scroll {
overflow-y: auto;
}