Scrollbar QML Type

The ScrollBar component provides scrolling functionality for scrollable views (i.e. Flickable, ListView). More...

Import Statement: import Ubuntu.Components 1.2
Inherits:

StyledItem

Properties

Detailed Description

The ScrollBar can be set to any flickable and has built-in anchoring setup to the attached flickable's front, rear, top or bottom. the scrollbar can also be aligned using anchors, however the built-in align functionality makes sure to have the proper alignemt applied based on theme and layout direction (RTL or LTR).

The content position is driven through the attached Flickable. Therefore every style implementation should drive the position through contentX/contentY properties, depending on whether the orientation is vertical or horizontal.

Example:

Item {
    ListView {
        id: list
        width: units.gu(37)
        height: units.gu(37)
        model: 30
        delegate: Rectangle {
            width: ListView.view.width
            height: units.gu(5)
            Text {
                anchors.fill: parent
                text: "Item " + modelData
            }
        }
    }
    Scrollbar {
        flickableItem: list
        align: Qt.AlignTrailing
    }
}

Property Documentation

activeFocusOnPress : bool

The property specifies whether the StyledItem can gain focus on a mouse press/touch or not. When the value is true, the focus will be set on the component when the mouse is pressed over it or touched. However if one of the component's ancestor StyledItem or derived is having the property value false, the focus will not be gained automatically.

In the following example the TextField will stay focused when clicked on the red rectangle.

import QtQuick 2.4
import Ubuntu.Components 1.2

Column {
    width: units.gu(50)
    height: units.gu(100)

    StyledItem {
        objectName: "passiveScope"
        width: parent.width
        height: units.gu(30)
        Rectangle {
            anchors.fill: parent
            color: "red"
            StyledItem {
                objectName: "activeScope"
                activeFocusOnPress: true
                anchors.fill: parent
            }
        }
    }

    TextField {
        id: input
        text: "The input stays focus even if red box is clicked"
    }

    Component.onCompleted: input.forceActiveFocus()

    Connections {
        target: window
        onActiveFocusItemChanged: console.debug("focus on", window.activeFocusItem)
    }
}

The default value is false.

This QML property was introduced in Ubuntu.Components 1.1.


align : int

The property defines the alignment of the scrollbar to the flickableItem. The implementation handles the alignment as follows:

  • Qt.AlignLeading anchors to the left on LTR and to the right on RTL layouts
  • Qt.AlignTrailing anchors to the right on LTR and to the left on RTL layouts
  • Qt.AlignTop anchors to the top
  • Qt.AlignBottom anchors to the bottom

The default value is Qt.AlignTrailing.


flickableItem : Flickable

This property holds the flickable item (Flickable, ListView or GridView) the Scrollbar is attached to.


style : Component

Component instantiated immediately and placed below everything else.