Im trying to have two app navigation drawers side by side, like this
But I cant make it work. I tried to wrap them in a grid to make them appeare side by side, but they seem to be under each other. How do I flip the second navigation-drawer next to the other?
<v-container>
<v-row>
<v-col cols="6">
<v-navigation-drawer
v-model="drawer"
app
class="Carbon"
:src="'./nav/' + randomPic"
>
</v-navigation-drawer>
</v-col>
<v-col cols="6">
<v-navigation-drawer
v-model="drawer"
app
class="Carbon"
:src="'./nav/' + randomPic"
>
</v-navigation-drawer>
</v-col>
</v-row>
</v-container>
There is no need to use grid. Just put them inside <v-layout></v-layout> and remove the app. Like this:
<v-layout>
<v-navigation-drawer
v-model='drawer'
class='Carbon'
:src="'./nav/' + randomPic"
>
</v-navigation-drawer>
<v-navigation-drawer
v-model='drawer'
class='Carbon'
:src="'./nav/' + randomPic"
>
</v-navigation-drawer>
</v-layout>
Related
Im trying to add navigation panel to v-card but somehow when adding the navigation drawer, everything that is in the v-card is being pushed down- out of the card.
<v-card flat outlined>
<v-navigation-drawer v-model="drawer"
:mini-variant.sync="mini"
permanent>
<v-row>
<v-btn class="float-right" icon #click.stop="mini = !mini">
<v-icon color="black">mdi-chevron-left</v-icon>
</v-btn>
</v-row>
<p>
<v-card v-if="!mini">
TEST
</v-card></p>
</v-navigation-drawer>
<v-row dense>
<v-col cols="12">
<PlotCard
style="min-height: 350px"
:value="1837.32"
:percentage="3.2"
:loading="isLoading1"
percentage-label="vs last week"
action-label="V2"
></PlotCard>
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<table-card class="h-full" label="Recent Orders" />
</v-col>
</v-row>
</v-card>
I've recreated the problem here https://codesandbox.io/s/vuetify-playground-lxq25?file=/src/components/ExampleComponent.vue:38-55
As you can see navigation drawer is in the v-card but other cards are being pushed outside.
Ultimately I want to use the right attribute of navigation drawer in Vuetify to have in on the right but even normal one ins not working. Any idea why this might be happening?
EDIT: Adding absolute makes the navigation-drawer appear as overlay, but I was trying to make it appear form the right and "squeeze" the content of the card to the left.
vuetify have a layout system. for now you have content and navigation drawer, and the navigation drawer dont act right because it doesnt know where it belongs. you have to push your content to v-main(vuetify content layout component) and by passing app prop to navigation drawer you tell its part of layout and it is sidebar. more info:
https://vuetifyjs.com/en/components/application/#default-application-markup .
and pass right to push navigation to right. demo: https://codesandbox.io/s/vuetify-playground-forked-qjjnp?file=/src/components/ExampleComponent.vue
The Vuetify docs have lots of examples of how to use their grid layout support, e.g. a nested grid
<v-container class="grey lighten-5">
<v-row>
<v-col sm="9">
Row 1, Col 1
<v-row>
<v-col
cols="8"
sm="6"
>
Row 2, Col 1
</v-col>
<v-col
cols="4"
sm="6"
>
Row 2, Col 2
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
But it's not clear to me what the requirements are for how these elements should be used. For example:
Is <v-container> required?
Does <v-row> in the parent grid have to be a direct child of <v-container>
Is `<v-container`> required?
No it's not required
Does in the parent grid have to be a direct child of
If you use the v-container and you want to use grid system, then yes.
Although, it's not necessary to use v-container, just starting with v-row and then using v-col you can achieve anything. Of course v-row and v-col have many attributes that can help.
Check this playground https://v2.vuetifyjs.com/en/components/grids/
After the API section there is one called PLAYGROUND
This PLAYGROUND helped me to understand how grid works.
All I want is to have a carousel-item that contains two images. At the very least I want two carousels side by side. Any ideas since wrapping the carousels in row-cols or simply trying a sheet containning two images in each carousel item does not work.
EDIT : Notice how the component surpasses the right edge of the app drawer (should not happen and also on transition the background of the carousel flashes black. Ideally I get a carousel that is responsive with the two images inside transitionning without flashing black.
<template>
<v-container>
<v-row>
<v-col cols="1">
<v-btn icon large #click="toggle">
<v-icon>{{ playIcon }}</v-icon>
</v-btn>
</v-col>
<v-col>
<v-slider
color="light-green"
thumb-color="light-green accent-4"
thumb-size="30"
track-color="light-green accent-4"
v-model="run"
max="19"
:tick-labels="ticksLabels"
tick-size="6"
ticks/>
</v-col>
</v-row>
<v-carousel
:cycle="playPause"
hide-delimiters
interval=3000
v-model="run"
height="700px"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
transition="fade-transition"
reverse-transition="fade-transition"
v-for="(item,i) in items"
:key="i"
>
<v-row>
<v-card width="49%">
<v-img contain :src="item.avg"/>
</v-card>
<v-spacer></v-spacer>
<v-card width="49%">
<v-img contain :src="item.std"/>
</v-card>
</v-row>
</v-carousel-item>
</v-carousel>
</v-container>
</template>
You can fix the black flashing by adding these two props to the v-carousel
:dark="$vuetify.theme.dark"
:light="!$vuetify.theme.dark"
And to fix the scope of the component you can add this style.
<style scoped>
.v-carousel .v-window-item {
position: absolute;
top: 0;
width: 100%;
}
.v-carousel-item {
height: auto;
}
</style>
I have 4 cards (3 in the first row, 1 in second). Every time I resize my browser window my v-card-actions contents do not react. In pictures, this is when everything is ok:
And this is when I resize my browser window:
And finally here's my code:
.vue
<v-container
grid-list-lg
>
<v-layout
row
wrap
>
<v-flex
v-for="teacher in teachers"
:key="teacher.firstName"
md-4
xs4
>
<v-card
flat
tile
>
<v-img
:src='teacher.src'"
height="260px"
></v-img>
<v-card-title
primary-title
class='blue--text'
>
Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
</v-card-title>
<v-card-text class='body-1'>
M.S at {{teacher.ms}} <br>
M.S.C at {{teacher.msc}}
</v-card-text>
<v-card-actions>
<v-btn
flat
small
color='indigo darken-4'
>
More
</v-btn>
<v-spacer></v-spacer>
<v-btn
flat
small
color='indigo darken-4'
>
Schedule an Appointment
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<script>
data() {
return {
teachers:[
{firstName:'Jon', lastName:'Doe', specialty:'PE', ms:' University of Georgia',
msc:'University of Georgia', src:'https://source.unsplash.com/kmuch3JGPUM'},
{firstName:'Maria', lastName:'Doe', specialty:'Philology', ms:'University of Atlanta',
msc:'University of Atlanta ', src:'https://randomuser.me/api/portraits/women/3.jpg'},
{firstName:'Jon', lastName:'Jon', specialty:'Mathematics', ms:'University of Michigan',
msc:'University of Michigan', src:'https://source.unsplash.com/Jy4ELSGPHTc'},
{firstName:'Peter', lastName:'Xavier', specialty:'Mathematics',
ms:'University of Miami', msc:'University of Miami',
src:'https://randomuser.me/api/portraits/men/71.jpg'},
{firstName:'Peter', lastName:'Miros', specialty:'Mathematics', ms:'University of Miami',
msc:'Georgetown University', src:'https://randomuser.me/api/portraits/men/20.jpg'},
}
]
}
The <v-card-actions> element does react to browser width changes.
What you are seeing is an issue with the Vuetify <v-button> element as it does not (by default) wrap text to fit.
You have a few options:
Add custom CSS for your buttons to accommodate - tricky and a bit too much hacking for my liking.
Make your own button element just for this - seems overkill, but I've done this when I also want a button to stand out or look different enough to Vuetify's standard.
Modify your button text to be shorter - Try one word like "Booking" or "Appointments", and even modify the text (or change to an icon) depending on screen size if you want to get fancy.
Personally, I'd recommend option 3.
EDIT: Added xs12 sm6 md4 sizing and some minor formatting changes to highlight different elements
<v-container grid-list-lg>
<v-layout row wrap>
<v-flex v-for="teacher in teachers" :key="teacher.firstName" xs12 sm6 md4>
<v-card>
<v-img :src="teacher.src" height="260px "></v-img>
<v-card-title primary-title class='blue--text'>
Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
</v-card-title>
<v-card-text class='body-1'>
M.S at {{teacher.ms}} <br> M.S.C at {{teacher.msc}}
</v-card-text>
<v-card-actions>
<v-btn outline color='blue'>
More...
</v-btn>
<v-spacer></v-spacer>
<v-btn outline color='green'>
Appointments
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
I have tested this and there is no size below 300px (minimum for v-card) where the buttons don't look fine.
Made a codepen for you too.
I created a LoadingOverlay component managed by Vuex. The state represents its visibility. The current overlay component uses this code
<template>
<v-dialog value="true" transition="false" fullscreen hide-overlay scrollable>
<v-card>
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: "LoadingOverlay"
};
</script>
I created an example showing a demo
https://codesandbox.io/s/j7jjrpw83
I would like to setup opacity for the overlay. Currently the background is white and the view gets fully covered. I want to have an opacity of 0.7 for the overlay background.
Do I have to use my own CSS or is there a ready to use opacity attribute that I can add to the overlay component?
I know I could use color="transparent" but this would be too much.
I'm not too sure if this is the best "Vue" way to do it as I've never used Vue, but you can set the color on the v-card to have a translucent background colour:
<v-card color="rgba(255, 255, 255, 0.7)">
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
See fiddle
Or even using style and opacity:
<v-card style="opacity: 0.7">
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
<v-card overlay-opacity="0.15">
<...>
</v-card>