Taiga UI 5.0 is out!

SwipeActions ADDON-MOBILE

GitHub

On this page

Component should be used on mobile devices only.

Basic

$10 000
Dollar account
€23 000
Goal
€5 000
Vacations
    
      
    

      
      
    

  
    
      <tui-swipe-actions>
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.dollar-sign"
        ></div>
        <div tuiTitle>
            <strong>{{ 10000 | tuiAmount: 'USD' }}</strong>
            <div tuiSubtitle>Dollar account</div>
        </div>
    </div>

    <button
        iconStart="@tui.eye"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Show
    </button>
    <button
        iconStart="@tui.pencil-line"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Edit
    </button>
    <button
        appearance="secondary"
        iconStart="@tui.share"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Share
    </button>
</tui-swipe-actions>

<tui-swipe-actions>
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.gift"
        ></div>
        <div tuiTitle>
            <strong>{{ 23000 | tuiAmount: 'EUR' }}</strong>
            <div tuiSubtitle>Goal</div>
        </div>
    </div>

    <button
        iconStart="@tui.eye"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Show
    </button>
</tui-swipe-actions>

<tui-swipe-actions
    [style.--tui-action-gap]="16"
    [style.--tui-item-size]="32"
>
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.briefcase"
        ></div>
        <div tuiTitle>
            <strong>{{ 5000 | tuiAmount: 'EUR' }}</strong>
            <div tuiSubtitle>Vacations</div>
        </div>
    </div>

    <button
        iconStart="@tui.eye"
        size="s"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Show
    </button>
    <button
        iconStart="@tui.pencil-line"
        size="s"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Edit
    </button>
    <button
        appearance="secondary"
        iconStart="@tui.share"
        size="s"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Share
    </button>
    <button
        appearance="secondary-destructive"
        iconStart="@tui.trash"
        size="s"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Delete
    </button>
</tui-swipe-actions>

    

      
      
    

  
    
      :host {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    gap: 1rem;
}

[tuiCardLarge] {
    margin: 3rem 1.5rem;
}

tui-swipe-actions {
    margin: -3rem -1.5rem;
}

button[tuiSwipeAction] {
    border-radius: 100%;
}

Custom

Alex Inkin

    
      
    

      
      
    

  
    
      <tui-swipe-actions [style.--tui-actions-padding.rem]="1">
    <div
        tuiSurface
        class="blur"
    >
        <div tuiAvatar="@tui.user">
            <img
                alt=""
                src="assets/images/avatar.jpg"
            />
        </div>
        <h3 tuiTitle="m">Alex Inkin</h3>
    </div>

    <input
        tuiSwipeAction
        tuiSwitch
        type="checkbox"
        [(ngModel)]="checkbox"
    />
    <button
        appearance="secondary-destructive"
        iconStart="@tui.trash"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
        [style.borderRadius.%]="100"
    >
        Trash
    </button>
</tui-swipe-actions>

    

      
      
    

  
    
      .blur {
    z-index: 1;
    display: flex;
    background-image: url('/assets/images/restaurant-2.jpg');
    border-radius: 1rem;
    padding: 1.25rem;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    &::before {
        backdrop-filter: blur(1rem);
    }
}

Autoclose

Automatically close a component when a pointerdown event occurs outside of it
$10 000
Dollar account
€23 000
Goal
    
      
    

      
      
    

  
    
      <tui-swipe-actions [autoClose]="true">
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.dollar-sign"
        ></div>
        <div tuiTitle>
            <strong>{{ 10000 | tuiAmount: 'USD' }}</strong>
            <div tuiSubtitle>Dollar account</div>
        </div>
    </div>

    <button
        iconStart="@tui.eye"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Show
    </button>
    <button
        iconStart="@tui.pencil-line"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Edit
    </button>
    <button
        appearance="secondary"
        iconStart="@tui.share"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Share
    </button>
</tui-swipe-actions>

<tui-swipe-actions [autoClose]="true">
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.gift"
        ></div>
        <div tuiTitle>
            <strong>{{ 23000 | tuiAmount: 'EUR' }}</strong>
            <div tuiSubtitle>Goal</div>
        </div>
    </div>

    <button
        iconStart="@tui.eye"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Show
    </button>
    <button
        iconStart="@tui.pencil-line"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Edit
    </button>
    <button
        appearance="secondary"
        iconStart="@tui.share"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Share
    </button>
</tui-swipe-actions>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

tui-swipe-actions {
    margin: -3rem -1.5rem;
}

[tuiCardLarge] {
    margin: 3rem 1.5rem;
}

button[tuiSwipeAction] {
    border-radius: 100%;
}

Dynamic actions

$10 000
Dollar account
    
      
    

      
      
    

  
    
      <tui-swipe-actions>
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.dollar-sign"
        ></div>
        <div tuiTitle>
            <strong>{{ 10000 | tuiAmount: 'USD' }}</strong>
            <div tuiSubtitle>Dollar account</div>
        </div>
    </div>

    @if (editButton) {
        <button
            iconStart="@tui.pencil-line"
            size="m"
            tuiIconButton
            tuiSwipeAction
            type="button"
        >
            Edit
        </button>
    }
    @if (shareButton) {
        <button
            appearance="secondary"
            iconStart="@tui.share"
            size="m"
            tuiIconButton
            tuiSwipeAction
            type="button"
        >
            Share
        </button>
    }
</tui-swipe-actions>

<label>
    <input
        tuiCheckbox
        type="checkbox"
        [(ngModel)]="shareButton"
    />
    Share button
</label>
<label>
    <input
        tuiCheckbox
        type="checkbox"
        [(ngModel)]="editButton"
    />
    Edit button
</label>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
}

tui-swipe-actions {
    margin: -3rem -1.5rem -1.5rem;
}

[tuiCardLarge] {
    margin: 3rem 1.5rem;
}

button[tuiSwipeAction] {
    border-radius: 100%;
}

label {
    display: flex;
    align-items: center;
    margin-block-start: 0.5rem;
}

input[type='checkbox'] {
    margin-inline-end: 0.5rem;
}

Fallback for desktop

$10 000
Dollar account
    
      
    

      
      
    

  
    
      <tui-swipe-actions>
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.dollar-sign"
        ></div>
        <div tuiTitle>
            <strong>{{ 10000 | tuiAmount: 'USD' }}</strong>
            <div tuiSubtitle>Dollar account</div>
        </div>
    </div>

    <button
        appearance="flat"
        iconStart="@tui.ellipsis-vertical"
        size="s"
        tuiDropdownAuto
        tuiIconButton
        type="button"
        class="fallback"
        [tuiDropdown]="content"
    >
        Actions
    </button>

    <ng-template #content>
        <tui-data-list>
            <button
                tuiOption
                type="button"
            >
                Hide
            </button>
            <button
                tuiOption
                type="button"
            >
                Edit
            </button>
        </tui-data-list>
    </ng-template>

    <button
        iconStart="@tui.eye"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Show
    </button>
    <button
        iconStart="@tui.pencil-line"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Edit
    </button>
</tui-swipe-actions>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: flex;
}

.fallback {
    .center-top();

    inset-inline-end: 2rem;
}

tui-swipe-actions {
    margin: -3rem -1.5rem;
}

[tuiCardLarge] {
    margin: 3rem 1.5rem;
}

button[tuiSwipeAction] {
    border-radius: 100%;
}

@media @tui-touch {
    .fallback {
        display: none;
    }
}

Onboarding

$10 000
Dollar account
€23 000
Goal
    
      
    

      
      
    

  
    
      <div [style.marginBottom.rem]="1.5">
    <button
        appearance="secondary-grayscale"
        iconEnd="@tui.play"
        size="m"
        tuiButton
        type="button"
        [disabled]="onboarding()"
        (click)="onboarding.set(true)"
    >
        Play
    </button>
</div>

<tui-swipe-actions [(onboarding)]="onboarding">
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.dollar-sign"
        ></div>
        <div tuiTitle>
            <strong>{{ 10000 | tuiAmount: 'USD' }}</strong>
            <div tuiSubtitle>Dollar account</div>
        </div>
    </div>

    <button
        iconStart="@tui.eye"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Show
    </button>
    <button
        iconStart="@tui.pencil-line"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Edit
    </button>
    <button
        appearance="secondary"
        iconStart="@tui.share"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Share
    </button>
</tui-swipe-actions>

<tui-swipe-actions [(onboarding)]="onboarding">
    <div
        appearance="floating"
        tuiCardLarge
        tuiCell
    >
        <div
            appearance="primary"
            tuiAvatar="@tui.gift"
        ></div>
        <div tuiTitle>
            <strong>{{ 23000 | tuiAmount: 'EUR' }}</strong>
            <div tuiSubtitle>Goal</div>
        </div>
    </div>

    <button
        iconStart="@tui.eye"
        size="m"
        tuiIconButton
        tuiSwipeAction
        type="button"
    >
        Show
    </button>
</tui-swipe-actions>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[tuiCardLarge] {
    margin: 3rem 1.5rem;
}

tui-swipe-actions {
    margin: -3rem -1.5rem;
}

button[tuiSwipeAction] {
    border-radius: 100%;
}
GitHub StackBlitz