StyledItem

The StyledItem class allows items to be styled by the theme. More...

Import Statement: import Ubuntu.Components 1.1
Inherited By:

ActionItem, AppHeader, DatePicker, Dialer, DialerHand, PageTreeNode, Picker, PullToRefresh, Scrollbar, Slider, TabBar, and TextArea.

Properties

Detailed Description

StyledItem provides facilities for making an Item stylable by the theme.

In order to make an Item stylable by the theme, it is enough to make the Item inherit from StyledItem and set its style property to be the result of the appropriate call to Theme.createStyleComponent().

Example definition of a custom Item MyItem.qml:

StyledItem {
    id: myItem
    style: Theme.createStyleComponent("MyItemStyle.qml", myItem)
}

The Component set on style is instantiated and placed below everything else that the Item contains.

A reference to the Item being styled is accessible from the style and named 'styledItem'.

See also Theme.

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.2
import Ubuntu.Components 1.1

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.


style : Component

Component instantiated immediately and placed below everything else.