Swipe list item

desktopicon mobileicon
 

Purpose

This uses an on-demand pattern as alternative to always visible controls in lists. If the user often performs tasks on single items of a list, add a handle on the side the list item (next to the context drawer’s edge, defined by a system-wide configuration) which.

Example

Slide to reveal actions

Guidelines

Is this the right control

  • See on-demand pattern for general recomendations.
  • desktopicon If only one action is available, most the time it’s better to not use the on-demand pattern, but show the action right away.

Behavior

desktopicon Desktop

Hover to reveal

On-demand controls are shown when hovering over the item with the cursor. A handle is shown to support devices with touch screens. Swiping the handle right to left reveals the actions. As soon as the user taps anywhere else or the pointer is not any longer hovering the item, the handle is slid back.

mobileicon Mobile

On-demand controls are revealed by sliding a handle from right to left to reveal them. As soon as the user taps anywhere else, the handle is slid back.

Appearance

desktopicon Desktop

Default padding of an item

Default padding of a swipelistitem on desktop

Items have a padding of Units.smallSpacing on the top and bottom and a padding of 2 * Units.smallSpacing on the left.

Label is vertically centered

Label is vertically centered

Labels are vertically centered within the list item. If the list item includes an icon, add a 2 * Units.smallSpacing margin between the icon and the label.

mobileicon Mobile

Default padding of an item

Default padding of a swipelistitem on mobile

Items have a padding of Units.largeSpacing on the top and bottom and a padding of 2 * Units.largeSpacing on the left.

Label is vertically centered

Label is vertically centered

Labels are vertically centered within the list item. If the list item includes an icon, add a 2 * Units.largeSpacing margin between the icon and the label.

Code

Kirigami

...
ListView {
    ...

    delegate: Kirigami.SwipeListItem {
        id: lineItem

        contentItem: Row {
            spacing: lineItem.leftPadding

            Item {
                width: Kirigami.Units.iconSizes.medium
                height: width

                Image {
                    id: avatar
                    width: parent.width
                    height: width
                    source: "..."
                    visible: false
                }
                OpacityMask {
                    anchors.fill: avatar
                    source: avatar
                    maskSource: Rectangle {
                        height: avatar.width
                        width: height
                        radius: height / 2
                    }
                }
            }
            Label {
                anchors.verticalCenter: parent.verticalCenter
                text: "..."
            }
        }
        actions: [
            Kirigami.Action {
                text: i18n("&Make call")
                iconName: "call-start"
            },
            Kirigami.Action {
                text: i18n("&Write mail")
                iconName: "mail-message"
            }
        ]
    }

    ...
}
...