Working with Sliding List Items

1. Using IonItemSliding Component

Property	Values	Description
ionItemSliding	`IonItemSliding`	Root component for sliding items
ionItem	`IonItem`	Child component for content inside sliding item
ionItemOption	`IonItemOption`	Child component for action buttons on sliding item

Example: Basic Sliding List

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item 1</ion-label>
    </ion-item>
    <ion-item-options side="start">
      <ion-item-option color="primary">
        <ion-icon name="archive"></ion-icon>
        Archive
      </ion-item-option>
    </ion-item-options>
    <ion-item-options side="end">
      <ion-item-option color="danger">
        <ion-icon name="trash"></ion-icon>
        Delete
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Note: The ionItemSliding component must wrap an ionItem and one or more ionItemOptions to enable sliding functionality.

Key Features

Supports sliding from both left (start) and right (end)
Can contain multiple action buttons per side
Provides built-in swipe gestures for mobile devices

2. Adding Swipe Actions

Action	Description	Code Example
swipeAction	Defines a swipe action for list items	`<ion-item-sliding><br> <ion-item><br> <ion-label>Item with Swipe Actions</ion-label><br> </ion-item><br> <ion-item-options side="end"><br> <ion-item-option (click)="archiveItem()">Archive</ion-item-option><br> </ion-item-options><br></ion-item-sliding>`
side	Specifies the side of the list item to show the swipe action (start or end)	`<ion-item-options side="start"><br> <ion-item-option (click)="deleteItem()">Delete</ion-item-option><br></ion-item-options>`

Note: Swipe actions are only available in ion-item-sliding components.

Warning: Ensure that swipe actions do not conflict with other gestures or interactions on the same item.

3. Configuring Option Buttons

Property	Description	Values	Notes
side	Sets the side of the list item where the option buttons appear	`'start'` \| `'end'`	Default is `'end'`
icon	Icon to display on the option button	`string`	Uses Ionicons library
handler	Function to execute when the option button is tapped	`() => void`	Can be used to perform actions like delete or archive
role	Defines the semantic role of the option button	`'action'` \| `'destructive'`	Used for accessibility and styling
swipeGesture	Enables or disables swipe gesture for option buttons	`true` \| `false`	Default is `true`

Example: Configuring Option Buttons

<ion-item-sliding>
  <ion-item>
    <ion-label>Item with options</ion-label>
  </ion-item>
  <ion-item-options side="end">
    <ion-item-option (click)="archiveItem(item)">
      <ion-icon name="archive"></ion-icon>
      Archive
    </ion-item-option>
    <ion-item-option color="danger" (click)="deleteItem(item)" role="destructive">
      <ion-icon name="trash"></ion-icon>
      Delete
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

Note: The ion-item-option component is used to define each individual option button within the sliding list item.

4. Setting Swipe Direction

Property	Values	Description
side	`'left'` \| `'right'`	Defines the swipe direction for the sliding item. Defaults to `'left'`.

Example: Setting Swipe Direction to Right

<ion-item-sliding>
  <ion-item>
    <ion-label>Item with Right Swipe</ion-label>
  </ion-item>
  <ion-item-options side="right">
    <ion-item-option color="danger">Delete</ion-item-option>
  </ion-item-options>
</ion-item-sliding>

Note: The side property can be set to either 'left' or 'right' to control the swipe direction of the sliding item options.

5. Handling Option Click

Property	Description	Usage
ionOptionButton	Component for defining a button inside an option	`<ion-option-button (click)="handleClick()">Action</ion-option-button>`
ionItemSliding	Container for sliding items and options	`<ion-item-sliding><ion-item>Item</ion-item><ion-item-options>...</ion-item-options></ion-item-sliding>`

Example: Handling Option Click

handleClick() {
  console.log('Option clicked');
}

Note: The click event on ion-option-button is triggered when the user taps the option.

6. Using Expandable Options

Property	Description	Values
expandable	Enables or disables expandable options for list items	`true` / `false`
options	Defines the options to be displayed when expanded	Object with `side` and `items`
side	Specifies the side of the list item where options appear	`'start'` / `'end'`

Example: Configuring Expandable Options

import { IonItem, IonLabel, IonList, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';

const ExpandableOptionsExample = () => {
  return (
    <IonList>
      <IonItemSliding>
        <IonItem>
          <IonLabel>Item with Expandable Options</IonLabel>
        </IonItem>
        <IonItemOptions side="end">
          <IonItemOption color="danger">Delete</IonItemOption>
          <IonItemOption color="secondary">Share</IonItemOption>
        </IonItemOptions>
      </IonItemSliding>
    </IonList>
  );
};

Note: The expandable property is not a direct attribute but is controlled via the IonItemOptions component.

Summary of Expandable Options

Use IonItemOptions to define expandable actions
Set side to control the position of options
Options can be grouped under a single sliding item

7. Implementing Delete Action

Action Description Code Example

ion-item-sliding

Container for sliding item components

Action	Description	Code Example
ion-item-sliding	Container for sliding item components	`<ion-item-sliding> <ion-item> <ion-label>Item to delete</ion-label> </ion-item> </ion-item-sliding>`
ion-item-options	Defines options for sliding actions (e.g., delete, archive)	`<ion-item-sliding> <ion-item-options side="end"> <ion-item-option color="danger" (click)="deleteItem(item)"> Delete </ion-item-option> </ion-item-options> </ion-item-sliding>`
ion-item-option	Represents a single sliding action option	`<ion-item-option color="danger" (click)="deleteItem(item)"> Delete </ion-item-option>`

<ion-item-sliding>
  <ion-item>
    <ion-label>Item to delete</ion-label>
  </ion-item>
</ion-item-sliding>

ion-item-options

Defines options for sliding actions (e.g., delete, archive)

<ion-item-sliding>
  <ion-item-options side="end">
    <ion-item-option color="danger" (click)="deleteItem(item)">
      Delete
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

ion-item-option

Represents a single sliding action option

<ion-item-option color="danger" (click)="deleteItem(item)">
  Delete
</ion-item-option>

Example: Delete Action Implementation

<script>
import { Component } from '@angular/core';

@Component({
  selector: 'app-delete-example',
  template: `
    <ion-list>
      <ion-item-sliding *ngFor="let item of items">
        <ion-item>
          <ion-label>{{ item.name }}</ion-label>
        </ion-item>
        <ion-item-options side="end">
          <ion-item-option color="danger" (click)="deleteItem(item)">
            Delete
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  `
})
export class DeleteExampleComponent {
  items = [
    { id: 1, name: 'Item One' },
    { id: 2, name: 'Item Two' }
  ];

  deleteItem(item: any) {
    this.items = this.items.filter(i => i.id !== item.id);
  }
}
</script>

Note: The ion-item-option component must be placed inside ion-item-options, and the side attribute determines where the options appear (e.g., end for right side).

8. Closing Sliding Item

Property	Values	Description
swipeGesture	`true` \| `false`	Enables or disables the swipe gesture for sliding items. Defaults to `true`.
side	`start` \| `end`	Determines which side the sliding item appears from. Defaults to `start`.
maxStart	`number`	Maximum width (in pixels) the item can be swiped to the start side.
maxEnd	`number`	Maximum width (in pixels) the item can be swiped to the end side.

Example: Closing Sliding Item Programmatically

import { Component, ViewChild } from '@angular/core';
import { IonList } from '@ionic/angular';

@Component({
  selector: 'app-sliding-list',
  template: '<ion-list><ion-item-sliding><ion-item>Item</ion-item><ion-item-options side="start"><ion-item-option>Edit</ion-item-option></ion-item-options></ion-item-sliding></ion-list>'
})
export class SlidingListComponent {
  @ViewChild('slidingList', { static: true }) slidingList: IonList;

  closeSlidingItem() {
    this.slidingList.closeSlidingItems();
  }
}

Note: The closeSlidingItems() method is available on the IonList component and will close all open sliding items in the list.

9. Disabling Sliding

Property	Values	Description
swipeGesture	`false`	Disables the swipe gesture for sliding items
disabled	`true`	Prevents sliding behavior entirely on the list item

Example: Disable Sliding on a List Item

<ion-item-sliding>
  <ion-item>
    <ion-label>Item with disabled sliding</ion-label>
  </ion-item>
  <ion-item-options side="start">
    <ion-item-option>Edit</ion-item-option>
  </ion-item-options>
</ion-item-sliding>

Note: When swipeGesture is set to false, users cannot swipe to reveal options. Setting disabled to true completely disables the sliding behavior for that item.

10. Styling Sliding Options

Property	Values	Description
--ion-item-sliding-options-width	`100%`	Width of the sliding options container
--ion-item-sliding-options-background	`#ffffff`	Background color of the sliding options
--ion-item-sliding-options-padding	`0`	Padding inside the sliding options container
--ion-item-sliding-options-transition	`all 200ms ease-in-out`	CSS transition for sliding options

Example: Customizing Sliding Options Style

.custom-sliding-options {
  --ion-item-sliding-options-width: 200px;
  --ion-item-sliding-options-background: #f0f0f0;
  --ion-item-sliding-options-padding: 10px;
  --ion-item-sliding-options-transition: all 300ms ease-in-out;
}