Open Larsluph opened 10 months ago
It seems your link is invalid, I got the following exception:
DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
Anyway, the only color I can set on the v-tab
element is the slider-color
which doesn't change the text color. And for the class I did that as a workaround. I detect if the tab is active and apply the color class if needed:
:class="{ 'text-accent': innerTabV === value }"
What I want is change the color of the focused tab. When not using the href attribute, the color prop does exactly that. If I want to use the href prop with that behavior, I need to use a workaround to apply the color class only if the tab is the only currently focused.
After some research I found that the following snippet controls whether to inject color classes or not. By playing with link.isLink.value
, this in fact enabled the color prop with the href attribute.
I assume this is an expected behavior given that it is present on a more generic component (namely VBtn).
we have prop selected-color or selected-class check it out
There's no such thing as selected-color
prop in the documentation. However the color
prop explicitly tells us that it should paint the selected tab to that color, which is not when using the href
attribute. The selected-class
prop may be a better workaround but that's still a bug for me.
I tried to help and everything works for me
Thanks for your help, I found a workaround for that issue.
I just wanted to report that the behavior described in the docs is not working while using the href
attribute.
The problem is this uses link.isActive
even though that only applies for :to
links: https://github.com/vuetifyjs/vuetify/blob/72f33dcd84ef3a3799ec1312a5eaa42e320b3e92/packages/vuetify/src/components/VBtn/VBtn.tsx#L128
Using the :to
prop instead of :href
does apply color as expected.
Yeah cool it's still a bug though.
Environment
Vuetify Version: 3.4.3 Vue Version: 3.3.4 Browsers: Edge 119.0.0.0 OS: Windows 10
Steps to reproduce
v-tabs
component with a color propv-tab
inside it with and without hrefExpected Behavior
Color class is injected regardless of the
href
attributeActual Behavior
Text stays white and color class isn't injected
Reproduction Link
https://play.vuetifyjs.com/#...