QML Style Element

Symbian: Provides platform-specific style parameters for fonts, colors, and layouts. More...

This element was introduced in Qt Quick Components 1.0.

List of all members, including inherited members

Properties

borderSizeMedium : int
colorBackground : color
colorBackgroundInverted : color
colorChecked : color
colorDisabledDark : color
colorDisabledDarkInverted : color
colorDisabledLight : color
colorDisabledLightInverted : color
colorDisabledMid : color
colorDisabledMidInverted : color
colorHighlighted : color
colorHighlightedInverted : color
colorLatched : color
colorLatchedInverted : color
colorNormalDark : color
colorNormalDarkInverted : color
colorNormalLight : color
colorNormalLightInverted : color
colorNormalLink : color
colorNormalLinkInverted : color
colorNormalMid : color
colorNormalMidInverted : color
colorPressed : color
colorPressedInverted : color
colorTextSelection : color
colorTextSelectionInverted : color
fontFamilyRegular : string
fontSizeLarge : int
fontSizeMedium : int
fontSizeSmall : int
graphicSizeLarge : int
graphicSizeMedium : int
graphicSizeSmall : int
graphicSizeTiny : int
paddingLarge : int
paddingMedium : int
paddingSmall : int

Detailed Description

You should use these parameters when you want to make your UI consistent with the Symbian platform style. Symbian-style is exposed as a context property named platformStyle. It is not possible to instantiate a Style object in QML, but the style must be accessed through the context property.

The actual return values of the properties may vary between device configurations. For example, if the resolutions of two devices are different, it is probable that the pixel values of the properties are different.

Using Style Parameters

The following example illustrates how to use the style parameters.

 Item {
     width: text.width + icon.width + platformStyle.paddingSmall + 2 * platformStyle.paddingMedium
     height: Math.max(text.height, icon.height) + 2 * platformStyle.paddingMedium

     Image {
         id: icon
         anchors.left: parent.left
         anchors.leftMargin: platformStyle.paddingMedium
         anchors.verticalCenter: parent.verticalCenter
         width: platformStyle.graphicSizeSmall
         height: platformStyle.graphicSizeSmall
         ...
     }

     Text {
         id: text
         anchors.left: icon.right
         anchors.leftMargin: platformStyle.paddingSmall
         anchors.right: parent.right
         anchors.rightMargin: platformStyle.paddingMedium
         anchors.verticalCenter: parent.verticalCenter
         font.family: platformStyle.fontFamilyRegular
         font.pixelSize: platformStyle.fontSizeLarge
         color: platformStyle.colorNormalLight
         ...
     }
 }

Property Documentation

borderSizeMedium : int

The size for medium size border parts of a BorderImage in pixels.

colorBackground : color

The default application background color.

This property group was introduced in Qt Quick Components 1.1.

colorBackgroundInverted : color

The inverted counterpart of the colorBackground. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorChecked : color

The foreground color for the checked state. Deprecated since 1.1 - use colorLatched instead.

colorDisabledDark : color

The dark foreground color for the disabled state.

colorDisabledDarkInverted : color

The inverted counterpart of the colorDisabledDark. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorDisabledLight : color

The light foreground color for the disabled state.

colorDisabledLightInverted : color

The inverted counterpart of the colorDisabled. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorDisabledMid : color

The mid foreground color for the disabled state.

colorDisabledMidInverted : color

The inverted counterpart of the colorDisabled. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorHighlighted : color

The foreground color for a highlighted item.

colorHighlightedInverted : color

The inverted counterpart of the colorHighlighted. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorLatched : color

The foreground color for the latched or checked state.

This property group was introduced in Qt Quick Components 1.1.

colorLatchedInverted : color

The inverted counterpart of the colorLatched. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorNormalDark : color

The default dark foreground color.

colorNormalDarkInverted : color

The inverted counterpart of the colorNormalDark. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorNormalLight : color

The default light foreground color.

colorNormalLightInverted : color

The inverted counterpart of the colorNormalLight. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorNormalLink : color

The default foreground color for a link, for example a URL.

colorNormalLinkInverted : color

The inverted counterpart of the colorNormalLink. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorNormalMid : color

The default mid foreground color.

colorNormalMidInverted : color

The inverted counterpart of the colorNormalMid. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorPressed : color

The foreground color for the pressed state.

colorPressedInverted : color

The inverted counterpart of the colorPressed. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

colorTextSelection : color

The background color for a selected item.

colorTextSelectionInverted : color

The inverted counterpart of the colorTextSelection. For more information, see Using Inverted Style with Symbian Components.

This property group was introduced in Qt Quick Components 1.1.

fontFamilyRegular : string

The default font family.

fontSizeLarge : int

The pixel size for a large font.

fontSizeMedium : int

The pixel size for a medium size font.

fontSizeSmall : int

The pixel size for a small font.

graphicSizeLarge : int

The size of a large graphical object, for example an Image, in pixels.

graphicSizeMedium : int

The size of a medium size graphical object, for example an Image, in pixels.

graphicSizeSmall : int

The size of a small graphical object, for example an Image, in pixels.

graphicSizeTiny : int

The size of a tiny graphical object, for example an Image, in pixels.

paddingLarge : int

The size of a large padding in pixels.

paddingMedium : int

The size of a medium size padding in pixels.

paddingSmall : int

The size of a small padding in pixels.

Components Topics

Guides

API Reference

Contents

QML Style Element

Properties

Detailed Description

Using Style Parameters

Property Documentation