Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

ItemSliding

ion-item-sliding

Improve this doc

A sliding item is a list item that can be swiped to reveal buttons. It requires an Item component as a child and a List component as a parent. All buttons to reveal can be placed in the <ion-item-options> element.

Usage

<ion-list>
  <ion-item-sliding #item>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options side="left">
      <button ion-button (click)="favorite(item)">Favorite</button>
      <button ion-button color="danger" (click)="share(item)">Share</button>
    </ion-item-options>

    <ion-item-options side="right">
      <button ion-button (click)="unread(item)">Unread</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Swipe Direction

By default, the buttons are revealed when the sliding item is swiped from right to left, so the buttons are placed in the right side. But it's also possible to reveal them in the right side (sliding from left to right) by setting the side attribute on the ion-item-options element. Up to 2 ion-item-options can used at the same time in order to reveal two different sets of buttons depending the swipping direction.

<ion-item-options side="right">
  <button ion-button (click)="archive(item)">
    <ion-icon name="archive"></ion-icon>
    Archive
  </button>
</ion-item-options>

<ion-item-options side="left">
  <button ion-button (click)="archive(item)">
    <ion-icon name="archive"></ion-icon>
    Archive
  </button>
</ion-item-options>

Listening for events (ionDrag) and (ionSwipe)

It's possible to know the current relative position of the sliding item by subscribing to the (ionDrag)` event.

<ion-item-sliding (ionDrag)="logDrag($event)">
  <ion-item>Item</ion-item>
  <ion-item-options>
    <button ion-button>Favorite</button>
  </ion-item-options>
</ion-item-sliding>

Button Layout

If an icon is placed with text in the option button, by default it will display the icon on top of the text. This can be changed to display the icon to the left of the text by setting icon-start as an attribute on the <ion-item-options> element.

<ion-item-options icon-start>
  <button ion-button (click)="archive(item)">
    <ion-icon name="archive"></ion-icon>
    Archive
  </button>
</ion-item-options>

Expandable Options

Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the ionSwipe event to call methods on the class.

<ion-item-sliding>
  <ion-item>Item</ion-item>
  <ion-item-options (ionSwipe)="delete(item)">
    <button ion-button expandable (click)="delete(item)">Delete</button>
  </ion-item-options>
</ion-item-sliding>

We can call delete by either clicking the button, or by doing a full swipe on the item.

Instance Members

close()

Close the sliding item. Items can also be closed from the List.

The sliding item can be closed by grabbing a reference to ItemSliding. In the below example, the template reference variable slidingItem is placed on the element and passed to the share method.

<ion-list>
  <ion-item-sliding #slidingItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button (click)="share(slidingItem)">Share</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>
import { Component } from '@angular/core';
import { ItemSliding } from 'ionic-angular';

@Component({...})
export class MyClass {
  constructor() { }

  share(slidingItem: ItemSliding) {
    slidingItem.close();
  }
}

Output Events

Attr Details
ionDrag

Emitted when the sliding position changes. It reports the relative position.

ondrag(item) {
  let percent = item.getSlidingPercent();
  if (percent > 0) {
    // positive
    console.log('right side');
  } else {
    // negative
    console.log('left side');
  }
  if (Math.abs(percent) > 1) {
    console.log('overscroll');
  }
}

Sass Variables

Property Default Description
$item-ios-body-text-font-size 1.7rem

Font size of the item text

$item-ios-paragraph-margin-top 0

Margin top of the item paragraph

$item-ios-paragraph-margin-end 0

Margin end of the item paragraph

$item-ios-paragraph-margin-bottom 2px

Margin bottom of the item paragraph

$item-ios-paragraph-margin-start $item-ios-paragraph-margin-end

Margin start of the item paragraph

$item-ios-paragraph-font-size 1.4rem

Font size of the item paragraph

$item-ios-paragraph-text-color #8e9093

Color of the item paragraph

$item-ios-avatar-size 36px

Size of the avatar in the item

$item-ios-avatar-border-radius 50%

Border radius of the avatar in the item

$item-ios-thumbnail-size 56px

Size of the thumbnail in the item

$item-ios-detail-push-show true

Shows the detail arrow icon on an item

$item-ios-detail-push-color $list-ios-border-color

Color of the detail arrow icon

$item-ios-detail-push-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></svg>"

Icon for the detail arrow

$item-ios-divider-background #f7f7f7

Background for the divider

$item-ios-divider-color #222

Color for the divider

$item-ios-sliding-content-background $list-ios-background-color

Background for the sliding content

Property Default Description
$item-md-body-text-font-size 1.4rem

Font size of the item text

$item-md-body-text-line-height 1.5

line height of the item text

$item-md-paragraph-text-color #666

Color of the item paragraph

$item-md-font-size 1.6rem

Font size of the item

$item-md-avatar-size 40px

Size of the avatar in the item

$item-md-avatar-border-radius 50%

Border radius of the avatar in the item

$item-md-thumbnail-size 80px

Size of the thumbnail in the item

$item-md-detail-push-show false

Shows the detail arrow icon on an item

$item-md-detail-push-color $list-md-border-color

Color of the detail arrow icon

$item-md-detail-push-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-md-detail-push-color}'/></svg>"

Icon for the detail arrow

$item-md-divider-color #858585

Color for the divider

$item-md-divider-background #fff

Background for the divider

$item-md-divider-font-size $item-md-body-text-font-size

Font size for the divider

$item-md-divider-border-bottom 1px solid $list-md-border-color

Border bottom for the divider

$item-md-sliding-content-background $list-md-background-color

Background for the sliding content

Property Default Description
$item-wp-body-text-font-size 1.4rem

Font size of the item text

$item-wp-body-text-line-height 1.5

line height of the item text

$item-wp-body-background-color $list-wp-background-color

Background color of the item

$item-wp-body-text-color $list-wp-text-color

Color of the item text

$item-wp-paragraph-text-color #666

Color of the item paragraph

$item-wp-font-size 1.6rem

Font size of the item

$item-wp-avatar-size 40px

Size of the avatar in the item

$item-wp-avatar-border-radius 50%

Border radius of the avatar in the item

$item-wp-thumbnail-size 80px

Size of the thumbnail in the item

$item-wp-detail-push-show false

Shows the detail arrow icon on an item

$item-wp-detail-push-color $input-wp-border-color

Color of the detail arrow icon

$item-wp-detail-push-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-wp-detail-push-color}'/></svg>"

Icon for the detail arrow

$item-wp-divider-color $list-wp-text-color

Color for the divider

$item-wp-divider-background #fff

Background for the divider

$item-wp-divider-border-bottom 1px solid $list-wp-border-color

Bodrer bottom for the divider

$item-wp-divider-font-size 2rem

Font size for the divider

$item-wp-sliding-content-background $list-wp-background-color

Background for the sliding content

Related

List Component Docs, Item API Docs, List API Docs

API

Native

General