ionic-team / ionic-team/ionic-framework
feat: expandable option should not snap back immediately on gesture release
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 51
描述
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### Ionic Framework Version
v6.x
### Current Behavior
[The docs for `ion-item-sliding`](https://ionicframework.com/docs/api/item-sliding#expandable-options) state the following:
> Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the `ionSwipe` event on the [item options](https://ionicframework.com/docs/api/item-options) to call a method when the item is fully swiped.
The [`ion-item-options`](https://ionicframework.com/docs/api/item-options#events) docs further state that `ionSwipe` is "emitted when the item has been fully swiped."
However, I am seeing none of this behavior, at least not as I expect.
On the other hand, the [`ion-item-option` docs](https://ionicframework.com/docs/api/item-option#expandable) states of the `expandable` attribute that, "if true, the option will expand to take up the available width and cover any other options," which seems to be subtly different, and pretty much what the actual behavior is.
---
Currently, an item will never stay expanded. After releasing the extra swipe, the expanded item _instantly_ snaps back to normal width.
Also, the `ionSwipe` event is triggered after very little extra distance has been covered; hardly "fully swiped" by any means.
### Expected Behavior
I expect the expanded option to expand to the full width of the item and stay like that.
I expect the `ionSwipe` event to only be fired once this has happened.
### Steps to Reproduce
1. Create a page with the example code in [the docs on expandable options](https://ionicframework.com/docs/api/item-sliding#expandable-options)
1. Optional: attach an `ionSwipe` listener to the `ion-item-options` and log calls.
1. Try to expand the item.
### Code Reproduction URL
_No response_
### Ionic Info
```
Ionic:
Ionic CLI : 6.16.3 (C:\Users\Darryl\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/vue 6.7.5
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v18.15.0 (C:\Users\Darryl\AppData\Local\Volta\tools\image\node\18.15.0\node.exe)
npm : 9.5.0
OS : Windows 10
```
Actually Windows 11.
### Additional Information
Relevant/potentially relevant issues:
- [#13413 - Unable to animate full swipe on ion-item-sliding](https://github.com/ionic-team/ionic-framework/issues/13413)
- [#15304 - ion-item-option will not expand in Ionic 4.0.0-beta.3](https://github.com/ionic-team/ionic-framework/issues/15304)
- [#15427 - Sliding Items: ionSwipe & exapandable not working properly](https://github.com/ionic-team/ionic-framework/issues/15427)
Video of reproduction:
https://github.com/ionic-team/ionic-framework/assets/67335139/7b458b4e-b5e8-4e2c-b9a4-28304fa1f904
贡献指南
调研方向
Start with the ion-item-sliding expandable-options documentation and the ion-item-options ionSwipe event documentation, then reproduce the behavior using the linked example and video. Done means an expandable option remains expanded after the extra swipe is released and ionSwipe fires only once the item is fully expanded.
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100