feat: sticky sliding options

aeharding commented 1 year ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Allow IonItemSliding options to be sticky in the user's viewport.

Describe the Use Case

When the IonItem of an IonItemSliding is very tall, for example in a photo-oriented feed, the user may be sliding with only part of the IonItem visible on the screen.

Because the IonItemSliding options are centered within the item, they may be not visible during the sliding action.

In this circumstance, it would be nice if the ion sliding options were capable of being "sticky" in the user's viewport.

Describe Preferred Solution

The simplest solution from a library standpoint would be adding the ability to target .horizontal-wrapper with a :part, which would allow the Ionic user to add the following CSS to enable sticky options:

ion-item-option::part(wrapper) {
  position: sticky;
  top: 0;
  bottom: 0;
}

(the following CSS is also needed to ensure sticky works:)

ion-item-sliding {
  overflow: initial;
}

Describe Alternatives

I tried to get position:sticky working without targeting .horizontal-wrapper but failed.
Support sticky ion options by default or via a flag
Refactoring the internal shadow DOM of IonItemSliding so that position:sticky will work when set on the user-provided element inside IonItemOption.

Related Code

Open https://stackblitz.com/edit/93nbfs-fjtzqm
Try to set position: sticky; top: 0; bottom: 0; on .my-custom-slider
Observe it doesn't work
Try to set position: sticky; top: 0; bottom: 0; on .horizontal-wrapper in the shadow DOM of IonItemSliding. Observe it works.

Additional Information

Here's an example demonstrating the problem with not having sticky IonItemOptions:

https://github.com/ionic-team/ionic-framework/assets/2166114/82cd0b52-e361-47ac-a4d1-e57b2476ad35

And here's an example of position:sticky working after I manually set styles on .horizontal-wrapper in the browser inspector:

https://github.com/ionic-team/ionic-framework/assets/2166114/47db6d2a-9557-421b-aac6-85fa244c9188

averyjohnston commented 1 year ago

Thank you for the request! We're going to investigate this internally, and will follow up when we have more to share.

liamdebeasi commented 1 year ago

@aeharding Would something like this work as an alternative? https://codepen.io/liamdebeasi/pen/YzdYWgK

This works by using the "top" slot in ion-item-option and then creating a wrapper that takes up the entire height of the item. The content within the wrapper has the requested sticky behavior. (I updated the 2nd item so you can see how it would work with icons)

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!

ionic-team / ionic-framework