I have been vuetify's <v-tooltip> and I don't find any attributes in their API so I could either use \n or <br /> to create a newline inside the tooltip template.
Exemple :
<v-tooltip>
<template v-slot:activator="{ on }">
<v-btn>
button
</v-btn>
</template>
<span>First line \n second line</span>
</v-tooltip>
This will still display
First line second line
instead of
First line
second line
Insert p tags instead of spans, this will separate on to two lines.
Added mb-0 to remove excess spacing.
<!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-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
Button
</v-btn>
</template>
<p>Tooltip</p>
<p class="mb-0">Tooltip2</p>
</v-tooltip>
</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(),
})
</script>
</body>
</html>
You can just insert <br /> and v-html into your tooltip text and the text will appear in a new line.
Example:
<v-tooltip top transition="fade-transition" open-delay="500">
<template #activator="{ on, attrs }">
...
</template>
<span v-html="getTextWithNewlines"></span>
</v-tooltip>
getTextWithNewlines is a function which returns text with newlines... (<br />).
Related
I am using Vue and Vuetify and I want to show a green tick in front of the selected radio button. Right now it is at the bottom like this-
But I want it in the front of the selected radio button.
Here is my code-
<v-radio-group v-model="gstnRadio">
<v-radio
v-for="n in gstnArr"
color="#A01C40"
:key="n"
:label="`${n}`"
:value="n"
></v-radio>
</v-radio-group>
<v-tooltip v-if="gstnSelected">
<template v-slot:activator="{ on }">
<v-icon class="showHidePassword" color="green" v-on="on">check_circle</v-icon>
</template>
</v-tooltip>
EXPECTATION
GSTN abc
GSTN 123 (green tick here when this radio button is selected)
GSTN xyz
Totally blank as to what to do in order to achieve this.
Using slots, you can do this. Here is the working example-
<!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">
</head>
<body>
<div id="app">
<v-app>
<v-radio-group v-model="gstnRadio">
<v-radio
v-for="n in gstnArr"
color="#A01C40"
:key="n"
:label="`${n}`"
:value="n"
>
<template v-slot:label>
{{ n }}
<v-icon v-if="n == gstnRadio" class="ms-2 showHidePassword" color="green" v-on="on">mdi mdi-check-circle</v-icon>
</template>
</v-radio>
</v-radio-group>
</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 () {
return {
gstnRadio: null,
gstnArr: [
"GSTN abc", "GSTN 123", "GSTN xyz"
]
}
},
})
</script>
</body>
</html>
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>
How can I make this not hidden when it overflows the component? Thank you for your help.
<v-card>
<v-btn #click="dialog = false" fab small absolute top right class="error">
<v-icon>
mdi-close
</v-icon>
</v-btn>
</v-card>
Check your CSS - your card is having overflow: hidden. Remove this CSS rule and it will work as expected.
new Vue({
el: '#app',
template: '#main',
vuetify: new Vuetify(),
})
<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#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app"></div>
<template id="main">
<v-app>
<v-main class="pa-8">
<v-row justify="center">
<v-card>
<v-btn #click="dialog = false" fab small absolute top right class="error">
<v-icon>
mdi-close
</v-icon>
</v-btn>
<v-card-text>This is some example text</v-card-text>
</v-card>
</v-row>
</v-main>
</v-app>
</template>
You can override the style using vue's CSS deep selector (>>>). Judging by your code, the overflow style must be coming from the v-dialog class (#click="dialog = false", I take for granted you're trying to close a dialog on the click of that button), so just add this to the vue component :
<style scoped>
>>> .v-dialog {
overflow-y: visible;
}
</style>
The '>>>' makes it so the overflow-y property of the v-dialog class is going to be overriden.
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.
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>