TumblerStyle QML Type | Qt Quick Controls 5.5

- Qt 5.5
- Qt Quick Controls
- QML Types
- TumblerStyle QML Type
- Qt 5.5.1 Reference Documentation

# TumblerStyle QML Type

Provides custom styling for Tumbler. More...

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

- List of all members, including inherited members

## Properties

- background : Component
- columnForeground : Component
- control : Tumbler
- delegate : Component
- foreground : Component
- frame : Component
- highlight : Component
- separator : Component
- spacing : real
- visibleItemCount : int

## Detailed Description

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

- background
- foreground
- separator
- delegate
- highlight
- frame

## 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.column | The index of the column that contains this item.
`readonly property bool` styleData.activeFocus | `true` 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-onlycontrol : 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.index | The index of this delegate in the model.
`readonly property int` styleData.column | The index of the column that contains this item.
`readonly property real` styleData.value | The value for this delegate from the model.
`readonly property bool` styleData.current | `true` if this delegate is the current item.
`readonly property real` styleData.displacement | `A` 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.activeFocus | `true` 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.index | The index of this column in the tumbler.
`readonly property int` styleData.columnIndex | The index of the column that contains this highlight.
`readonly property bool` styleData.activeFocus | `true` 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.

spacing : real

This property holds the spacing between each delegate.

visibleItemCount : int

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

This value should be an odd number.