Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

content: add example of event binding to ion-item-sliding

Abierto
#4,271 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
52/100
Tipo de issue
Documentación
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
angular, typescript

Línea de trabajo

Comienza en la página de documentación del uso básico de ion-item-sliding y compárala con el ejemplo enlazado de StackBlitz, especialmente con src/app/example.component.ts. Documenta un manejo funcional de los clics de Archive/Delete y los cambios de datos que demuestra, y después aclara el comportamiento de overslide y la nota sobre ionSwipe para los usuarios web.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

content
Describe Problem

https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v8/api/item-sliding#basic-usage

The basic usage does example the template part only, but it is really unclear how to make this work with the logic part (especially for beginners, when you have no idea how things work)
Some primary issues:

  1. How to bind the simple click event of the option to the function of component class
  2. How to bind the 'overslide' - i.e. when user drags the sliding item far from the starting point, so the last option will trigger automatically on slide release
Describe Preferred Solution

I've spent some time to make an example of Arhive-Delete drag with working template, so dragging/clicking Archive or delete is actually works and reflects the data:

https://stackblitz.com/edit/angular-t9fwgq5c?file=src%2Fapp%2Fexample.component.ts

I may not be perfect because I also don't know the right approach for good overslide

Describe Alternatives

Take a look at angular material documentation for MatTable (or just look for other components) as an example:
https://material.angular.dev/components/table/examples

It has first example as basic usage, and more use cases for every matter you can think of.

Additional Information

There is a subtle note on ionSwipe https://ionic-docs-o31kiyk8l-ionic1.vercel.app/docs/v8/api/item-sliding#expandable-options, but ionSwipe does not work for me (or at least on PC Web version which I develop and test on)

And I usually check the code, skipping the reading part (I don't think I am the only person who skips text)

So trivial task like 'copy-paste' of a working example turns into pain in the ass, requiring to spend time researching...

Lenguaje dominante
MDX
Estrellas
621
Forks
3.2k
Merge medio
1 d 10 h
PR fusionados (30 d)
65

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de ionic-team/ionic-docs

Todos los issues de ionic-team/ionic-docs

Issues similares

Más issues de Documentation

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.