Taiga UI 5.0 is out!

Swipe CDK

GitHub

On this page

tuiSwipe directive allows detecting swipes on mobile devices.

You can configure the directive with TUI_SWIPE_OPTIONS token.
Allowed options:

timeout:
max time between touchstart and touchend
threshold :
min distance between touchstart and touchend.

Basic

Swiped default 
    
      
    

      
      
    

  
    
      <div
    [class]="`box tui-text_body-l ${swiped}`"
    (tuiSwipe)="onSwipe($event)"
>
    Swiped {{ swiped }}
</div>

    

      
      
    

  
    
      .box {
    display: flex;
    inline-size: 12.5rem;
    block-size: 12.5rem;
    background-color: var(--tui-background-accent-1);
    transition: all 0.5s ease-out;
    justify-content: center;
    align-items: center;
    touch-action: none;

    &.left {
        background-color: var(--tui-chart-categorical-12);
    }

    &.right {
        background-color: var(--tui-chart-categorical-03);
    }

    &.top {
        background-color: var(--tui-chart-categorical-08);
    }

    &.bottom {
        background-color: var(--tui-chart-categorical-10);
    }
}

With sidebar

Swipe left to open 
    
      
    

      
      
    

  
    
      <div
    class="container tui-text_body-l"
    (tuiSwipe)="onSwipe($event)"
>
    Swipe left to open

    <tui-drawer
        *tuiPopup="open()"
        direction="end"
        class="drawer tui-text_body-l"
        [overlay]="true"
        (click.self)="open.set(false)"
        (tuiSwipe)="onSwipe($event)"
    >
        Swipe right to close
    </tui-drawer>
</div>

    

      
      
    

  
    
      .container {
    display: flex;
    justify-content: center;
    align-items: center;
    inline-size: 12.5rem;
    block-size: 12.5rem;
}

.drawer {
    inline-size: 17.25rem;
}
GitHub StackBlitz