¿Cómo puedo implementar un deslizamiento suave entre pestañas en angular?
Estoy usando mat-tabs (pestañas de material angular) y quiero agregar soporte para deslizar pestañas para dispositivos táctiles (como WhatsApp o Telegram para dispositivos móviles).
Los recursos que encontré proporcionan el elemento principal de las pestañas (mat-tab-group) con una entrada de índice selectedIndex y lo actualizan en función de los eventos deslizar a la swipeleft y swiperight a la derecha.
Mi problema con esta solución es que la transición es instantánea y no fluida, e incluso si agrego alguna animación personalizada, el deslizamiento no se puede cancelar una vez que se inicia (en las aplicaciones que mencioné anteriormente sí se puede).
Entonces, ¿hay alguna manera de lograr esto con mat-tabs o hay una biblioteca de componentes diferente que pueda usar para esto?
Puede agregar la directiva animationDuration a mat-tab-group y animará la transición entre pestañas:
<mat-tab-group animationDuration="1000ms"> <mat-tab label="First">Content 1</mat-tab> <mat-tab label="Second">Content 2</mat-tab> <mat-tab label="Third">Content 3</mat-tab> </mat-tab-group>