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-left as an attribute on the <ion-item-options> element.

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

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 0 0 2px

Margin 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-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-divider-padding 5px 15px

Padding 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-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-divider-padding 5px 15px

Padding 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-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-divider-padding 5px 15px

Padding 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