ionic-team / ionic-team/ionic-framework

feat(item-sliding): add stacked style for ios when expanding or collapsing

Đang mở
#26,392 1 bình luận 2 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### 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

- [ ] v4.x
- [ ] v5.x
- [X] v6.x
- [ ] Nightly

### Current Behavior

`ion-item-sliding` does not match IOS specifications:

- `ion-item-option` Elements are side by side instead of on top of each other (stacked)
- if expanded, `ion-item-option` won't stretch on slide before expandable `ion-item-option` will trigger (rubberband effect)
- there is no reverse animation if expanded state is triggered and slide is swiped back again
- sliding to expanded state and back again should trigger haptic feedback
- swiping `ion-item-sliding` doesn't feel that smooth as in native
- expanded `ion-item-option` should stretch to safe-area (e.g. aligned with `ion-title`) and content should align left instead right
- there should be a delete animation, when fully swiping the expandable `ion-item-option`. Since `expandable` does not always mean, that we want to remove the item, we need some further options like in `ion-infinite-scroll` where we can call `event.target.complete()`, which could result in triggering the delete animation.

### Expected Behavior

### `ion-item-option` should be stacked

| Reminder App | Ionic |
|--------------|-------|
| | |

### sliding `ion-item-sliding` further should create rubberband effect for `ion-item-option`

| Reminder App | Ionic |
|--------------|-------|
| | |

### sliding back `ion-item-sliding` on expanded state should show slide-back animation

| Reminder App | Ionic |
|--------------|-------|
| | |

### `ion-item-sliding` sliding to expanded state and back again should trigger haptic feedback

### `ion-item-sliding` should expand to safe area and content of `ion-item-option` has to be aligned left

| Reminder App | Ionic |
|--------------|-------|
| | |

### there should be a delete animation, when fully swiping the expandable `ion-item-option`

| Reminder App | Ionic |
|--------------|-------|
| | not implemented on ionic |

### Steps to Reproduce

Please follow described steps in table

### Code Reproduction URL

https://stackblitz.com/edit/angular-4mvdgd

### Ionic Info

see stackblitz

### Additional Information

_No response_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.