TumblerStyle QML Type

Provides custom styling for Tumbler. More...

Import Statement: import QtQuick.Controls.Styles 1.4
Since: Qt 5.5

Properties

Detailed Description

You can create a custom tumbler by replacing the following delegates:

Property Documentation

background : Component

The background of the tumbler.


columnForeground : Component

The foreground of each column.

In terms of stacking order, this component is displayed above the delegate and highlight components, but below the foreground component.

readonly property int styleData.columnThe index of the column that contains this item.
readonly property bool styleData.activeFocustrue if the column that contains this item has active focus.

Delegates for items in specific columns can be defined using TumblerColumn's columnForeground property, which will be used instead of this component.


[read-only] control : Tumbler

The Tumbler that this style is attached to.


delegate : Component

The delegate provides a template defining each item instantiated in the column. Each instance of this component has access to the following properties:

readonly property int styleData.indexThe index of this delegate in the model.
readonly property int styleData.columnThe index of the column that contains this item.
readonly property real styleData.valueThe value for this delegate from the model.
readonly property bool styleData.currenttrue if this delegate is the current item.
readonly property real styleData.displacementA value from -visibleItemCount / 2 to visibleItemCount / 2 which represents how far away this item is from being the current item, with 0 being completely current.

For example, the item below will be 40% opaque when it is not the current item, and transition to 100% opacity when it becomes the current item:

delegate: Text {
    text: styleData.value
    opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
}
readonly property bool styleData.activeFocustrue if the column that contains this item has active focus.

Properties of the model are also available depending upon the type of Data Model.

Delegates for items in specific columns can be defined using TumblerColumn's delegate property, which will be used instead of this delegate.

The implicitHeight property must be set, and it must be the same for each delegate.


foreground : Component

The foreground of the tumbler.


frame : Component

The frame around the tumbler.

The implicitWidth property must be set, and should be the same value for each separator.


highlight : Component

The delegate for the highlight of each column.

Delegates for the highlight of specific columns can be defined using TumblerColumn's highlight property, which will be used instead of this delegate.

Each instance of this component has access to the following properties:

readonly property int styleData.indexThe index of this column in the tumbler.
readonly property int styleData.columnIndexThe index of the column that contains this highlight.
readonly property bool styleData.activeFocustrue if the column that contains this highlight has active focus.

separator : Component

The separator between each column.

The implicitWidth property must be set, and should be the same value for each separator.


visibleItemCount : int

This property holds the amount of items visible in each column.

This value should be an odd number.


© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.