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>
Related
I have a v-navigation-drawer and a dropdown menu inside it.
I'd like them both to have the same width whether the dropdown's up or down. At the moment, the dropdown is going outside the drawer when I open it. Does anyone know how to reduce a dropdown's width ?
<v-navigation-drawer
class="vnd"
height="98vh"
width="360px"
dark
right
v-model="drawerSettings"
absolute
temporary
>
<template>
<v-container fluid>
<v-select
v-model="valuesType"
:items="typeArray"
label="Relationship"
multiple
>
<template v-slot:prepend-item>
<v-list-item
ripple
#mousedown.prevent
#click="toggleType"
class="test"
>
<v-list-item-action>
<v-icon :color="valuesType.length > 0 ? 'indigo darken-4' : ''">
{{ iconType }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Select All
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
</v-select>
</v-container>
</template>
</v-navigation-drawer>
First, remove the <v-container fluid> because it's taking padding, then use prop attach with v-select> , it specifies which DOM element that this component should detach to
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
drawerSettings: true,
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
selectedItem: [],
}),
})
<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#6.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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<div id="app">
<v-app id="inspire">
<v-card>
<v-navigation-drawer
class="vnd"
height="98vh"
width="360px"
dark
right
v-model="selectedItem"
absolute
temporary
>
<v-select
v-model="selectedFruits"
:items="items"
label="Favorite Fruits"
multiple
attach
>
</v-select>
</v-navigation-drawer>
</v-card>
</v-app>
</div>
</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>
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>
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 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>
I continue to deal with Vuetify.
Tell me how you can apply a tooltip only for append-icon in a v-text-field?
Now tooltip does not work for icons at all!
codepen
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-text-field
label="Regular"
v-on="on"
append-icon="event"
style="max-width: 200px"
/>
</template>
<span>Tooltip</span>
</v-tooltip>
No way to solve this (By some API option) - The component renders the icon outside of the text-area (Open GitHub issue/feature if you want).
Anyway if you use a simple <v-icon> component it works fine.
Extra details here:
Wrapping v-icon with v-tooltip inside text-field?
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
url: 'https://stackoverflow.com/'
}
})
<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-app>
<v-content>
<v-container>
<v-text-field label="Hello world">
<v-tooltip slot="append">
<template v-slot:activator="{ on }">
<v-icon v-on="on" color="primary" dark>
mdi-calendar
</v-icon>
</template>
<span>My Tooltip</span>
</v-tooltip>
</v-text-field>
</v-container>
</v-content>
</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>