I have a button which should be displayed if a value is bigger than 2, so I wrote a "v-if" condition. Everything works fine, but when I add a tooltip, the button doesn't reappear when the "v-if" conditionis fulfilled.
Here is the example:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})
<!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#3.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">
<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>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn #click="val++">+</v-btn>
<v-btn #click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="green" v-if="val > 2" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2" v-on="on">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>
Could anybody give me a clue on what happens here?
Thanks in advance
You should put the v-if directive on the v-tooltip element instead of the button, or use v-show on the button instead of v-if.
The reason that the button doesn't appear is that the button is in a slot of the tooltip. Using v-if, the button is not rendered, so the slot is blank, forcing the tooltip component to use the default slot contents. You can't re-fill an empty slot, at least in Vuetify. v-show works because the button is still rendered to the DOM, it is only hidden.
USING V-IF ON THE TOOLTIP:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})
<!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#3.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">
<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>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn #click="val++">+</v-btn>
<v-btn #click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom v-if="val > 2">
<template v-slot:activator="{ on }">
<v-btn color="green" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>
USING V-SHOW ON THE BUTTON:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})
<!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#3.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">
<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>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn #click="val++">+</v-btn>
<v-btn #click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="green" v-show="val > 2" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>
Related
I need the logo inside to be displayed exactly in the middle of the app bar. How can I achieve this result taking into consideration the other elements inside the app bar?
I tried using v-spacer after the v-app-bar-icon, but the result doesn't feel centered at all.
One example of what I am trying to achieve is the official nuxt site app bar (when the display is below md size): https://nuxtjs.org/
<v-app-bar fixed app>
<v-app-bar-nav-icon
aria-label="show-or-hide-navigation-menu"
#click.stop="drawer = !drawer"
/>
<nuxt-link aria-label="home-page" to="/">
<v-img
v-show="searchClosed"
:src="require('~/assets/images/example_Logo.svg')"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</nuxt-link>
<v-spacer v-show="searchClosed"></v-spacer>
<v-btn v-show="searchClosed" aria-label="show-user-menu" icon>
<v-icon>mdi-account-circle</v-icon>
</v-btn>
<transition name="slide-fade">
<nav-search
v-show="!searchClosed"
#search-opened="searchClosed = false"
#search-closed="searchClosed = true"
></nav-search>
</transition>
<v-btn
v-show="searchClosed"
aria-label="show-or-hide-search-input"
icon
#click="searchClosed = false"
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
There are two ways to do this-
1. Try putting the v-spacer before and after the logo image-
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<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/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-img
src="https://picsum.photos/200/300"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
</div>
</v-app>
</div>
2. Use the grid system-
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<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/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-row>
<v-col align="start">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</v-col>
<v-col align="center">
<v-img
src="https://picsum.photos/200/300"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</v-col>
<v-col align="end">
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-col>
</v-row>
</v-app-bar>
</div>
</v-app>
</div>
can Any one help me... I want to show card-title only in card-1. I don't want to show the card-title in card-2 card-3 and card-4.
<v-app>
<v-row v-for="(item, index) in list" :key="index">
<v-col cols="12">
<v-card>
<v-card-title>
<v-avatar size="60" color='primary'>{{item.avatarText}}</v-avatar>
</v-card-title>
<v-card-text>{{item.name}}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
</template>
<script>
export default{
data(){
return{
list:[{name:'apple1',avatarText:'Abc',},
{name:'apple2'},
{name:'apple3'},
{name:'apple4'}]
}
}
Using v-if, you can check for the index:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
list:[ {name:'apple1', avatarText:'Abc'}, {name:'apple2'}, {name:'apple3'}, {name:'apple4'} ]
})
});
<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://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">
<v-app id="app">
<v-row v-for="(item, index) in list" :key="index">
<v-col cols="12">
<v-card>
<v-card-title v-if="index === 0">
<v-avatar size="60" color='primary'>{{item.avatarText}}</v-avatar>
</v-card-title>
<v-card-text>{{item.name}}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
How to I add the checkboxes from v-select when customizing text and without overriding the multiple.
<v-select
v-model="selectedRepoImage"
:items="repoImages"
item-text="fulltag"
item-value="repo_image_id"
multiple>
<template v-slot:selection="{ item, index }">
<template v-slot:selection="{ item, index }">
<v-chip v-if="index === 0">
<span>{{item.fulltag}}</span>
</v-chip>
<span
v-if="index === 1"
class="grey--text caption"
>(+{{ selectedRepoImage.length - 1}} others)</span>
</template>
</template>
<template v-slot:item="{ item }">
//checkboxes ??
//item.name ??
</template>
</v-select>
This is pretty simple, just take a look at my snipped:
I can adopt it to your code, if you dont get it to work by yourself.
<template v-slot:item="{item, attrs, on}">
<v-list-item v-on="on" v-bind="attrs" #default="{ active }">
<v-list-item-action>
<v-checkbox :ripple="false" :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
<v-row no-gutters align="center">
{{ item.name }} {{ item.service.name }}
</v-row>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
This Vuetify textfield example has a checkbox
<!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="app">
<v-app>
<v-main>
<v-card>
<v-card-text>
<v-row align="center">
<v-checkbox
v-model="includeFiles"
hide-details
class="shrink mr-2 mt-0"
></v-checkbox>
<v-text-field label="Include files"></v-text-field>
</v-row>
<v-row align="center">
<v-checkbox
v-model="enabled"
hide-details
class="shrink mr-2 mt-0"
></v-checkbox>
<v-text-field
:disabled="!enabled"
label="I only work if you check the box"
></v-text-field>
</v-row>
</v-card-text>
</v-card>
</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: '#app',
vuetify: new Vuetify(),
data: () => ({
includeFiles: true,
enabled: false,
}),
})
</script>
</body>
</html>
expansion-panel and when I delete one from the array it automatically opens the next one for me.
how can I undo it?
Thanks
<v-expansion-panel
v-for="(Test, index) in Test"
:key="index">
<v-expansion-panel-header>
<template v-slot:actions>
<v-icon color="green">fa fa-check</v-icon>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-col cols="4">
<v-btn
text
color="primary"
#click="
delete(Test)
"
>delete</v-btn
>
</v-col>
</v-expansion-panel-content>
</v-expansion-panel>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
active: null,
test: [1, 2, 3, 4, 5]
}),
methods: {
del(index) {
this.test.splice(index, 1)
this.active = null
}
}
})
<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#5.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/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-expansion-panels v-model="active">
<v-expansion-panel v-for="(t, index) in test" :key="index">
<v-expansion-panel-header>
item
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-col cols="4">
<v-btn text color="red" #click="del(index)">delete{{t}}</v-btn>
</v-col>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-container>
</v-main>
</v-app>
</div>
Using value prop:
Controls the opened/closed state of content in the expansion-panel. Corresponds to a zero-based index of the currently opened content.
Set this.active = null after each deletion to keep the panel closed.
I'm trying to have a button enlarging progressively in Vuetify: I start from a fab icon then when I hover the button the text appears. For the moment the text appears progressively, but the button change its size directly from little to big, there is no progression, no animation for the size of the button.
If I didn't explain myself correctly, please ask me for more details.
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<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#5.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="app">
<v-app>
<v-main>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
>
<v-hover
v-slot:default="{ hover }"
open-delay="200"
>
<v-btn
color="blue-grey"
class="ma-2 white--text"
rounded
>
<v-icon dark>mdi-help-circle-outline</v-icon>
<v-scroll-x-transition>
<span v-if="hover" class="ml-2">Help</span>
</v-scroll-x-transition>
</v-btn>
</v-hover>
</v-col>
</v-row>
</v-container>
</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>
</body>
</html>
Try changing from:
<v-scroll-x-transition>
<span v-if="hover" class="ml-2">Help</span>
</v-scroll-x-transition>
to:
<v-expand-x-transition>
<span v-if="hover" class="ml-2">Help</span>
</v-expand-x-transition>
With this approach, you will be able to get rid of that "snap", that as you`ve described: from little to big.