ionic-team / ionic-team/ionic-framework

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

Abierto
#26,392 1 comentario 2 reacciones 0 asignados Ver en GitHub
package: core type: feature request
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.