I am using Vuetify v-tabs for a list of days in a week:
<v-tabs
v-model="tab"
background-color="theme"
center-active
icons-and-text
show-arrows
grow
dark
>
<v-tabs-slider color="primary"></v-tabs-slider>
<v-tab v-for="item in week" :key="item.id">
<div>{{item.date}}</div>
<div>{{item.day}}</div>
</v-tab>
</v-tabs>
The result is currently like this:
The thing is that the arrow only appears when the tab-slider display is overloaded (when displaying on mobile) but not present while viewing on desktop.
What i would like to do is:
Make the arrows display always regardless of the screen size.
Modify the behavior of the arrow, instead of switching between the tabs items, to change the display week.
any ideas of alternatives of how this could be implemented?
Thanks.
Related
One of my views has a component, which is only shown after data has been stored in Vuex
<MyComponent v-if="dataFetched"/>
MyComponent is a pretty straight forward component. It contains several components which in turn contain buttons.
Sometimes when the view is accessed, the buttons are not rendered correctly before mouse is hovered on top of them. Sometimes none of the buttons are visible at all, sometimes one, two or three of the buttons are shown without the text. And sometimes they are rendered perfectly. The buttons do not implement mouse over events.
I cannot reproduce this locally, but it happens quite often when the application is run on server.
One of the buttons not rendered correctly is very simple:
<template>
<span>
<base-button
v-on:click="logout()"
>{{ $t("logout") }}
</base-button>
</span>
</template>
Hopefully the video makes it clear what's happening. Sorry that the dimensions of the video are not correct.
The button which is correctly drawn in the video is part of the main component. Buttons having issues are included in sub components.
There is also some text below the buttons and the text is always rendered correctly.
I am using vue-argon design system.
I'm currently trying to implement combined navigation drawers in a project.
My issue is when I try to adapt to mobile. Meaning that if I use the "normal" way of show/hide I can't keep the left navigation drawer (small and nice on mobile) and toggle the other.
Here's an example: https://jsfiddle.net/3r87152u/
<v-navigation-drawer
v-model="drawer"
disable-resize-watcher
width="100%"
>
<v-row class="fill-height" no-gutters>
<v-navigation-drawer
dark
mini-variant
mini-variant-width="56"
permanent
>
I would like to be able to, when in mobile, hide the navigation drawer of the right side and keep the other. Since the navigation drawer of the left side is inside of the right one, I'm completely lost. Is there a way of doing that? Thank you for trying to help!
I've implemented a navigation drawer in Vuetify that scrolls towards an anchor in the same page.
When I click an anchor it gets selected and this works just fine.
However now I want to update the selected item in the navigation drawer as soon as the user scroll in a different sections.
<v-navigation-drawer
app
clipped
>
<v-list shaped>
<v-list-item-group v-model="item" color="primary" selectedItem=0>
<v-list-item
v-for="section in sections"
:key="section.title"
#click="$vuetify.goTo(section.id, 0, 0)"
>
<v-list-item-icon>
<v-icon>{{ section.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="section.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
I've looked in the documentation and it looks like I can use Intersection observer (https://vuetifyjs.com/directives/intersect) for this but I don't know how to bind it to the v-list-item.
Do you have a clue on how to bind this?
Cheers
I found the solution to this problem.
V-intersect shows an element is being visited. List item has an
active-class prop and 'input-value' prop to state the item is active.
I'll try to see if I can piece these together.
I started with those 3 thoughts and was able to solve this problem with those 3: v-intersect, input-value prop of list-item, and 'color' prop of list-item. I can define an active-class if I want, but color is good enough for me.
References:
https://vuetifyjs.com/en/directives/intersect/
https://vuetifyjs.com/en/components/lists/
I used vuex to solve this easily. I'm not fond of props/events to communicate with parent/child components. So you need one state each for all v-list-items. Set the color of v-list-item to something distinctive. [2]
Now for each of the components, set up a v-intersect. Following the docs # [1], the onIntersect function will mutate the respective vuex state earlier. Note that from entries[0].isIntersecting, the isIntersecting is part of entries[0], don't change that.
Done, now when you scroll down, you should see the nav items update to color in real time.
Previous thoughts:
I wanted to write a comment, but I need 50 'points'. I'm fairly new at asking/answering questions here. I do read a lot.
Anyways, I'm in the same situation now. I'm starting to look into this. Intersect seems like the answer, but not quite at the same time. If you have found the answer, then please share with me :)
Obviously, there must be a way to do this since VueJS docs has implemented this. https://v2.vuejs.org/v2/guide/custom-directive.html. Nav on left has highlighted title/subtitle based on scroll.
V-intersect shows an element is being visited. List item has an
active-class prop and 'input-value' prop to state the item is active.
I'll try to see if I can piece these together.
I know we can cheat by using vue-scrollactive, but I don't want to do that yet.
Hey so I'm building a article curation platform and they are presented in the form of cards provided by the Vuetify library.
I'm having problem aligning them properly.
If you see the image, you can see at the last row, the second card doesn't seem to align in the centre and puts off all the alignment.
What I have done is as such
<v-container grid-list-md fluid>
<v-layout align-start row wrap pb-4 justify-start>
<v-flex :key="cards.id"pt-3 v-for="cards in searchbar">
<v-card hover class="card" #click="linkClick(cards.link)">
I am new to VueJs and I started working on my first project which requires me to have a side panel (drawer) to serve as a navigation bar and it will always be visible.
So far so good it is done and it looks exactly as I wanted it.
The problem is that each time I put a lot of links the drawer doesn’t scroll in order to see all the links I have put there.
I have tried with css but nothing happens. Does anyone have any hint on what I should do?
I just need the drawer to be scrollable when links exceed the page or when the screen it’s small.
What I did is that I enclosed my drawer in a div with a class"scrollable" and added the below css:
.scrollable{ height:100%; overflow:auto;}
I also tried this as it was the closest thing I could find to my problem
I was facing the same issue because of the 'absolute' keyword in the v-navigation-drawer. Try removing it and it might work.
<v-navigation-drawer class="blue-grey lighten-5 height-app" v-model="drawer" temporary app width="310"> </v-navigation-drawer>
Navigation drawers should be scrollable if you add the app option as per the documentation
I still had the problem once where I could not add the app option to the drawer since I had two drawers side by side.
I just added this style to my drawer and it did the trick :
calc(100% - 48px); height: 100vh;
For me, the problem was that i did not put the app attribute on th v-navigation-drawer
I just change:<v-navigation-drawer absolute temporary ></v-navigation-drawer>
For:
<v-navigation-drawer absolute temporary app ></v-navigation-drawer>
The adittion of app allow scrolling on my v-navigation-drawer
Just add app attribute to v-navigation-drawer tag
<v-navigation-drawer
temporary
app
width="280"
height="100vh"
>