Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug Report][3.5.16] v-carousel-item gradient not working #19631

Open
thany opened this issue Apr 17, 2024 · 2 comments · May be fixed by #19708
Open

[Bug Report][3.5.16] v-carousel-item gradient not working #19631

thany opened this issue Apr 17, 2024 · 2 comments · May be fixed by #19708
Labels
C: VCarousel VCarousel C: VImg VImg T: documentation

Comments

@thany
Copy link

thany commented Apr 17, 2024

Environment

Vuetify Version: 3.5.16
Vue Version: 3.4.23
Browsers: Firefox 124.0
OS: Windows 10

Steps to reproduce

  1. Open the repro link
  2. Notice how only the first carousel item has a valid CSS gradient.
  3. Inspect the document
  4. Verify how the first item has an additional v-img__gradient element, which doesn't do anything useful.

Expected Behavior

That v-img__gradient item should probably contain the gradient specified in the gradient prop.

Actual Behavior

The gradient in the gradient prop has no effect.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

The documentation is ambiguous on what exactly the gradient prop is supposed to do, so we are left with nothing but the assumption that it is meant as a gradient overlay over the background image, and underneath the content, that is set using src.
@SonTT19
Copy link
Contributor

SonTT19 commented Apr 22, 2024

gradient only supports linear-gradient syntax
for example: gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)"
or with you reproduction link: gradient="to bottom, white, black"

@thany
Copy link
Author

thany commented Apr 22, 2024 •
edited

Oh I see. Can this be added to the documentation please?

And maybe generate a warning when in development mode. Otherwise it's like a silent fail, which is difficult to debug.

@SonTT19 SonTT19 linked a pull request Apr 27, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C: VCarousel VCarousel C: VImg VImg T: documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs(VImg): example for gradient props vuetifyjs/vuetify
3 participants
@thany @KaelWD @SonTT19