How to customize vuetify carousel arrows? - javascript

Hello i have the following template in my application:
<v-carousel cycle height="300" class="carousel" hide-delimiters>
<template v-slot:prev="{ on, attrs }">
<v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
><v-icon>mdi-arrow-left</v-icon></v-btn
>
</template>
<template v-slot:next="{ on, attrs }">
<v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
><v-icon>mdi-arrow-right</v-icon></v-btn
>
</template>
<v-carousel-item
v-for="i in 4"
:key="i"
:src="photo"
></v-carousel-item>
</v-carousel>
I wanted to customize arrows responsible for changing the slide. For this purpose, according to vuetify documentation i've used prev, and next slot. The problem is my code has no influence on the look of mentioned arrows. Also no errors are logged to the console. What am i doing wrong? How to customize carousel arrows?

This is working exemple. Something more is needed ???
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<template v-slot:prev="{ on, attrs }">
<v-btn
color="success"
v-bind="attrs"
v-on="on"
>PREV #Bulchsu</v-btn>
</template>
<template v-slot:next="{ on, attrs }">
<v-btn
color="info"
v-bind="attrs"
v-on="on"
>NEXT #Bulchsu</v-btn>
</template>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="display-3">
{{ slide }} Slide
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>

As I imagine that the solutions proposed at the beginning in the doc are not worth it delimiter-icon="mdi-icon".
Because this only allows you to change the background icon image and has an extra difficulty to change it in the moments that are active.
I can suggest something simple and very efficient for this case
clean the limiter icon on the carrousel delimiter-icon=""
assign your carousel a css class <v-carousel class="cssClass".....
include in the corresponding class the css classes to change
.cssClass { .v-btn {
color: transparent !important;
border: 1px solid red !important;
background-color: transparent !important;
}
.v-btn--active {
color: red !important;
border: 1px solid red !important;
background-color: red !important;
}
}
it would look something like this
<v-carousel class="cssClass"
v-model="model"
cycle
delimiter-icon="">
....
</v-carousel>
Once this is done, the result of the carrousel will now be the following
I hope I have helped, regards.

Related

Vuetify: How do I prevent all expand-transition from happening at once?

I am creating a page that consists of multiple cards, each card has a v-expand-transition and I am creating all cards in a v-for loop. The problem is that if I click one v-expand-transition then all of them open. I understand that it is because all of them are connected to the same "show", but I am not sure how to split that up so each one has their own event. My code is here:
<template>
<v-container>
<h1 class="font-weight-medium pa-6">All Labs</h1>
<v-row dense>
<v-col v-for="card in cards" :key="card.title" :cols="card.flex">
<v-card class="mx-auto" max-width="350">
<v-img class="white--text align-end" height="200px" :src="card.src" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
<v-card-title v-text="card.title"></v-card-title>
</v-img>
<v-card-subtitle class="pb=0" v-text="card.location"></v-card-subtitle>
<v-card-text class="text--primary">
<div v-text="card.hours"></div>
<div v-text="card.keycardInfo"></div>
</v-card-text>
<v-card-actions>
<v-btn color="blue" :href="card.directions" text target="_blank">Directions</v-btn>
<v-btn color="blue" :to="card.page" text>Learn More</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 v-text="card.bottomInfo"></v-card-text>
</div>
</v-expand-transition>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
and my script is here:
<script>
import App from '../App.vue'
export default {
components: { App },
name: 'Home',
data: () => ({
show: false,
cards: [],
}),
}
</script>
I emptied the cards to avoid cluttering the page.
What happens is that since you are using a single variable to control the state of your component, the action will end up reflecting for everyone. One alternative would be to add a "show" property inside each object in your list, making each object have its own state. Here is an example of how it would look:
new Vue({
el: '#app',
data() {
return {
cards: [{
title: "My title",
flex: 6,
src: '#',
location: '#',
hours: '13',
keycardInfo: 'Info',
directions: '#',
page: '#',
to: '#',
bottomInfo: 'Bottom info',
show: false,
},
{
title: "My title 2",
flex: 6,
src: '#',
location: '#',
hours: '13',
keycardInfo: 'Info 2',
directions: '#',
page: '#',
to: '#',
bottomInfo: 'Bottom info 2',
show: false,
}],
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-container>
<h1 class="font-weight-medium pa-6">All Labs</h1>
<v-row dense>
<v-col v-for="card in cards" :key="card.title" :cols="card.flex">
<v-card class="mx-auto" max-width="350">
<v-img class="white--text align-end" height="200px" :src="card.src" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
<v-card-title v-text="card.title"></v-card-title>
</v-img>
<v-card-subtitle class="pb=0" v-text="card.location"></v-card-subtitle>
<v-card-text class="text--primary">
<div v-text="card.hours"></div>
<div v-text="card.keycardInfo"></div>
</v-card-text>
<v-card-actions>
<v-btn color="blue" :href="card.directions" text target="_blank">Directions</v-btn>
<v-btn color="blue" :to="card.page" text>Learn More</v-btn>
<v-spacer></v-spacer>
<v-btn #click="card.show = !card.show">
{{ card.show ? 'Hide' : 'Show' }}
</v-btn>
</v-card-actions>
<v-expand-transition>
<div v-show="card.show">
<v-divider></v-divider>
<v-card-text v-text="card.bottomInfo"></v-card-text>
</div>
</v-expand-transition>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
As you are using Vuetify, another approach would be to use expansion panels, I'll leave the documentation link below for you to take a look.
https://vuetifyjs.com/en/components/expansion-panels/#usage

Creating a one line group of inputs and button that needs to fit into parent div regardless of device size

I am having some trouble understanding vuetify's grid system. Need a form consisting of two text inputs and a button (of fixed width and height) which are to be within one line and fit perfectly in its parent div, regardless of the screen size.
As it stands I am having quite a bit of trouble with this: on my app, either there is a bunch of empty space left on the right side of the screen or the button is being rendered on the next line. Everything needs to be on the same line and to fit perfectly.
I don't seem to quite understand how to operate the grid system to make this happen. Here are two versions of what I have: one with the cols prop and the other with the prop relating to the specific sizes (xs, sm, md, lg).
I've put red border on the parent div so that you can see where I want the text input components to stretch to, while the button must remain always the same size, regardless of the screen. There are a couple problems with my example that I am looking to solve:
You will see that in both cases there is a bunch of empty space on the right, which I do not want. The text inputs need to expand accordingly and fill in that parent div.
If you resize the screen, both examples diverge from each other, which makes me wonder how to properly implement this (the cols or the specific size props?)
The button is slightly higher than the inputs. It needs to be perfectly aligned with them.
new Vue({
el: '#root',
vuetify: new Vuetify(),
template: `
<div :style="{ border: '4px solid red' }">
<p>The forms and button above need to fill in the entire div (with maybe a 5px or so margin), on all screen sizes </p>
<br/>
<h2>Using cols:</h2>
<v-row no-gutters :style="{ padding: '0 10px' }">
<v-col cols='4' :style="{ padding: '0 5px', margin: 0 }">
<v-text-field
class="input-field"
label="Field 1"
/>
</v-col>
<v-col cols='5' :style="{ padding: '0 5px', margin: 0 }">
<v-text-field
class="input-field"
label="Field 2"
/>
</v-col>
<v-col cols='2' :style="{ padding: '0 5px', margin: 0 }">
<v-btn>
<v-icon>X</v-icon>
</v-btn>
</v-col>
</v-row>
<h2>Using screen size props:</h2>
<v-row no-gutters :style="{ padding: '0 10px' }">
<v-col xs='4' sm='4' md='4' lg='4' :style="{ padding: '0 5px', margin: 0 }">
<v-text-field
class="input-field"
label="Field 1"
/>
</v-col>
<v-col xs='5' sm='5' md='5' lg='5' :style="{ padding: '0 5px', margin: 0 }">
<v-text-field
class="input-field"
label="Field 2"
/>
</v-col>
<v-col xs='2' sm='2' md='2' lg='2' :style="{ padding: '0 5px', margin: 0 }">
<v-btn>
<v-icon>X</v-icon>
</v-btn>
</v-col>
</v-row>
</div>
`
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="root"></div>
Vuetify grid system is based on flexbox. If you do not specify cols property in v-col, then the elements are distributed evenly in the available width, according to the default flex-grow: 1 css attribute. For the last column, since it does not need to have the same width as textboxes, setting the flex-grow: 0 will shrink it leaving all the available space for the first two columns.
So, the solution actually is to remove cols attributes from v-col, and let the flexbox do its job, and only set flex-grow: 0 for the last column.
new Vue({
el: '#root',
vuetify: new Vuetify(),
template: `
<div :style="{ border: '4px solid red' }">
<p>The forms and button above need to fill in the entire div (with maybe a 5px or so margin), on all screen sizes </p>
<br/>
<h2>Using cols:</h2>
<v-row no-gutters :style="{ padding: '0 10px' }">
<v-col :style="{ padding: '0 5px', margin: 0 }">
<v-text-field
label="Field 1"
/>
</v-col>
<v-col :style="{ padding: '0 5px', margin: 0 }">
<v-text-field
label="Field 2"
>
</v-text-field>
</v-col>
<v-col :style="{'flex-grow': 0, padding: '0 5px', margin: 0 }">
<v-btn block>
<v-icon small>X</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row no-gutters :style="{ padding: '0 10px' }">
<v-col :style="{ padding: '0 5px', margin: 0 }">
<v-text-field
label="Field 1"
/>
</v-col>
<v-col :style="{ padding: '0 5px', margin: 0 }">
<v-text-field
label="Field 2"
>
</v-text-field>
</v-col>
<v-col :style="{'flex-grow': 0, padding: '0 5px', margin: 0 }">
<v-btn block>
<v-icon small>X</v-icon>
</v-btn>
</v-col>
</v-row>
</div>
`
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="root"></div>
Is this what you're trying to accomplish? If so, I can talk about it more.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="root">
<v-app>
<v-main>
<div :style="{ border: '4px solid red' }">
<v-container fluid>
<v-row v-for="index in 3" :key="index">
<v-col cols='5'>
<v-text-field
label="Field 1"
/>
</v-col>
<v-col cols='5'>
<v-text-field
label="Field 2"
/>
</v-col>
<v-col cols='2' align-self="center">
<v-btn block>
<v-icon small>X</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</div>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#root',
vuetify: new Vuetify()
})
</script>
</body>
</html>

Limit maximum page length in css

I have a Vue application running Vuetify but neither of these seem to be equipped to handle my desire to limit the maximum length of the page to be such that there is no scrolling. I hope that makes sense. My hope is to just pull up a screen with a bunch of routing to similarly formatted screens. Of course, the user could make the window smaller, in which case I would need scrolling. So how would I set that up when I want to have the page open to full screen with a maximum page length that will prevent the NEED for scrolling, but still allow scrolling if the need is there due to the user resizing the page to something a good bit smaller?
I spent hours looking around for details on this but didn't find anything that really seemed to be a direct solution. How can I set a max page length? Would CSS offer this? I saw a solution putting CSS in the <head>-tag but with a Vue application this head tag doesn't get used in the same way as typical HTML pages.
EDIT: because I don't think it's clear that because I'm working in vue/vuetify the solution might be different from the general case, I think it is best if I provide my App.vue and an example page.
--- App.vue ---
<template>
<v-app>
<app-toolbar></app-toolbar>
<router-view></router-view>
<app-footer></app-footer>
</v-app>
</template>
<script>
import AppToolbar from "./components/AppToolbar.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
name: "App",
components: {
AppToolbar,
AppFooter
},
data: () => ({
//
})
};
</script>
<style scoped></style>
--- Homepage.vue ---
<template>
<div>
<v-app>
<v-responsive aspect-ratio="16/9">
<v-carousel cycle hide-delimiter-background show-arrows-on-hover>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
></v-carousel-item>
</v-carousel>
</v-responsive>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
}
]
};
}
};
</script>
<style></style>
EDIT 2: Adding the app-toolbar & app-footer
--- Toolbar.vue ---
<template>
<div>
<v-toolbar dense color="#3F51B5" dark>
<v-app-bar-nav-icon
color="#76ff03"
#click.stop="drawer = !drawer"
></v-app-bar-nav-icon>
<v-btn to="/" color="#76ff03" text>Vuetification</v-btn>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-row align="center" justify="center">
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
<div class="mx-3"></div>
<v-badge
bordered
bottom
color="deep-purple accent-4"
dot
offset-x="10"
offset-y="10"
>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
</v-avatar>
</v-badge>
<div class="mx-3"></div>
<v-badge avatar bordered overlap>
<template v-slot:badge>
<v-avatar>
<v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
</v-avatar>
</template>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
</v-avatar>
</v-badge>
</v-row>
<div class="hidden-sm-and-down">
<v-btn icon>
<v-icon color="#76ff03">mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-dots-vertical</v-icon>
</v-btn>
<v-btn color="#76ff03" text>About</v-btn>
<v-btn to="/contact" color="#76ff03" text>Contact</v-btn>
<v-btn to="/login" color="#76ff03" text>Login</v-btn>
</div>
</v-toolbar>
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
temporary
right
height="160px"
>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
</v-list-item-content>
</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>
</div>
</template>
<script>
export default {
data() {
return {
drawer: false,
items: [
{ title: "Home", icon: "mdi-ghost" },
{ title: "About", icon: "mdi-kabaddi" }
]
};
}
};
</script>
<style scoped>
.toolbar-item {
color: #76ff03;
}
</style>
--- Footer.vue ---
plate>
<v-app>
<v-footer dark padless fixed>
<v-card class="flex" text tile>
<v-card-title class="teal">
<strong class="subheading"
>Get connected with us on social networks!</strong
>
<v-spacer></v-spacer>
<v-btn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
<v-icon color="#76ff03" size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="text-center">
<v-layout>
<v-flex class="toolbar-item" v-for="(col, i) in rows" :key="i" xs3>
<span class="body-2" v-text="col.title.toUpperCase()" />
<div v-for="(child, i) in col.children" :key="i" v-text="child" />
</v-flex>
<v-flex class="toolbar-item" xd3 layout column>
<span class="body-2">CONTACT</span>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-home</v-icon
>
New York, NY 10012, US
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-envelope</v-icon
>
info#example.com
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-phone</v-icon
>
+ 01 234 567 89
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-print</v-icon
>
+ 98 765 432 10
</div>
</v-flex>
</v-layout>
<strong> {{ new Date().getFullYear() }} — Vuetify </strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
icons: [
"fab fa-facebook",
"fab fa-twitter",
"fab fa-google-plus",
"fab fa-linkedin",
"fab fa-instagram"
],
rows: [
{
title: "Company Name",
children: [
"Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit"
]
},
{
title: "Produts",
children: [
"MDBootstrap",
"MDWordPress",
"BrandFlow",
"BootstrapAngular"
]
},
{
title: "Useful Links",
children: [
"Your account",
"Become an Affiliate",
"Shipping Rates",
"Helper"
]
}
]
})
};
</script>
<style scoped>
strong {
color: #76ff03;
}
.toolbar-item {
color: #76ff03;
}
</style
>
By default, if the HTML content is larger than the window, the browser will create scrollbars and if it's smaller than the window there won't be a scroll. However, I don't think this is what you're really asking for. I think you're trying to change the window size itself.
I'm going to start by saying its very bad practice to modify the size of the user's browser window. You should work to make your content fit instead.
That said, as Vue.js and Vuetify are built on Javascript, and you'll need to write some custom JS to resize the browser window. The default overflow on the <body> tag (yes those exist in a Vue app) will take care of the scrolling...
window.resizeTo(width, height);
Should be called after Vue has rendered the content to the screen so inside Vue's Mounted Lifecycle hook.
Now, I assume the height of the content changes so you would want to grab the height of the Vue app div.
var newHeight = document.getElementById('app').innerHeight()
You also want to get the screen size so you don't make the window larger than the screen. You can get that height from the screen object.
var screenHeight = window.screen.height
so
if(newHeight < screenHeight){
window.resizeTo('800px', newHeight);
} else {
window.resizeTo('800px', screenHeight);
}
Before you do this
You should know that most modern browsers BLOCK the window.resizeTo() function so again you should find a different solution to the problem.
You Can nest your content inside another div element.If max-height of your inner div is equal to the height of its container, scroll bar will never appear. if you want to see scroll bar use this.
.scrollDiv {
height:auto;
max-height:150%;
overflow:auto;
}

Make vuetify dropdown menu overflow drawer

I am having problem with vuetify dropdown menu, when I add just drop down and scroll down, content from menu goes up with page on scroll.
On github I found attach as answer but now it stays under drawer side like this:
Vue.use(Vuetify);
new Vue({
el: "#app",
data: {
model: true,
},
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.1/vuetify.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.1/vuetify.min.js"></script>
<div id="app">
<v-navigation-drawer v-model="model" fixed app style="background: red;" width="100">
<v-menu :close-on-content-click="false" offset-y attach>
<v-btn slot="activator">Menu</v-btn>
<v-card>
<v-card-text style="overflow-y:auto; max-height:300px;">
<v-list>
<v-list-tile avatar>
<v-list-tile-avatar>
<img src="" alt="John">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>John some</v-list-tile-title>
<v-list-tile-sub-title>body</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon small>
<v-icon>remove_red_eye</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
<v-divider></v-divider>
</v-list>
</v-card-text>
</v-card>
</v-menu>
</v-navigation-drawer>
</div>

VUE / VUETIFY - Auto-adjust height adding or removing items from list component "v-list-tile"

I created a simple Contact list with an input to add the contact items but after I add a few items it's not resizing.
I used this as an example and there is resizing but not in my code:
https://v2.vuejs.org/v2/guide/list.html
Could anyone help me with that?
Here is the Codepen:
https://codepen.io/fabiozanchi/pen/qoBpgd
Vue.component('contact-item', {
template: '\
<v-list-tile-title>\
<button #click="$emit(\'remove\')"><v-icon class="remove-email-icon" color="red">remove_circle</v-icon></button>\{{ title }}\
</v-list-tile-title>\
',
props: ['title']
})
new Vue({
el: '#contact-list',
data: {
newContact: '',
contacts: [],
nextContactId: 1
},
methods: {
addNewContact: function() {
this.contacts.push({
id: this.nextContactId++,
title: this.newContact
})
this.newContact = ''
}
}
})
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vuetify#1.0.5/dist/vuetify.min.css" />
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#1.0.5/dist/vuetify.min.js"></script>
<div id="contact-list">
<v-app>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-toolbar color="blue" dark>
<v-toolbar-title class="text-xs-center">Contacts</v-toolbar-title>
</v-toolbar>
<v-container>
<v-text-field v-model="newContact" #keyup.enter="addNewContact" placeholder="Add new email contact email"></v-text-field>
</v-container>
<v-divider></v-divider>
<v-list class="resize-list">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title is="contact-item" v-for="(contact, index) in contacts" :key="contact.id" :title="contact.title" #remove="contacts.splice(index, 1)">
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>
Thank you!
Use v-for on v-list-tile component (see vuetify examples).
<v-list-tile
v-for="(contact, index) in contacts"
:key="contact.id"
>
That will produce multiple lis that you want from your examples (currently you only have one li element in list because of v-for on title, so that's why it's not working properly)

Categories

Resources