I attempted to insert a new line in the string which is the Vuetify dialog text by using \n in the string. But it does not work.
Here is the code for the function that calls Vuetify dialog
handleDialog()
{
this.dialogHeading = "Clearing all component data"
this.dialogText = "Do you really want to clear all the component data?\nThis will clear the components except the pressure and composition basis!"
this.dialogBtn1 = "Cancel"
this.dialogBtn2 = "Yes"
this.isDialog = true
}
And here is the code for displaying the Vuetify dialog
<v-layout row wrap >
<v-flex class="text-xs-center">
<v-dialog v-model="isDialog" persistent max-width=400>
<v-card>
<v-card-title class=" error title white--text
darken-2 font-weight-bold">{{dialogHeading}}
</v-card- title>
<v-card-text>{{dialogText}}</v-card-text>
<v-card-text v-if="dialogText2">{{dialogText2}}
</v-card-text>
<v-card-actions >
<v-btn v-if="dialogBtn1" flat class=
"align-content-center d-flex mx-auto" dark
color="red darken-1 font-weight-bold"
text
#click="clearDialog('no')">{{dialogBtn1}}</v-btn>
<v-btn v-if="dialogBtn2" flat
class="align-content-center d-flex mx-auto
font-weight-bold" dark color="green darken-1"
text #click="clearDialog('yes')">{{dialogBtn2}}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-flex>
</v-layout>
I've tried using '\n' .
I need the second sentence in the next line
Here is the screenshot of the result that I get
Any help would be appreciated. Thank you in advance
You should use <br/> tag instead of \n in order to go to the next line and use v-html directive to render that string :
this.dialogText = "Do you really want to clear all the component data?<br/>This will clear the components except the pressure and composition basis!"
template:
<v-card-text v-html="dialogText"></v-card-text>
One way to achieve this would be to wrap each line in a block-level element such as a <div> within the template. The original string could be split on newlines and iterated accordingly:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
dialogText: 'First line\nSecond line'
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/#mdi/font#3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify#2.0.17/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.0.17/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-card>
<v-card-title>Title</v-card-title>
<v-card-text>
<div v-for="(text, index) in dialogText.split('\n')" :key="index">
{{ text }}
</div>
</v-card-text>
</v-card>
</v-app>
</div>
This retains the default escaping behaviour that would be lost using v-html.
The easiest way is to use div, like this:
<v-card-text>
<div>{{ dialogText }}</div>
<div>Whitsunday Island, Whitsunday Islands</div>
</v-card-text>
The code is from vuetify card docs
you can put text-pre-wrap on your element's class and just use regular \n breaks or even template strings with line breaks in them:
<v-card-text class="text-pre-wrap">
{{dialogText}}
</v-card-text>
<!-- The same as -->
<v-card-text class="text-pre-wrap">
{{
`Do you really want to clear all the component data?\nThis will clear the components except the pressure and composition basis!`
}}
</v-card-text>
<!-- The same as -->
<v-card-text class="text-pre-wrap">
{{
`Do you really want to clear all the component data?
This will clear the components except the pressure and composition basis!`
}}
</v-card-text>
Related
For example if I click on all the v-card I am redirecting to an other link BUT if I click on the title World of the Day and only on the title I don't want to do nothing. How to avoid to be redirected when clicking on title ?
template>
<v-card
class="mx-auto"
max-width="344"
#click="goToAnOtherLink"
>
<v-card-text>
<div>Word of the Day</div>
<p class="display-1 text--primary">
be•nev•o•lent
</p>
<p>adjective</p>
<div class="text--primary">
well meaning and kindly.<br>
"a benevolent smile"
</div>
</v-card-text>
<v-card-actions>
<v-btn
text
color="deep-purple accent-4"
>
Learn More
</v-btn>
</v-card-actions>
</v-card>
</template>
If it's only the title, use the stop event modifier. This is easier than having the logic in the method.
<v-app>
<v-card class="mx-auto" max-width="344" #click="goToAnOtherLink">
<v-card-text>
<div class="title" #click.stop>Word of the Day</div>
<p class="display-1 text--primary"> be•nev•o•lent </p>
<p>adjective</p>
<div class="text--primary"> well meaning and kindly.<br> "a benevolent smile" </div>
</v-card-text>
<v-card-actions>
<v-btn text color="deep-purple accent-4"> Learn More </v-btn>
</v-card-actions>
</v-card>
</v-app>
https://codeply.com/p/2ExpE6PF6F
Add a class to the title div as well, and check the classes of your event's target inside the function goToAnOtherLink. Then you can use stopPropagation() along with the custom code you have in that function.
new Vue({
el: "#app",
data() {},
methods: {
goToAnOtherLink(e) {
if (e.target.classList.contains("title") || e.target.classList.contains("display-1")) {
e.stopPropagation()
console.log("Cancelled Navigation!")
} else {
console.log("Navigated!")
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<div id="app">
<v-app>
<v-card class="mx-auto" max-width="344" #click="goToAnOtherLink">
<v-card-text>
<div class="title">Word of the Day</div>
<p class="display-1 text--primary">
be•nev•o•lent
</p>
<p>adjective</p>
<div class="text--primary">
well meaning and kindly.<br> "a benevolent smile"
</div>
</v-card-text>
<v-card-actions>
<v-btn text color="deep-purple accent-4">
Learn More
</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
You can wrap your v-card in a div and use absolute positioning to place the title; so that the title is in "front" of the v-card thus clicking on it does nothing.
Pseudo-code
<div>
<span>Word of the day</span> <!-- use absolute to position inside the div -->
<v-card></v-card>
</div>
I was trying to keep the Vuetify dialog title and the headers of the content fixed to the top while scrolling. I used "style:"position:fixed".
When I scroll, the heading and the headers become out of the view. The current code is as given below
<v-layout row wrap >
<v-flex class="text-xs-center">
<v-dialog v-model="isDialogTips" max-width=800>
<v-card>
<v-card-title
class="text-xs-center justify-center primary title white--text darken-2 font-weight-bold">
{{dialogTipsHeading}}</v-card-title>
<!-- Displaying Tips matrix Headers-->
<v-layout
v-if="dialogTableOn"
row wrap
class="text-xs-center mx-auto pt-2 justify-space-between teal--text darken-4 "
style="width:600px;"
>
....
Table Headers
....
</v-layout>
....
some Table of content
....
<!-- Diplaying dialog buttons -->
<v-layout
>
<v-card-actions
class="text-xs-center mx-auto justify-space-around">
<v-btn v-if="dialogTipsBtn1" class="align-content-center d-flex mx-auto" dark color="red darken-4 font-weight-bold" text #click="clearDialog('no')">{{dialogTipsBtn1}}</v-btn>
<v-btn v-if="dialogTipsBtn2" class="align-content-center d-flex mx-auto font-weight-bold" dark color="green darken-4" text #click="clearDialog('yes')">{{dialogTipsBtn2}}</v-btn>
</v-card-actions>
</v-layout>
</v-card>
</v-dialog>
</v-flex>
</v-layout>
Here is the function that calls the dialog
handleDialog()
{
this.dialogTipsHeading = "Roughness Parameters of Transportation channel Materials"
this.dialogTipsBtn1 = ""
this.dialogTipsBtn2 = "OK"
this.dialogTableOn = true,
this.isDialogTips = true
}
The result that I get is like this
Please suggest a way to keep the content(The heading and the Table headers) fixed at the top and to scroll the table content. Also, is there a way to keep the action buttons always visible?
Thank you in advance!
Finally, I fixed it myself
It was about adding a prop "scrollable" in the "v-dialog" component and then setting the height of the "v-card-text" component
<v-dialog scrollable v-model = "isDialogTips"
max-width = 800 >
....
code (title/heading/headers)
...
<v-card-text
style = "height: 600px;" >
....
code
....
</v-card-text>
</v-dialog>
Now, the result, as desired, looks like this. The heading and the headers stay at the top and the button is always visible at the bottom.
Hii I am working on the Vue.js template and I stuck at a point where I need to show dynamic v-dialog using looping statement but now it shows all.
Dom:
<template v-for="item of faq">
<div :key="item.category">
<h4>{{ item.heading }}</h4>
<div v-for="subitems of item.content" :key="subitems.qus">
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{on}">
{{subitems.qus}}
</template>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
{{ subitems.ans }}
</v-card-text>
<v-divider></v-divider>
</v-card>
</v-dialog>
</div>
</div>
</template>
Script:
export default {
data: () => ({
faq,
dialog:false,
}),
}
I do not understand how I can do this. If I click on one button then it shows all.
There must a design a pattern for this one but a quick solution would be to create array of booleans for v-models of dialogs. something like below
export default {
data: () => ({
faq,
dialog: [] // Array instead of Boolean.
}),
}
and
<template v-for="item of faq">
<div :key="item.category">
<h4>{{ item.heading }}</h4>
<div v-for="(subitems, index) of item.content" :key="subitems.qus">
<v-dialog
v-model="dialog[index]"
width="500"
>
<template v-slot:activator="{on}">
{{subitems.qus}}
</template>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
{{ subitems.ans }}
</v-card-text>
<v-divider></v-divider>
</v-card>
</v-dialog>
</div>
</div>
</template>
Brother, you are doing a very small mistake, you should not keep your v-dialog component inside your loop, take this out from loop block and don't take dialog as empty array keep it false.
I have a v-btn.
When clicked on it, I want to have a dropdown to it. I don't want the dropdown to be a list, but the form with 3 labels and 3 text fields. Each label for each textfield.
Problem 1) When showing labels and textfields, they are all at the same line(horizontally). how do I make label and textfield below it?
Problem 2) WHen that dropdown appears and I put mouse on textfield, dropdown completely closes. I only want to close it when i click the button which also resides on that dropdown at the end of the form. how do I not close it when clicked on it ?
P.S. I am using v-menu for dropdown.
Problem 1
Can you please provide a small example of your code?
In Vuetify you can just use a v-text-field and give it a label via the label prop.
Problem 2
You can set close-on-click and close-on-content-click to false to prevent the dropdown from closing.
Small example:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
menuOpen: false,
firstname: "",
lastname: ""
};
},
methods: {
save() {
alert(`Your name is ${this.firstname} ${this.lastname}!`);
this.menuOpen = false;
}
}
});
#app { height: 400px; }
<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#latest/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-menu offset-y :close-on-click="false" :close-on-content-click="false" v-model="menuOpen">
<template v-slot:activator="{ on }">
<v-btn v-on="on" class="ma-4">BUTTON</v-btn>
</template>
<v-card>
<v-card-text>
<v-text-field label="First Name" v-model="firstname"></v-text-field>
<v-text-field label="Last Name" v-model="lastname"></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="grey darken-2" #click="menuOpen = false" dark>CANCEL</v-btn>
<v-btn color="primary" #click="save">OK</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</v-content>
</v-app>
</div>
1) Vuetify text fields have a prop named "label" - if you bind the label text to this prop it'll automatically appear above the text field. Otherwise, if you for some reason want to create your own label, just wrap both the label and input in a v-layout OR wrap the label and input in the same element (e.g. div) and make sure the label is a div
<v-flex xs12 sm6>
<div>test label</div>
<v-text-field
v-model="title"
:rules="rules"
counter="25"
label="Outline"
outline
></v-text-field>
</v-flex>
2) the menu has a "close-on-content-click" prop that defaults to true, which you can set to false. This will prevent the menu from closing on click
I need to use a fixed toolbar (with an extension). Problem is that The toolbar overlays the content as soon as the fixed prop gets added. How to place the content below the toolbar?
CodePen example: https://codepen.io/anon/pen/jpgjyd?&editors=101
<div id="app">
<v-app id="inspire">
<v-toolbar
color="primary"
dark
fixed
extended
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title slot="extension">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
</v-toolbar>
<v-layout>
<v-flex xs1 >
+++ FIRST LINE +++
[lots of text...]
</v-flex>
</v-layout>
</v-app>
</div>
One solution is adding app to v-toolbar and wrap v-layout inside v-content
<v-toolbar
app
color="primary"
dark
fixed
extended
>
...
</v-toolbar>
<v-content>
<v-layout>
</v-layout>
</v-content>
Demo https://codepen.io/ittus/pen/mGdbeN?editors=1010
References: Vuetify application layout tutorial
Add app to v-toolbar and wrap v-layout inside v-content
Couldn't get exactly your question, is this what you wanted to achieve:
new Vue({
el: '#app',
mounted(){
var fixedElement = document.getElementsByClassName('v-toolbar--fixed')[0];
var layout = document.getElementsByClassName('layout')[0];
layout.style = "padding-top: "+ fixedElement.offsetHeight + 'px';
}
});
https://codepen.io/Younes_k/pen/LJEjOL