feat: ion-item-sliding open start and end options at the same time

[Enteee]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request Open ion-item-sliding on start and end using open("both").

Use case I would like to use this to implement a counter which can be changed by either clicking on the corresponding "+" / "-" option on either end or by swiping over the counter in the corresponding direction. Please see image below.

Describe Preferred Solution I would like to open a ion-item-sliding on both sides using some programmatic API. This would help me implement a button which can either be clicked or using a slide motion to activate.

Describe Alternatives Currently I am using a button on both sides of the slider to mimic the same behavior (see screenshot). This comes with the following downsides which I have to fix with custom JavaScript:

• when sliding to one side the other side's button is not hidden
• the slider can still stay open which results in a button a bit wider on one side (ugly)

-> Maybe some very dark CSS wizardry or using internal functions could be used to achieve the same.

Related Code

Additional Context

[liamdebeasi]

Thanks for the issue. Can you please describe your use case in more detail? This particular behavior is not something that is typically found in native applications. Additionally, I think the swipe gesture may get confusing since swiping at one end typically closes the other end of options (even in native applications).

[Enteee]

@liamdebeasi added use case to the description.

[liamdebeasi]

Thanks for the use case. I discussed this with the team, and we decided this is not a feature we are looking to add at this time. The main reason is the requested behavior is not something that appears in native iOS and MD applications. When building our components, we try to follow the iOS and MD specifications as closely as possible.

Additionally, this is something that could be done on a per-application basis. I created a CodePen with an example: https://codepen.io/liamdebeasi/pen/dyYEQpo.

If you want the ion-label to appear over the buttons when dragging, there is a PR that we just merged that should fix this: https://github.com/ionic-team/ionic/pull/21282. It will be available in the next release of Ionic Framework. Once that ships, you can set overflow: visible on the ion-item. (You might still need to adjust the z-index of the ion-label though.)

edit: I did not make the buttons in the example expand as you drag, but you could pretty easily add that functionality to the onMove function.

Hope this helps!

[Enteee]

OK thx @liamdebeasi

[Enteee]

Just in case somebody is interested, I have now a first draft of a component which does this.

• code
• live preview

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.