# StyledItem QML Type

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

Import Statement: | import Lomiri.Components 1.3
Since: | Lomiri.Components 1.1
Inherited By: | ActionBar, BottomEdge, DatePicker, Dialer, DialerHand, Header, Picker, PullToRefresh, Scrollbar, ScrollView, Sections, Slider, TabBar, and Toolbar

- List of all members, including inherited members

## Properties

- keyNavigationFocus : string
- 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

keyNavigationFocus : string

If activeFocusOnTab is true and Tab or Shift+Tab is used to focus the item this property will be true - unlike activeFocus which is also true if the item gained focus by click, tap or programmatically. Note that only one component at a time has keyNavigationFocus. The parent will have activeFocus and usually won't draw a focus ring.

In case of complex components arrow keys may be the preferred way to move between children that can take focus. Examples of that are ListView and ListItem. This currently requires overriding keyNavigationFocus in C++.

The implementation of focus rings as provided by the default Ambiance theme sets activeFocusOnTab in the style of each component and only indicates focus as long as keyNavigationFocus is true, similar to the below example.

    StyledItem {
        id: myItem
        activeFocusOnTab: true
        Rectangle {
            anchors.fill: parent
            color: keyNavigationFocus ? LomiriColors.orange : LomiriColors.blue
        }
    }

style : Component

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
    }

styleName : string

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.

theme : ThemeSettings

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 property was introduced in Lomiri.Components 1.3.