I have a little problem when I want to make my vue-highchart responsive. I have an example for it (see image 1)
and its mine (see image 2)
this is my code
<v-tab-item class="tabs__resources">
<v-card outlined rounded="60">
<v-container>
<v-row>
<v-col>
<highcharts :options="chart_cpu"></highcharts>
</v-col>
<v-col>
<highcharts :options="chart_memory"></highcharts>
</v-col>
<v-col class="py-6">
<v-card class="card-incoming" :ripple="false">
<v-layout class="py-1" align-center justify-center>
<v-flex>
<div class="text-center">
<h4>Incoming Rate Total</h4>
<h2>{{network_total.rx}}</h2>
</div>
</v-flex>
</v-layout>
</v-card>
<v-card class="card-outgoing" :ripple="false">
<v-layout class="py-1" align-center justify-center>
<v-flex>
<div class="text-center">
<h4>Incoming Rate Total</h4>
<h2>{{network_total.tx}}</h2>
</div>
</v-flex>
</v-layout>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</v-tab-item>
Chose responsive.rules to fit the charts, manipulate size and center to change position of pie. Plot chart area is reserved for the whole circle, you need to remember this when you setting.
responsive: {
rules: [{
condition: {
maxWidth: 400
},
chartOptions: {
series: [{
size: '100%',
center: ['50%', '50%'],
}]
}
}]
}
Demo: https://jsfiddle.net/BlackLabel/5kh9ad4w/1/
API: https://api.highcharts.com/highcharts/responsive
Related
I am trying to use Vuetify components to achieve an effect on some v-img thumbnails and I am failing to do so. My images are setup as follows:
<v-row class="fill-height pa-5"
align-content="center"
justify="center">
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc1"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc2"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc3"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc4"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
</v-row>
I have these aligned horizontally in a row with columns and I am trying to have it so that when i over over each v-img they dim separately and a white solid v-button will appear in the center which I will assign a link/text too. What is the best way to do this as the hover component seems to lack dimming properties.
I don't think you are going to get this straight out the box but you don't need to do much more to get the result you want.
Out-the-box...
Use the Hover component to trigger an event and use the slot (boolean) value to toggle CSS class(es).
Template
<v-hover v-slot="{ hover }">
<v-card :class="{ 'on-hover': hover }">
// ...
</v-card>
</v-hover>
Custom...
Then add some scoped styles. The following is just a quick example but you can style however you like.
Styles
.v-image {
transition: filter .4s ease-in-out;
}
.v-card:hover .v-image {
filter: brightness(25%);
}
Example: https://codepen.io/alexpetergill/pen/NWBadjV
Docs: https://vuetifyjs.com/en/components/hover/
API: https://vuetifyjs.com/en/api/v-hover/#slots
I am creating my first website with Vue so I am creating a website for saving recipes I have a home page where you click to add new recipes and it takes you to a page where you can write your recipes and it will save on the home page kind of like a ( to do list ), so I am having troubles with saving the data that the user inputs. how can I get back the saved data from getters? ps. I know this is very simple but I am new to Vue
here are my codes (newrecp page) :
<template>
<div class="container">
<v-text-field
class="mx-1 my-1"
label=" food name"
color="black"
outlined
v-model="data . title"
></v-text-field>
<v-timeline :dense=" $vuetify . breakpoint . s m And Down">
<v-timeline-item
color="purple lighten-2"
fill-dot
right
>
<v-card>
<v-card-title class="purple lighten-2">
<h2 class="display-1 white--text font-weight-light">Step 1</h2>
</v-card-title>
<v-container>
<v-row>
<v-col cols="12" md="10">
<v-text area
auto-grow
rows="4"
row-height="20"
shaped
v-model="data.one"
></v-text area>
</v-col>
</v-row>
</v-container>
</v-card>
</v-timeline-item>
<v-timeline-item
color="amber lighten-1"
fill-dot
left
small
>
<v-card>
<v-card-title class="amber lighten-1 justify-end">
<h2 class="display-1 mr-4 white--text font-weight-light">Step 2</h2>
</v-card-title>
<v-container>
<v-row>
<v-col cols="12" md="8">
<v-text area
auto-grow
rows="4"
row-height="20"
shaped
v-model="data. two"
></v-text area>
</v-col>
</v-row>
</v-container>
</v-card>
</v-timeline-item>
<v-timeline-item
color="cyan lighten-1"
fill-dot
right
>
<v-card>
<v-card-title class="cyan lighten-1">
<h2 class="display-1 white--text font-weight-light">Step 3</h2>
</v-card-title>
<v-container>
<v-row>
<v-col >
<v-text area
auto-grow
rows="4"
row-height="20"
shaped
v-model="data .three"
></v-text area>
</v-col>
</v-row>
</v-container>
</v-card>
</v-timeline-item>
<v-timeline-item
color="red lighten-1"
fill-dot
left
small
>
<v-card>
<v-card-title class="red lighten-1 justify-end">
<h2 class="display-1 mr-4 white--text font-weight-light">Step 4</h2>
</v-card-title>
<v-container>
<v-row>
<v-col cols="12" md="10">
<v-text area
auto-grow
rows="4"
row-height="20"
shaped
v-model="data .four"
></v-text area>
</v-col>
</v-row>
</v-container>
</v-card>
</v-timeline-item>
</v-timeline>
<v-layout row wrap>
<v-flex mx-3 >
<v-b t n block color="secondary" dark #click="addnew">Save</v-b t n>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
data (){
return{
data: {
title:'',
one: '',
two: '',
three: '',
four: '',
}
},
methods: {
addnew(){
let savedrecp = this.data
this.$store.commit('newrecp', savedrecp)
this.$router.push({ path:'/' })
}},
}
</script>
In my store:
state: {
data : [],
},
mutations: {
newrecp(state, data) {
// mutate state
state. data .push(data)
}
},
getters: {
data(s){
return s .data
},
}
Script for my saved recipe page:
<script>
export default {
data (){
return{
data: {
title: '',
one: '',
two: '',
three: '',
four: ''
},
}
},
computed: {
item(){
return this. $store.getters.data
}
},
mounted() {
console.log(this. data);
},
}
</script>
Home page:
<template>
<div class="home">
<v-container grid-list-xs>
<v-btn bottom fixed to="/new" > Click to add new Recipes
<v-icon>fas fa-home</v-icon>
</v-btn>
<v-layout row wrap>
<v-flex xs12 x13 lg12 v-for="(item, index) in data" :key="index">
<v-card
>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">Recipe </div>
<h1>{{item.title}}</h1>
<v-list-item-title class="headline mb-1">pizza</v-list-item-title>
<v-list-item-subtitle >Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-actions>
<v-btn class="button3" text>remove</v-btn>
<v-btn class="button1" text :to="'/savedrecp/'+item.title">open</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
In general we use two-way bindings on form input, textarea, and select elements inorder to save input data you can read official document here.
regarding you'r code i don't see any problems in it unless there is something that you haven't shared right now you must be able to use you'r data like this:
savedRecipe() {
console.log(this.data) // => you can check you'r data in console.
}
UPDATE
You are trying to modify the vuex state from the vue component, You can not do it. You can only modify vuex store from a mutation.
In you'r store:
mutations: {
addRecipe(state, recipe) {
// mutate state
state.data.push(recipe)
}
and commit to mutation:
savedrecp(){
let savedrecp = this.data
this.$store.commit('addRecipe', savedrecp)
this.$router.push({ path:'/' })
}
I'm currently doing the login page of my website but I can't properly center my v-card horizontally and vertically.
The best score I have is this one:
<template>
<v-layout align-center justify-center column fill-height>
<v-flex row align-center>
<v-card>
<v-toolbar color="primary" >
<v-toolbar-title>Login</v-toolbar-title>
</v-toolbar>
<v-text-field label="Email" v-model="email"/>
<v-text-field label="Password" v-model="password" />
<v-footer>
<div>
<v-btn color="primary" v-on:click="login()">Login</v-btn>
<p>I don't have account: <a>Register</a></p>
</div>
</v-footer>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
name: 'Login',
data() {
return {
email: "",
password: ""
}
},
methods: {
login() {
console.log('login')
}
}
}
</script>
But with this, the text threads are compressed and I can't enlarge it.
Thanks in advance for your help.
Concise and works in v2+. This will get you a v-card with centered content HORIZONTALLY and VERTICALLY:
<v-card class="d-flex align-center justify-center" min-height="250">
Content here...
</v-card>
codepen
Try these.
<v-container bg fill-height grid-list-md text-xs-center>
<v-layout row wrap align-center>
<v-flex>
Hello I am center to vertically using "align-center".
</v-flex>
</v-layout>
</v-container>
or
<v-container fill-height fluid>
<v-row align="center"
justify="center">
<v-col></v-col>
</v-row>
</v-container>
I have a tiny project that I am building using vuetify 2, but the issue I am coming across is in a col with width 7, all my cards are showing up vertically, instead of a horizontal overflow.
What I am hoping to achieve is that the cards are vertical to each other by counts of five, with overflow moving to the second line.
My row arrangement is row > col2 col7 col3 /row. I am not using a v-container because it seems to put a container in the middle and not take up the whole screen.
I have tried using the flex-wrap, flex-column, flex-row etc class based on the vuetify docs, but that doesnt seem to change anything. Most of the examples that I found regarding this is for vuetify 1, and the component structure is different.
Codesandbox
App.vue
<template>
<v-app>
<v-app-bar
color="dark"
dark dense
>
</v-app-bar>
<v-row no-gutters>
<v-col fluid cols="2"></v-col>
<v-col fluid cols="7">
<HelloWorld v-for="c in 10" :key="c" />
</v-col>
<v-col fluid cols="3"></v-col>
</v-row>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
},
data: () => ({
//
}),
};
</script>
HelloWorld.vue
<template>
<v-card class="mx-auto" max-width="344" outlined>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
name: "HelloWorld"
};
</script>
What I have at the moment is this: The arrows are showing how I would like the successive card to be next to the card and so forth.
If you want to ignore row wrap you can just add .flex-nowrap class:
<v-row class="flex-nowrap">
Update
I get it. You paste card inside of col. My bet.
You just can do this:
<template>
<v-app>
<v-app-bar
color="dark"
dark dense
>
</v-app-bar>
<v-row no-gutters>
<v-col cols="2"></v-col>
<v-col cols="7">
<v-row no-gutters>
<v-col v-for="c in 10" :key="c" cols="4">
<HelloWorld/>
</v-col>
</v-row>
</v-col>
<v-col cols="3"></v-col>
</v-row>
</v-app>
</template>
I have the problem that i want to stack a v-toolbar and a v-calendar and i want that the calendar to takes the remaining space. It works good if i add just calendar, but if i add something else above, the calendar overflows the screen. (See picture the white space at the bottom )
Screenshot:
https://drive.google.com/open?id=1dOU6IMzWHUqZk5H2e-2-zTez-l17FLG5
I'm sure the problem is somewhere withe the fill-height attr., but i don't know how to solve it. Does some on have any idea ?
<template>
<v-container fill-height fluid ma-0 pa-0>
<v-layout row wrap align-content-start>
<v-flex xs12>
<v-toolbar flat>
<v-flex shrink>
<for-and-backward-arrows v-model="selectedDate" />
</v-flex>
</v-toolbar>
</v-flex>
<v-flex shrink>
<MonthOverView #click="setDate" />
</v-flex>
<v-flex fill-height>
<v-calendar
ref="calendar"
type="month"
color="primary"
:start="selectedDate.format('YYYY-MM-DD')"
>
<template v-slot:day="day">
<v-sheet class="d-flex px-1 caption" :color="color"
>day slot</v-sheet
>
</template>
</v-calendar>
</v-flex>
</v-layout>
<AddButtons></AddButtons>
</v-container>
</template>
<script>
import MonthOverView from '#/plugins/Goole-Calendar/src/components/MonthOverView.vue'
import AddButtons from '#/plugins/Goole-Calendar/src/components/AddButtons.vue'
import ForAndBackwardArrows from '#/plugins/Goole-Calendar/src/components/ForAndBackwardArrows.vue'
import moment from 'moment'
export default {
props: {
color: {
type: String,
default: 'primary lighten-3'
}
},
data() {
return {
selectedDate: moment()
}
},
methods: {
setDate(date) {
log.debug(date)
this.selectedDate = date
}
},
components: {
MonthOverView,
AddButtons,
ForAndBackwardArrows
}
}
</script>
I just ran into this myself. Solution was to use flex-column.
<v-content>
<v-row no-gutters class="fill-height">
<v-col class="d-flex flex-column">
<v-toolbar></v-toolbar>
<v-calendar></v-calendar>
</v-col>
</v-row>
</v-content>