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
Related
I'm trying to make my image draggable in another application like google or another site would do. For example if I drop an image from google to a Word document, it will copy the link of it and some web applications would show the image instead; the behavior depends on the app.
But the problem is my v-img doesn't even print the link, it just does nothing.
Here is my code:
<v-card v-if="chunk.length >= i">
<template v-if="activeTab === 'Comments'">
<v-card-title class="justify-center">{{ chunk[i-1] }}</v-card-title>
</template>
<template v-else-if="activeTab === 'Images'">
<v-img
:src="getImgUrl(chunk[i-1])"
width="500"
contain
draggable="true"
/>
</template>
<v-card-actions>
<v-col>
<v-btn
color="#138ed3"
block
dark
>
Share
</v-btn>
</v-col>
<v-col>
<v-btn
color="#ffcd00"
block
dark
>
Save
</v-btn>
</v-col>
</v-card-actions>
</v-card>
As you can see I already tried the "draggable" option but it doesn't help.
Is there something I'm missing ?
The problem with v-img is that it renders the image as background (using the CSS style background-image) rather than as an IMG tag. Apparently, CSS backgrounds do not support dragging.
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>
The docs at https://vuetifyjs.com/en/components/application/#application-components mention that v-navigation-drawer can be configured to appear below (instead of next to) v-app-bar but they don't seem to explain how to actually do that.
Here's the layout I'm looking for (v-app-bar spanning the whole width of the window, and v-navigation-drawer sitting below v-app-bar):
How do I configure v-navigation-bar to render like that?
My current code looks like this:
<v-app>
<v-system-bar app height="30" color="primary">The system bar</v-system-bar>
<v-app-bar app color="secondary" dense dark>
The application bar
</v-app-bar>
<v-navigation-drawer app>
<p>Navigation drawer</p>
</v-navigation-drawer>
<v-main>
<v-container>
<router-view></router-view>
</v-container>
</v-main>
<v-footer app>The footer</v-footer>
<v-bottom-navigation app color="secondary">The bottom navigation</v-bottom-navigation>
</v-app>
And it renders like this (note the navigation-drawer being next to, instead of below the application bar)
You need to add clipped-left prop to your v-app-bar and clipped prop to your v-navigation-drawer.
I have two icons, how can I make a space between them?
two Icons in App.vue:
<v-btn icon class="grey lighten-4">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
It's recommended to use built-in class name like mx-2 to add some margin around the buttons after wrapping them by a div:
<div >
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</div>
LIVE DEMO
according to vuetify v-icon api.
we need to use left or right .
left: Applies appropriate margins to the icon inside of a button when placed to the left of another element or text.
right: Applies appropriate margins to the icon inside of a button when placed to the right of another element or text
Overflow hidden not working. It creates another scroll bar like in the image
I copied the code directly from Vuetify and tried it in code pen and the results were the same.
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#fcb69f"
dark
shrink-on-scroll
src="https://picsum.photos/1920/1080?random"
scroll-target="#scrolling-techniques-2"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>`enter code here`
</v-app-bar>
<v-sheet
id="scrolling-techniques-2"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
You need to remove the overflow-hidden class from the v-card that wraps the v-app-bar and v-sheet. (You might just remove the v-card altogether)
I would guess the vuetify docs have this so the examples work on their own site.
This is happening for two reasons-
Outer Scrollbar comes from html.
bcz your contents like- v-sheet, v-container exceed your screen height
Inner Scrollbar is for v-sheet
bcz v-sheet's max-height is 600px & It's content container's height is 1000px which overflows v-sheet's height.
There is no fixed height of v-card, it's flexible to it's content. So,
don't add overflow-hidden class to it. You should hidden in any of
html or v-sheet