Ubuntu.Components.StyledItem

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

Properties

• style : Component
• styleName : string
• theme : ThemeSettings

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
styleName: "MyItemStyle"
}

The style set on styleName is instantiated and placed below everything else that the Item contains. When the style is defined in this way, the style is taken from the current theme the StyledItem is themed with. Another way tpo set the style of a component is to set the style property. This property expects a component and it has precedence over the styleName, meaning that when both styleName and style are set, the style will be created from the style componment.

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

See also Theme.

Property Documentation

Style component instantiated immediately and placed below everything else. Has precedence over the styleName. When both set, the style will be created from the component given as property value, and can be reset to the theme style when set to null or reset (set to undefined).

Button {
text: "Press to reset"
style: Rectangle {
color: "tan"
Label {
anchors {
fill: parent
margins: units.gu(1)
}
text: styledItem.text
}
}
onClicked: style = undefined
}

The property specifies the component style name. The style name is a document in the current theme, and should not contain the qml file extension. If specified an error will be shown.

StyledItem {
id: myItem
styleName: "MyItemStyle"
}

Note: style property has precedence over styleName.

The property configures the theme the component and all its sub-components will use. By default it is set to the closest ancestor StyledItem's theme if any, or to the system default theme.

This QML property was introduced in Ubuntu.Components 1.3.