Provides custom styling for Tumbler. More...
| Import Statement: | import QtQuick.Controls.Styles 1.4 |
| Since: | Qt 5.5 |
You can create a custom tumbler by replacing the following delegates:
|
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.
|
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.
|
visibleItemCount : int |
This property holds the amount of items visible in each column.
This value should be an odd number.
