• Home
• Felgo
• SwipeOptionsContainer

SwipeOptionsContainer

A ListView delegate container to implement swipeable rows within a ListView. More...

• List of all members, including inherited members

Properties

• isLeft : bool
• isRight : bool
• leftOption : Item
• overshoot : bool
• rightOption : Item

Signals

• leftOptionShown()
• rightOptionShown()

Methods

• hideOptions()
• showLeftOption()
• showRightOption()

Detailed Description

This is a container item for components which can be swiped horizontally to reveal options. It is intended for swipe-able list view rows, like in many native apps on Android or iOS.

SwipeOptionsContainer can be wrapped around any QML Items. You can then specify an Item as leftOption and/or rightOption, to enable swiping to the left or right to reveal these items as options.

If used inside the delegate of an AppListView, starting the swipe gesture in any row will automatically close the options of another row, if currently opened.

Example Usage

To add swipe options to the rows of an AppListView, the following code can be used. It uses SwipeButton items to add the buttons:

 App {

   ListPage {
     //some JS array as list model
     model: [{text: "Item 1", detailText: "Detail 1"}, {text: "Item 2", detailText: "Detail 2"}]

     // define the SwipeOptionsContainer as delegate
     delegate: SwipeOptionsContainer {
       id: container

       SimpleRow {                         //actual content to be displayed in the list rows
         id: row
       }

       leftOption: SwipeButton {           //left options, displayed when swiped list row to the right
         text: "Option"
         iconType: IconType.gear
         height: row.height
         onClicked: {
           row.item.text = "Option clicked"
           row.itemChanged()
           container.hideOptions()         //hide automatically when button clicked
         }
       }

       rightOption: AppActivityIndicator { //right options, displayed when swiped list row to the left
         height: row.height
         width: height
       }
     } // SwipeOptionsContainer
   } // ListPage

 }

Property Documentation

Signal Documentation

Method Documentation