QML Switch Element

Provides an icon representing a physical switch that the user can turn on and off. More...

Inherits Item

List of all members, including inherited members

Properties

• checked : bool
• pressed : bool

Signals

• clicked

Detailed Description

You can bind the Switch component to a feature that the application has to enable or disable depending on the user's input, for example. Switch has similar usage and API as CheckBox, except that Switch does not provide a built-in label.

Using a Switch

In this example the user can turn a switch on and off. In the code snippet below the switch is defined. The text label is bound to the checked property - this way the text label shows the switch's state to the user.

     Row {
         id: rowRow
         spacing: 10
         anchors.fill: parent

         Switch {
             id: switchComponent
         }

         Text {
             width: rowRow.width - rowRow.spacing - switchComponent.width
             height: switchComponent.height
             verticalAlignment: Text.AlignVCenter
             text: switchComponent.checked ? "Switched on" : "Switched off"
             font.pixelSize: platformStyle.fontSizeMedium
             color: platformStyle.colorNormalLight
         }
     }

The screenshot below illustrates the case where the user has turned the switch on.

Property Documentation

Signal Documentation