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
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.
Is it possible to have Vuetify's v-tooltip with a clickable link?
At this point using the default code provided by documentation
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>mdi-home</v-icon>
</template>
clickable link
</v-tooltip>
We can't click the anchor link because once we mouse out the icon, the tooltip automatically closes. Is this a limitation on Vuetify ?
You have 2 problems to solve:
Tooltip hides as soon as mouse leaves the activator (the icon). Just use close-delay prop set to (for example) 2000 (ms) ...so the tooltip wont disappear immediately but only after 2 seconds when you move mouse out of the icon...
By default, Vuetify tooltip's content is rendered with the pointer-events: none; CSS property. Which means the content do not generate any pointer events. Only thing you can do about it is to override the default style...
template
<v-tooltip bottom close-delay="2000">
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>
mdi-home
</v-icon>
</template>
clickable link
</v-tooltip>
style
.v-tooltip__content {
pointer-events: initial;
}
Demo
You can control visibility by using v-model on the tooltip.
The following is taken from vuetifys example on visibility:
<v-tooltip
v-model="show"
top
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon color="grey lighten-1">
mdi-cart
</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
And then define show in data:
show: false
https://vuetifyjs.com/en/components/tooltips/#visibility
I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.
I marked with red box on screenshot where content should be.
Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.
Make vuetify app bar items align with <v-container> body content
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
For others looking to only constrain the content of the v-app-bar, I found a good example over at https://vuetifyjs.com/en/examples/wireframes/constrained/ (as Ari pointed out in the comment for the main question):
<template>
<v-app-bar app>
<v-container class="pa-0 fill-height">
<!-- [...] -->
</v-container>
</v-app-bar>
</template>
I got mine to work and also keep the navbar background extended to the edge of the screen. You can put a container inside the app-bar but it messes with the flexbox of the items so you just have to put a v-row inside for them to align properly.
<template>
<nav class="toolbar" align="center">
<v-app-bar app>
<v-container>
<v-row align="center">
<v-app-bar-title>
<!-- Title-->
</v-app-bar-title>
<div>
<!-- Left side content -->
</div>
<v-spacer />
<div>
<!-- Right side content -->
</div>
</v-row>
</v-container>
</v-app-bar>
</nav>
</template>
<style scoped>
.v-container {
max-width: 60% !important;
}
</style>
Here, I have used vuetify to create buttons which pop up dialog box that contains buttons with different colors and I want to use buttons to change the background color of navigation and menu bar but due to my limited knowledge on vue and vuetify I am not able to change my background color. Can anyone help me???
My code is here:
<template>
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="600px" class="pa-md-4 mx-lg-auto">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Theme</v-btn>
</template>
<div class="text-center">
<v-btn v-for="(item) in colors" :color="item" dark large class="ma-2" style="width:100px;">
<span class="text-truncate" style="width:120px;">
{{item.replace(/-/g, '')}}
</span>
</v-btn>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" text #click="dialog = false">Save</v-btn>
</v-card-actions>
</div>
</v-dialog>
</v-row>
</template>
<script>
export default {
data(){
return{
colors: ["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","blue-grey","grey", "black"],
dialog: false
}
},
} </script>
To do this you actually use themes that you setup in vuetify.js and you can assign different colors to the different values for example primary: '#c3c3c3' and define different themes within your app. It comes with light and dark theme but you can also add/remove themes programmatically.
It's quite a bit of code so I will post the links on where directions can be found here.
https://vuetifyjs.com/en/customization/theme/#custom-theme-variants
And the actual usage can be found here:
https://vuetifyjs.com/en/customization/theme/#usage
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