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!
Related
I would like to have a container filling the height (screen height). In the center of that container I want to have a card with some text. The container itself should have a background image.
So the current code I'm using is
<div id="app">
<v-app id="inspire">
<v-content>
<v-container fluid fill-height>
<!--
<v-img
src="https://images.pexels.com/photos/18104/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
gradient="to top right, rgba(100,115,201,.5), rgba(25,32,72,.8)"
>
-->
<v-layout align-center justify-center>
<v-card flat color="transparent">
<v-card-title class="justify-center white--text display-2 font-weight-medium">
Title goes here
</v-card-title>
<v-card-subtitle class="text-center white--text display-1">
Subtitle goes here
</v-card-subtitle>
</v-card>
</v-layout>
<!-- </v-img> -->
</v-container>
<h1>header below screen height</h1>
</v-content>
</v-app>
</div>
if you comment in the image the HTML will break and the card is not centered anymore. I created a Codepen for reproduction
https://codepen.io/trilliogus/pen/oNjbQMK?editors=1010
Would someone mind helping me achieving the desired layout?
PEN LINK
Description: If you have a div with position:relative then all the child div's with position:absolute will be stacked with top:0;left:0;
<div id="app">
<v-app id="inspire" flex>
<v-content>
<v-container fluid class="ma-n1 pa-0">
<v-row no-gutters>
<v-col>
<div style="height:100vh;
position: relative;
overflow:hidden;"
>
<div style="position:absolute;height:100vh;width:100vw;">
<v-img
src="https://picsum.photos/800/800"
height="100vh"
aspect-ratio="1.7"
cover
></v-img>
</div>
<div style="position:absolute;height:100vh;width:100vw;">
<v-container fluid fill-height>
<v-row>
<v-col align="center">
<v-card flat color="transparent">
<v-card-title
class="justify-center
white--text
display-2 font-weight-medium"
>
Title goes here
</v-card-title>
<v-card-subtitle
class="text-center
white--text display-1">
Subtitle goes here
</v-card-subtitle>
</v-card>
<v-col>
</v-row>
</v-container>
</div>
</div>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
I use Vuetify and the "secondary" color doesn't show, as the "github" icon.
Here is my code:
<div class="text-center">
<v-bottom-sheet v-model="aPropos" inset>
<template v-slot:activator="{ on: sheet }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
class="mx-2"
fab
dark
small
v-on="{ ...tooltip, ...sheet }"
color="secondary">
<v-icon dark>mdi-help-circle-outline</v-icon>
</v-btn>
</template>
<span>À propos</span>
</v-tooltip>
</template>
<v-sheet class="text-center">
<div class="my-3">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://www.facebook.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-facebook</v-icon>
</v-btn>
</template>
<span>Facebook</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://twitter.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-twitter</v-icon>
</v-btn>
</template>
<span>Twitter</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://www.linkedin.com/in/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-linkedin</v-icon>
</v-btn>
</template>
<span>LinkedIn</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="mailto:xxx" class="mx-2" color="secondary" fab x-small dark v-on="on">
<v-icon>mdi-email</v-icon>
</v-btn>
</template>
<span>Courriel</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="http://xxx" target="_blank" class="mx-2" color="orange" fab x-small dark v-on="on">
<v-icon>mdi-firefox</v-icon>
</v-btn>
</template>
<span>Site internet</span>
</v-tooltip>
</div>
<div class="my-3">Licence</div>
<div class="my-3">
<v-btn href="https://github.com/xxx" target="_blank" class="ma-2" tile outlined color="primary">
<v-icon left>mdi-github</v-icon> Page GitHub du projet
</v-btn>
</div>
<v-btn
class="mt-6"
text
color="error"
#click="aPropos = !aPropos"
>Fermer</v-btn>
</v-sheet>
</v-bottom-sheet>
</div>
And here is the result:
The "email" button should be light blue and the logo next to "Page GitHub" should be the GitHub logo, not a striked telephone.
I precise, because I already searched for similar questions, that I use "v-app" at the top of my app, to wrap it all (all the other features display correctly).
I use the last version of VueJS and Vuetify (everytime I build I fetch the last version).
If anybody has a clue why I have this result, it would be great. Thanks in advance.
Actually running npm install #mdi/font --save-dev solves the "GitHub" icon problem.
The color problem wasn't a problem, surprisingly it's the color they've chosen to be secondary.
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>
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>
I have 2 columns, 1 with a textarea. The code below gives me what I want except that my textarea is narrow. I want it to be the full width of the v-card. What am I missing?
See the example on codepen
<div id="app">
<v-app id="inspire">
<v-card>
<v-container fluid>
<v-layout row>
<v-flex md7>
<v-card dark color="green darken-2">
<textarea full-width rows=30 min-height=500 v-model="message">
</textarea>
</v-card>
</v-flex>
<v-flex md5 >
<v-card dark color="blue darken-2">
<pre v-highlightjs="sourcecode"><code class="html">{{message}}
</code></pre>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-app>
</div>
Props like full-width are implelemted by Vuetify components. <textarea> is HTML element, therefore it doesn't know about Vuetify 'magic' props.
<v-textarea> is what you are looking for.
https://vuetifyjs.com/en/components/textarea
Or you can use old-fasioned inline-style (quite not recommended if you can use the advantage of vuetfiy).
<textarea style="width:100%;"></textarea>