Is there anyway that we can fix the v-tabs? So far I tried using inside v-tab fixed-tabs but that is not working and it would really be great if anyone could help me with it.
<v-card width="40%" class="mb-2">
<v-toolbar flat>
<font-awesome-icon #click="cancel" :icon="['far', 'arrow-left']"></font-awesome-icon>
<v-toolbar-title class="ml-2">Show Summary</v-toolbar-title>
<v-spacer />
<bn-toolbar-btn type="text" label="Cancel" icon="times" color="secondary" #click="cancel"></bn-toolbar-btn>
<bn-toolbar-btn
type="outlined"
right
label="Save"
#click="submit"
></bn-toolbar-btn>
</v-toolbar>
<v-divider></v-divider>
<v-tabs v-model="activeTab" class="mb-n2" background-color="transparent">
<v-tab ref="summaryTab1" #click="activeTab = 'tab1'" href="#tab1"> Summary Tab 1</v-tab>
<v-tab ref="summaryTab2" #click="activeTab = 'tab2'" href="#tab2"> Summary Tab 2 </v-tab>
</v-tabs>
<v-card-text>
<v-tabs-items touchless v-model="activeTab" style="background-color: transparent;">
<v-tab-item key="tab1" value="tab1">
...
</v-tab-item>
<v-tab-item key="tab2 value="tab2">...
</v-tab-item>
</v-tabs-items>
</v-card-text>
</v-card>
I tried using CSS as mentioned below. I created a class called activeTabs and passed it in v-tabs.
.activeTabs {
position: sticky;
top: 0;
z-index: 999;
}
Related
Have an interesting case where when I hover over a v-list-item in my application, all the items in the v-list's background are changing to a different shade. It is a global application issue as it happens in all areas of my application.
I've inspected other v-list items that are behaving as expected and I don't see any styles that are missing.
Ideally, I'd like my v-list to behave as expected and shade only the one v-list item as it normally does but just do not know where to begin my search.
Any help would be appreciated.
<template>
<v-card elevation="0">
<v-card-text>
<v-row>
<v-col cols="12" class="d-flex gap align-center my-0 py-0">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" icon>
<v-icon>
{{ mdiDotsVertical }}
</v-icon>
</v-btn>
</template>
<v-list class="py-0 my-0">
<v-list-item #click="showAdvancedEditDialog = true">
<v-icon class="mr-2" color="primary">
{{ mdiPencil }}
</v-icon>
<div color="primary" class="overflowText">
Advanced
</div>
</v-list-item>
<v-list-item #click="showHtmlEditDialog = true">
<v-icon class="mr-2" color="primary">
{{ mdiCodeTags }}
</v-icon>
<div color="primary" class="overflowText">
HTML Edit
</div>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<style>
.overflowText {
font-size: 14px;
font-family: Roboto;
text-transform: uppercase;
font-weight: 500;
color: #f2545b;
}
</style>
this is the first time i post here. I have tried to do this for 2 days but it has been very difficult for me. I am using Vuetify and v-tabs component to show some stuff like this:
EXAMPLE
As you can see the background's card is black and i want to change it to transparent so the background html which is a linear gradient between blue/purple/black shows...
I have tried adding background-color: transparent to v-tab-item just like i did above in the v-tab "Material Clase/Material Complementario" but i don't know why it isn't applied to the v-tab-item below
This is my code:
<template>
<v-app style="background-color: rgba(30, 30, 30, 0.3);">
<v-tabs fixed-tabs background-color="transparent" color="green" slider-color="purple">
<v-tab>Material Clases</v-tab>
<v-tab-item >
<div class="mb-5 p-3">
<h3 class="mb-3">Guias de clases</h3>
<div class="row">
<div
v-for="(item, i) in items"
:key="i"
class="col-sm-12 col-md-6 col-lg-4"
>
<v-card
class="mx-auto background-tr borde-claro"
max-width="1000"
elevation="15"
outlined
>
<v-list-item three-line >
<v-list-item-content>
<div class="text-overline mb-4 tx-white">
{{ item.title }}
</div>
<v-list-item-title class="text-h5 mb-1 tx-white">
Clase: {{ item.clase }}
</v-list-item-title>
<v-list-item-subtitle class="tx-white">
Descripcion: {{ item.descripcion }}
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="50"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn class="tx-white borde-claro centrar" outlined rounded text >
Descargar
</v-btn>
</v-card-actions>
</v-card>
</div>
</div>
</div>
</v-tab-item>
</v-app>
</template>
As you can see i give to v-tabs the background-color to transparent and it works because it shows the background from the root (linear gradient colors) but if i give a background-color transparent to v-tab-item it doesn't work because i keep seeing the BLACK background like the screenshot i uploaded...
Thanks in advance !!
in vuetify you can't change the v-tab-item background-color because its possible to change it in v-tab-items element. This is what I did:
<v-tabs v-model="userProfileTabs" :show-arrows="false" color="#E30E4F" background-color="transparent" dark>
<v-tab to="#tabs-1"><b>TAB 1</b></v-tab>
<v-tab to="#tabs-2"><b>TAB 2</b></v-tab>
</v-tabs>
<v-tabs-items v-model="userProfileTabs" id="custom-tab-items">
<v-tab-item value="tabs-1">
</v-tab-item>
<v-tab-item value="tabs-2">
</v-tab-item>
</v-tabs-items>
I assigned and id value "custom-tab-items" to the element. Then, I customize the background color with css:
<style>
#custom-tab-items {
background-color: transparent !important;
}
</style>
use this style for dark and light theme to change all style of v-tabs:
.theme--dark.v-tabs-items {
background-color: transparent !important;
}
.theme--light.v-tabs-items {
background-color: transparent !important;
}
I have the next carousel made with vuetify and I need to move both arrows up, in order to do that I need to have a top:0 in both v-window__next and v-window__prev class but I don't know how to give the property to the component
This is a piece of the code
<v-carousel
hide-delimiters
height="100%"
>
<v-carousel-item
v-for="(item,i) in yearsMonthsUsed"
:key="i"
>
<v-row
class="ma-0"
align="center"
justify="center"
>
<v-col
cols="12"
sm="12"
align="center"
justify="center"
>
<div class="text-h6">
{{ item.annio }}
</div>
</v-col>
<v-col
cols="12"
sm="1"
v-for="mes in meses"
:key="mes.mes"
>
<v-btn
fab
depressed
x-small
:color="pickColor(item.annio,mes.cod)"
:class="{'disable-events': true}"
>
<v-icon>
{{ mdiCalendar }}
</v-icon>
</v-btn>
{{ mes.mes.substr(0, 3) }}
</v-col>
</v-row>
</v-carousel-item>
</v-carousel>
I tried adding Slots inside v-carousel like this
<template v-slot:next="{ on, attrs }" :class="myClas" />
<style lang="scss" scoped>
.myClas {
top: 0;
}
</style>
but it didn't work
You can assign a class to v-carousel and set the style of the arrows from there.
<v-carousel class="myCarousel"><!-- content --></v-carousel>
<style>
.myCarousel .v-window__prev, .myCarousel .v-window__next {
top: 0;
}
</style>
You can enter like this onto or into style.scss.
.v-window__prev{
position: absolute;
left:-95px;
top: 0px;
}
My toolbar and sidenav sit on top of my container obstructing view of the contents.
I can easily put a top margin on the container to rectify the issue with the toolbar but because the sidenav retracts when screen width is reduced trying to do the same with the sidenav results in display issues.
App.vue
<template>
<v-app>
<Navs/>
<div class="div" style="margin-top: 64px;">
<router-view/>
</div>
<Footer/>
</v-app>
</template>
Navs.vue
<template>
<div class="content">
<!-- Sidenav draw -->
<v-navigation-drawer
class = "NavDark"
persistent
:mini-variant="true"
:clipped="clipped"
v-model="drawer"
enable-resize-watcher
mobile-break-point="1000"
app
>
<v-layout align-center justify-space-between fill-height column>
<v-layout align-center justify-start fill-height column>
<!-- Logo square -->
<div style = "height: 64px; width: 82px; position: absolute; z-index: -1;">
<Granim/>
</div>
<div style = "height: 64px;">
<v-container pa-0 bg fill-height grid-list-md text-xs-center>
<v-layout row wrap align-center>
<v-flex pa-0>
<v-list-tile-avatar>
<img src="#/assets/layout/sidebar/whitelogo.png" class="logo">
</v-list-tile-avatar>
</v-flex>
</v-layout>
</v-container>
</div>
<!-- </v-toolbar> -->
<!-- Items at the top of the sidenav -->
<v-list dark>
<v-list-tile
v-for="item in topMenuItems"
:key="item.title"
:to="item.path"
style="padding: 10px, 0px, 10px , 0px"
>
<v-tooltip right>
<v-list-tile-action
slot="activator"
>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>{{ item.title }}</v-list-tile-content>
</v-tooltip>
</v-list-tile>
</v-list>
</v-layout>
<v-list dark>
<!-- </v-layout> -->
<v-layout align-center justify-end column fill-height>
<v-menu
v-model="menu"
:close-on-content-click="false"
:nudge-width="200"
offset-x
>
<v-btn
slot="activator"
dark
icon
>
<v-icon>person</v-icon>
</v-btn>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ user.email }}</v-list-tile-title>
<v-list-tile-sub-title>{{ user.token }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click="menu = false">Cancel</v-btn>
<v-btn color="primary" flat #click="menu = false">Settings</v-btn>
<v-btn color="error" flat #click="userSignOut">Logout</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</v-layout>
</v-list>
</v-layout>
</v-navigation-drawer>
<v-toolbar
app
class ="elevation-0"
color="#eee"
:clipped-left="clipped"
>
<v-toolbar-side-icon
class="hidden-md-and-up"
#click="drawer = !drawer">
</v-toolbar-side-icon>
<v-toolbar-title v-text="title" class="toolbar-text"></v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-title v-if="user" v-text="user.email" class="toolbar-text"></v-toolbar-title>
</v-toolbar>
</div>
</template>
<style>
.NavDark {
height: 100vh;
box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
</style>
Ideally I'm trying to find a solution in which the <router-view/> will not overlap with <Navs/> and fill all available space on the screen not taken by the toolbar and sidenav.
Resolved by using v-content
<template>
<v-app>
<Navs/>
<v-content class="light">
<router-view/>
</v-content>
<Footer/>
</v-app>
</template>
I tried to implement tabs to my component. Tabs can't be displayed. I took the same example from https://vuetifyjs.com/en/components/tabs TypeError: this.$parent.addTab is not a function error is logged on console. I upgraded the vuetify version but it isn't working. What could be the problem? Component content is below.
<template><div>
<v-tabs v-model="active"
color="cyan"
dark
slider-color="yellow">
<v-tab v-for="n in 3"
:key="n"
ripple>
Item {{ n }}
</v-tab>
<v-tab-item v-for="n in 3"
:key="n">
<v-card flat>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
<div class="text-xs-center mt-3">
<v-btn #click="next">next tab</v-btn>
</div>
</div></template>
<script>
export default {
data() {
return {
active: null,
text: 'Lorem ipsum'
}
},
methods: {
next() {
const active = parseInt(this.active)
this.active = (active < 2 ? active + 1 : 0)
}
}
}</script>
My app.vue:
<v-app id="inspire">
<v-navigation-drawer persistent clipped enable-resize-watcher v-model="drawer" app>
<MenuComponent></MenuComponent>
</v-navigation-drawer>
<v-toolbar color="cyan darken-3" dark fixed clipped-left app>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>...</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn #click="logout" icon>
<v-icon>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
<main>
<v-content>
<vue-snotify></vue-snotify>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</main>
<v-footer color="cyan darken-3" app fixed>
<span class="white--text"> © 2018 </span>
</v-footer>
</v-app>
I found the problem. I had imported vue-nav-tabs. I removed it and now it is working.
Took me a moment to realise that you don't need href e.g
<v-tabs
v-model="tabs"
background-color="deep-purple accent-4"
centered
dark
icons-and-text
>
<v-tabs-slider></v-tabs-slider>
<v-tab href="#tab-2">
Favorites
<v-icon>mdi-heart</v-icon>
</v-tab>
<v-tab href="#tab-3">
Nearby
<v-icon>mdi-account-box</v-icon>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs">
<v-tab-item
>
<v-card flat>
<v-card-text><p>hey</p></v-card-text>
</v-card>
</v-tab-item>
<v-tab-item
>
<v-card flat>
<v-card-text> <p>hey</p></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
Removing href="#tab-2" and href="#tab-3" worked because I have not set the value if you don't necessarily need to set the value in v-tab-item.
<v-tab-item
v-for="i in 3"
:key="i"
:value="'tab-' + i"
>