You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I would like to be able to update text based on the rating that is currently being hovered over. This text will describe what the rating level represents. Here is an example of what I mean:
Describe the solution you'd like
I would like to see an event emitted from the component when the user either hovers over a new rating value for an editable rating, or stops hovering over a rating. The event should contain a value representing the value currently hovered (or null when the user stops hovering over it).
An example of one possible implementation of this feature (this would also fire an event when the component initializes which may or may not be desirable):
// src/components/rating/rating.tsexporttypeSlRatingPreviewEvent=CustomEvent<{hoverValue: number|null}>;
...
// in the SlRating classprotectedoverridewillUpdate(changedProperties: PropertyValues) : void{
super.willUpdate(changedProperties);if(changedProperties.has('hoverValue')||changedProperties.has('isHovering')){this.emit('sl-preview',{detail: {hoverValue: this.isHovering ? this.hoverValue : null}});}}
Describe alternatives you've considered
I am currently able to implement my desired behaviour with the Shoelace component; however, it requires accessing the component's internal state, and attaching to a number of event handlers. I would like a cleaner solution that doesn't rely on the component's implementation details.
Good idea, since this is really hard to get otherwise. I added an sl-hover event in 0c2f43b that gives you this ability.
I didn't like the event name at first, but it makes a lot of sense considering that it does emit on hover. It also emits when you touch and drag, but one could argue that's close enough to hovering.
It's also worth noting that this works with the precision property so, if you allow half stars, you'll get the value on every .5 instead of every 1.
The event has a payload with two properties. The phase property indicates the hover phase (when it starts, when it moves to a new value, and when it ends). The value property reflects the hovered value.
What issue are you having?
I would like to be able to update text based on the rating that is currently being hovered over. This text will describe what the rating level represents. Here is an example of what I mean:
![rating-preview-example](https://user-images.githubusercontent.com/19809243/211651083-93aa97d2-d34d-4b51-a1b9-6bb33bae1edc.gif)
Describe the solution you'd like
I would like to see an event emitted from the component when the user either hovers over a new rating value for an editable rating, or stops hovering over a rating. The event should contain a value representing the value currently hovered (or
null
when the user stops hovering over it).An example of one possible implementation of this feature (this would also fire an event when the component initializes which may or may not be desirable):
Describe alternatives you've considered
I am currently able to implement my desired behaviour with the Shoelace component; however, it requires accessing the component's internal state, and attaching to a number of event handlers. I would like a cleaner solution that doesn't rely on the component's implementation details.
My current workaround:
The text was updated successfully, but these errors were encountered: