I need the logo inside to be displayed exactly in the middle of the app bar. How can I achieve this result taking into consideration the other elements inside the app bar?
I tried using v-spacer after the v-app-bar-icon, but the result doesn't feel centered at all.
One example of what I am trying to achieve is the official nuxt site app bar (when the display is below md size): https://nuxtjs.org/
<v-app-bar fixed app>
<v-app-bar-nav-icon
aria-label="show-or-hide-navigation-menu"
#click.stop="drawer = !drawer"
/>
<nuxt-link aria-label="home-page" to="/">
<v-img
v-show="searchClosed"
:src="require('~/assets/images/example_Logo.svg')"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</nuxt-link>
<v-spacer v-show="searchClosed"></v-spacer>
<v-btn v-show="searchClosed" aria-label="show-user-menu" icon>
<v-icon>mdi-account-circle</v-icon>
</v-btn>
<transition name="slide-fade">
<nav-search
v-show="!searchClosed"
#search-opened="searchClosed = false"
#search-closed="searchClosed = true"
></nav-search>
</transition>
<v-btn
v-show="searchClosed"
aria-label="show-or-hide-search-input"
icon
#click="searchClosed = false"
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
There are two ways to do this-
1. Try putting the v-spacer before and after the logo image-
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-img
src="https://picsum.photos/200/300"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
</div>
</v-app>
</div>
2. Use the grid system-
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-row>
<v-col align="start">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</v-col>
<v-col align="center">
<v-img
src="https://picsum.photos/200/300"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</v-col>
<v-col align="end">
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-col>
</v-row>
</v-app-bar>
</div>
</v-app>
</div>
Related
I have a v-navigation-drawer and a dropdown menu inside it.
I'd like them both to have the same width whether the dropdown's up or down. At the moment, the dropdown is going outside the drawer when I open it. Does anyone know how to reduce a dropdown's width ?
<v-navigation-drawer
class="vnd"
height="98vh"
width="360px"
dark
right
v-model="drawerSettings"
absolute
temporary
>
<template>
<v-container fluid>
<v-select
v-model="valuesType"
:items="typeArray"
label="Relationship"
multiple
>
<template v-slot:prepend-item>
<v-list-item
ripple
#mousedown.prevent
#click="toggleType"
class="test"
>
<v-list-item-action>
<v-icon :color="valuesType.length > 0 ? 'indigo darken-4' : ''">
{{ iconType }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Select All
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
</v-select>
</v-container>
</template>
</v-navigation-drawer>
First, remove the <v-container fluid> because it's taking padding, then use prop attach with v-select> , it specifies which DOM element that this component should detach to
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
drawerSettings: true,
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
selectedItem: [],
}),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<div id="app">
<v-app id="inspire">
<v-card>
<v-navigation-drawer
class="vnd"
height="98vh"
width="360px"
dark
right
v-model="selectedItem"
absolute
temporary
>
<v-select
v-model="selectedFruits"
:items="items"
label="Favorite Fruits"
multiple
attach
>
</v-select>
</v-navigation-drawer>
</v-card>
</v-app>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I am using this code on my project, it's a text-field that when I click on it pops a dialog which shows a calendar.
This works fine, however when I insert the range prop on the v-date-picker, the calendar doesn't show up anymore, only the dialog background. It is working fine on this codepen you can see below:
See the Pen
Vuetify Example Pen by Simão (#izzyDL)
on CodePen.
<div id="app">
<v-app id="inspire">
<v-row>
<v-col
cols="11"
sm="5"
>
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="date"
scrollable
range
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
#click="modal = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
#click="$refs.dialog.save(date)"
>
OK
</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</v-app>
</div>
Any ideas on what might be causing this issue ?
The snippet below is using your code and the picker shows up just fine. Am I missing something in your question?
One thing I should point out is that when using range prop date picker expects its model to be an array of length 2 or empty. In your code, the date prop is a string. It doesn't affect the calendar rendering though.
Screenshot
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: ['2019-09-10', '2019-09-20'],
menu: false,
modal: false,
}),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<v-row>
<v-col cols="11" sm="5">
<v-dialog ref="dialog" v-model="modal" :return-value.sync="date" persistent width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" scrollable range>
<v-spacer></v-spacer>
<v-btn text color="primary" #click="modal = false">
Cancel
</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">
OK
</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I have a button which should be displayed if a value is bigger than 2, so I wrote a "v-if" condition. Everything works fine, but when I add a tooltip, the button doesn't reappear when the "v-if" conditionis fulfilled.
Here is the example:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn #click="val++">+</v-btn>
<v-btn #click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="green" v-if="val > 2" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2" v-on="on">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>
Could anybody give me a clue on what happens here?
Thanks in advance
You should put the v-if directive on the v-tooltip element instead of the button, or use v-show on the button instead of v-if.
The reason that the button doesn't appear is that the button is in a slot of the tooltip. Using v-if, the button is not rendered, so the slot is blank, forcing the tooltip component to use the default slot contents. You can't re-fill an empty slot, at least in Vuetify. v-show works because the button is still rendered to the DOM, it is only hidden.
USING V-IF ON THE TOOLTIP:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn #click="val++">+</v-btn>
<v-btn #click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom v-if="val > 2">
<template v-slot:activator="{ on }">
<v-btn color="green" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>
USING V-SHOW ON THE BUTTON:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
val: 5
}
}
})
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-center">
<v-row
class="flex"
justify="space-between"
>
<v-col cols="12">
<v-btn #click="val++">+</v-btn>
<v-btn #click="val--">-</v-btn>
</v-col>
<v-col cols="12">
{{ val }}
</v-col>
<v-col cols="12" class="mt-2">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="green" v-show="val > 2" v-on="on">
> 2
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</v-col>
<v-col cols="12" class="mt-12">
<v-btn color="blue" v-if="val > 2">
> 2
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
</body>
</html>
I continue to deal with Vuetify.
Tell me how you can apply a tooltip only for append-icon in a v-text-field?
Now tooltip does not work for icons at all!
codepen
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-text-field
label="Regular"
v-on="on"
append-icon="event"
style="max-width: 200px"
/>
</template>
<span>Tooltip</span>
</v-tooltip>
No way to solve this (By some API option) - The component renders the icon outside of the text-area (Open GitHub issue/feature if you want).
Anyway if you use a simple <v-icon> component it works fine.
Extra details here:
Wrapping v-icon with v-tooltip inside text-field?
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
url: 'https://stackoverflow.com/'
}
})
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field label="Hello world">
<v-tooltip slot="append">
<template v-slot:activator="{ on }">
<v-icon v-on="on" color="primary" dark>
mdi-calendar
</v-icon>
</template>
<span>My Tooltip</span>
</v-tooltip>
</v-text-field>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I am using vuetify's component tooltip. But I am not sure how to implement it right next to the label.
This is how I have it right now.
<v-tooltip right>
<v-icon slot="activator" dark color="primary">info</v-icon>
<span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field label="Information" v-model="dummy.info"> </v-text-field>
I want to tooltip icon right next to the Information Label. Please suggest me how can I achieve that.
Update 1
<v-text-field label="Information" v-model="dummy.info">
<template v-slot:append>
<v-icon slot="activator" dark color="primary">info</v-icon>
<span>Please enter the user information correctly.</span>
</template>
</v-text-field>
Update 2
<v-text-field
v-model="dummy.info"
label='Information'
append-icon="info"
suffix="Please enter the user information correctly."
/>
You can append things to a v-text-field using the append slot.
<v-text-field label="Prepend" prepend-icon="mdi-map-marker" />
https://vuetifyjs.com/en/components/text-fields#api
<v-text-field>
<template v-slot:append>
<v-icon slot="activator" dark color="primary">info</v-icon>
<span>Please enter the user information correctly.</span>
</template>
</v-text-field>
For Vuetify 1.xx
<v-text-field
v-model="dummy.info"
label="Information"
append-icon="info"
suffix="Please enter the user information correctly."
/>
https://v1.vuetifyjs.com/en/components/text-fields#example-prefixes-and-suffixes
https://v1.vuetifyjs.com/en/components/text-fields#example-icon
This snippet should work for you...
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&ext=.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-text-field>
<template v-slot:label>
What about <strong>icon</strong> here?
<v-tooltip bottom>
<template #activator="{ on, attrs }">
<v-icon class="mb-2" small v-on="on" v-bind="attrs" style="vertical-align: middle">
mdi-information
</v-icon>
</template> And here is the information...
</v-tooltip>
</template>
</v-text-field>
</v-container>
</v-main>
</v-app>
</div>