I am working on a dashboard project where I want to present several widgets on the dashboard. one of these is to show the admins a visualisation of their active/idle devices and since the whole project is vuetify based, I am trying to do this with v-progress-linear component. But for some reason it doesn't show the progress properly even if I am not changing the value for the bar. Below is my code and a screen shot of the result. I couldn't find any solution to this online so I assume I am missing something very basic about the component's usage or the grid layout that it is wrapped by.
Any help would be appreciated...
result
<template>
<v-container fluid class="grey lighten-5">
<v-card outlined flat class="mx-auto" align="center">
<v-icon large class="mt-5 mb-1">mdi-developer-board</v-icon>
<v-card-title class="justify-center pt-1 display-2 font-weight-black" > {{totalDevices}} </v-card-title>
<v-card-subtitle class="justify-center">Total no of Devices</v-card-subtitle>
<v-divider></v-divider>
<v-row >
<v-col>
<v-card flat>
<span class="caption" >Active: </span>
<span class="subtitle-2" >{{totalActive}}</span>
<v-progress-linear style="margin : 0 auto ;" class="mt-3" determinate color="#3cd1c2" :value="calcProgressValue('active')" ></v-progress-linear>
</v-card >
</v-col>
<v-divider vertical></v-divider>
<v-col class="d-flex justify-center">
<v-card flat>
<span class="caption">Idle: </span>
<span class="subtitle-2 align-right" >{{totalIdle}}</span>
<v-progress-linear style="margin : 0 auto ;" class="mt-3 text-xs-center" determinate color="#ffaa2c" :value="calcProgressValue('idle')" ></v-progress-linear>
</v-card>
</v-col>
</v-row>
</v-card>
</v-container>
</template>
Related
Can I apply a certain color to the whole components within the projects? I mean, not attaching class individually on every tags like:
<v-icon left>mdi-phone-in-talk</v-icon>
<div class="pink darken-2 grey--text">tel</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-location-enter</v-icon>
<div class="pink darken-2 grey--text">loc</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-discord</v-icon>
<div class="pink darken-2 grey--text">name</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-email</v-icon>
<div class="pink darken-2 grey--text">mail</div>
</v-row>
// every div tag has "pink darken-2", seems quite WET
I want to achieve this goal by either to apply a certain color on the specific scope of components or to do it on the whole template within the project, such like a theme. Any good suggestion?
I know I could use "theme configuration", but I'm not sure whether I can apply the customed color tone (like a background color of button) or not.
** Best: applying a certain color to the whole components within the project with no additional code on each classes **
I would simply create a new component, that can be used anywhere.
#/components/PinkGreyText.vue
<template>
<div class="pink darken-2 grey--text">
<slot />
</div>
</template>
Now register the component: https://v2.vuejs.org/v2/guide/components-registration.html
Now you should be able to use it anywhere, below is your original snippet rewritten using the custom component above.
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-phone-in-talk</v-icon>
<pink-grey-text>tel</pink-grey-text>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-location-enter</v-icon>
<pink-grey-text>loc</pink-grey-text>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-discord</v-icon>
<pink-grey-text>name</pink-grey-text>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-email</v-icon>
<pink-grey-text>mail</pink-grey-text>
</v-row>
I have a code pen inside this code pen I have vuetify 2.2.15.
I've used footer as follow:
<div id="app">
<v-app>
<v-content>
<v-container>
<v-card>
<v-card-text>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-content>
<v-footer>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-app>
</div>
In the real code running on the web, this footer is aligned at the absolute bottom. But in the code pen, the footer is NOT aligned at the absolute bottom, but just follow the previous component relatively.
Is there any missing stack I should have used? Thank you for your suggestion.
you should use absolute in your v-footer like:
<v-footer absolute>
<v-col class="text-center">
footer
</v-col>
</v-footer>
absolute prop applies position: absolute to the component.
also you should move </v-content> after your footer
your final code should be like:
<div id="app">
<v-app>
<v-content>
<v-navigation-drawer app></v-navigation-drawer>
<v-container>
<v-card
>
<v-card-text
>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-footer absolute>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-content>
</v-app>
</div>
I'm currently creating a grid-layout in Vuetify, but I got stuck. I'm making a card-layout containing images. Here is the example:
I've tried it with the following code, but then small cards on the right are not aligned due to the margins.
<v-container>
<v-row class="justify-center">
<v-col cols="6">
<v-hover v-slot:default="{ hover }">
<v-card
to="/pools"
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover , 'overwrite-hover' : $vuetify.breakpoint.xsOnly}"
>
<v-img class="white--text" :src="images[0]">
<v-card-title class="white--text align-end fill-height headline">My Pools</v-card-title>
<template v-slot:placeholder>
<v-row class="fill-height" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</v-hover>
</v-col>
<v-col cols="2">
<v-card class="ma-2" light height="50%"></v-card>
<v-card class="ma-2" light height="50%"></v-card>
</v-col>
</v-row>
<v-row class="justify-center">
<v-col cols="8">
<v-card light height="120px"></v-card>
</v-col>
</v-row>
</v-container>
Does anyone have a suggestion, or maybe a similar example?
Thanks in advance!
Luckily you only need to make minor adjustments to the smaller cards on the right. Make use of flex and let flex do its magic :) It's basically telling the cards to grow to the maximum height available without clipping. Then add some margin in between the cards with the helper classes mb and mt.
<v-col cols="2" class="d-flex" style="flex-direction:column">
<v-card class="mb-1 flex-grow-1">
Upper card
</v-card>
<v-card class="mt-1 flex-grow-1">
Lower card
</v-card>
</v-col>
As a codesandbox. Check out the file "layout.vue" for the complete example.
I included Vuetify 2(latest) in my Vue project. I am trying to do some grids with cards inside of a container and it does apply container fluid behavior without including fluid.
Here is my App.vue
<template>
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
text
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2">Latest Release</span>
</v-btn>
</v-app-bar>
<v-content>
<v-layout>
<v-container videos-content grid-list-md >
<v-layout wrap>
<v-flex v-for="video in videos" :key="video.id" xs12 sm6 md3>
<v-card max-width="344" class="mx-auto">
<v-card-title>{{video.title}}</v-card-title>
<v-card-text>{{video.description}}</v-card-text>
<v-card-actions>
<a target="_blank" :href="video.url">open in Youtube</a>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</v-content>
</v-app>
</template>
In my opinion, the correct structure of vuetify layout is v-container >> v-layout >> v-flex
So maybe remove v-layout tag defined outside of v-container?
Though not quite sure what you meant by 'fluid behavior'...
It seems to be working fine, you just need to follow standard structure from vuetify documentation. I made a pen for you
<div id="app">
<v-app>
<template>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn>
<span class="mr-2">Latest Release</span>
</v-btn>
<v-container grid-list-md >
<v-layout wrap>
<v-flex xs12 sm6 md3>
<v-card max-width="344" class="mx-auto">
<v-card-title></v-card-title>
<v-card-text></v-card-text>
<v-card-actions>
<a>open in Youtube</a>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
</div>
Given I have a the following toolbar block
<v-toolbar
color="blue darken-1"
dark
app
clipped-left
fixed
>
<v-toolbar-title :style="$vuetify.breakpoint.smAndUp ? 'width: 300px; min-width: 250px' : 'min-width: 72px'" class="ml-0 pl-3">
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<span class="hidden-xs-only">eventzimmer</span>
</v-toolbar-title>
<v-text-field
light
solo
prepend-inner-icon="search"
placeholder="Search"
class="mt-2"
></v-text-field>
<div class="d-flex align-left ml-1">
<v-btn icon>
<v-icon>
location_on
</v-icon>
</v-btn>
<v-btn icon>
<v-icon>
date_range
</v-icon>
</v-btn>
</div>
</v-toolbar>
How would I be able to use the vuetify grid system to achieve horizontal grids?
Given that I use the grid example from the docs that would look like
<v-container fluid>
<v-layout row wrap>
<v-flex xs-8>
<v-text/>
</v-flex>
<v-flex xs-4>
<buttons/>
</v-flex>
</v-layout>
</v-container>
But unfortunately that looks mostly akward. The docs don't really flavour an example for horizontal alignment. Any example would very much appreciated!