Open gederer opened 9 months ago
Ok after doing a decent bit of research it looks like we do need some sort event such as qresize
or onResize$
, the daisy UI implementation does not allow us to do more complex carousels.
I think it's a pretty common use case to want to track an element's dimensions. Currently, we cannot do that without a resize observer, which will not execute unless we do it on page load.
Such as useOnWindow('DOMContentLoaded')
.
If we wanted to keep with the principles of delaying the execution of code as much as possible, I think this would be a needed event in the framework
https://discord.com/channels/842438759945601056/1041016608946135161/1182393506019418193
Closed a duplicate issue, but I think it has further context
Is your feature request related to a problem? Yes, let's say we have a carousel component. That carousel component has three elements.
Parent Child Grandchild We want the grandchild to always have the element's width of our parent. In the case of our carousel component, we want the slide widths to change based on the parent's size.
Unfortunately, the current solution is to use a resize observer, and we need some sort of javascript on page load.
Describe the solution you'd like A qresize event that allows us to see when a containers width is resized.
This is intuitive and similar to container queries in css, but we can programmatically change UI based on the container size.
Describe alternatives you've considered Vanilla CSS alternatives
Trying to create the html element as a store to see track its nested properties
Additional context No response
I ❤️ this idea. Here are my thoughts.
I think we should create a custom event similar to qvisible
. Let's say qresize
. If the event is present in the output, then the QwikLoader should set up ResizeObserver
and fire an event on resize. The nice thing is that this would work great with syncQRL so that we would not even have to bring the framework in.
Implementation detail:
qwikeloader
to understand how to set up ResizeObserver
qwikloader
that new qresize
event has occurred. NOTE: We could also use this code to make the qvisible
behavior less surprising.
Would anyone be up for this? Happy to provide support along the way.
@mhevery sure! Not as acquainted with core as I'd like to be, but I think this is an important piece for anyone wanting to do more complex UI.
Do we need to try out $sync
first?
Is your feature request related to a problem?
Often, components can be made responsive using pure CSS with media queries and container queries; however, some components have to manage their own display when dynamically resized. Currently, this is handled by creating a
ResizeObserver
by hand. It would be convenient if the framework provided a simple API for setting up resize behavior, and created theResizeObserver
under the hood.Describe the solution you'd like
This feature could be implemented as an
onResize$
attribute that could be added to any Qwik component.Example:
Describe alternatives you've considered
Setting up a
ResizeObserver
by hand.Additional context
No response