Hello I was wondering if it is possible to change the colour of a MD Icon using Tailwind.
I know I can change the style but I would just like to apply the tailwind class, it working using the background but its the undesired result.
<v-icon v-if="link.links" class="text-yellow-400">
mdi-menu-down
</v-icon>
Kind Regards
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.
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!
In my vue.js/vuetify app the gap between App bar and following contents is too much.
How can I minimize it?
Below is the screenshot
all help highly appreciated. Thanks
At the start of the SET UP Time table DIV OR V-layout or the tag from which it starts add this example code (class="ma-0 pa-0")
<v-layout>
<v-container class="ma-0 pa-0">
</v-container>
</v-layout>
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.