Customizing Qt Labs Controls | Qt Labs Controls 5.6

Qt 5.6 | Qt Labs Controls | Customizing Qt Labs Controls

Qt 5.6.2 Reference Documentation

# Customizing Qt Labs Controls

Qt Labs Controls consist of a hierarchy (tree) of items. In order to provide a custom look and feel, the default QML implementation of each item can be replaced with a custom one. The following snippets present the default implementations of various items. These can be used as a starting point to implement a custom look and feel.

## Customizing BusyIndicator

BusyIndicator consists of two visual items: background and contentItem.

#### Background

BusyIndicator has no background item by default.

#### Content item

      contentItem: BusyRing {
          id: ring
          implicitWidth: 48
          implicitHeight: 48
          opacity: control.running ? 1 : 0

          Behavior on opacity { OpacityAnimator { duration: 250 } }

          BusyRingAnimator {
              target: ring
              running: control.visible && control.running
          }
      }

## Customizing Button

Button consists of two visual items: background and label.

#### Background

      background: Rectangle {
          implicitWidth: 100
          implicitHeight: 40
          opacity: enabled ? 1 : 0.3
          color: control.pressed ? (control.highlighted ? "#585a5c" : "#e4e4e4") : (control.highlighted ? "#353637" : "#f6f6f6")
          border.color: control.pressed ? "#26282a" : "#353637"
      }

#### Label

      label: Text {
          x: control.leftPadding
          y: control.topPadding
          width: control.availableWidth
          height: control.availableHeight
          text: control.text
          font: control.font
          opacity: enabled || highlighted ? 1 : 0.3
          color: control.highlighted ? "#ffffff" : (control.pressed ? "#26282a" : "#353637")
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: Text.AlignVCenter
          elide: Text.ElideRight
      }

## Customizing CheckBox

CheckBox consists of three visual items: background, label and indicator.

#### Background

CheckBox has no background item by default.

#### Label

      label: Text {
          x: control.mirrored ? control.leftPadding : (indicator.x + indicator.width + control.spacing)
          y: control.topPadding
          width: control.availableWidth - indicator.width - control.spacing
          height: control.availableHeight

          text: control.text
          font: control.font
          color: control.pressed ? "#26282a" : "#353637"
          elide: Text.ElideRight
          visible: control.text
          horizontalAlignment: Text.AlignLeft
          verticalAlignment: Text.AlignVCenter
      }

#### Indicator

      indicator: Rectangle {
          implicitWidth: 28
          implicitHeight: 28
          x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
          y: control.topPadding + (control.availableHeight - height) / 2

          color: control.enabled ? (control.pressed ? "#e4e4e4" : "#f6f6f6") : "#353637"
          border.color: control.enabled ? (control.pressed ? "#26282a" : "#353637") : "transparent"

          Image {
              x: (parent.width - width) / 2
              y: (parent.height - height) / 2
              source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/check.png"
              visible: control.checkState === Qt.Checked
          }

          Rectangle {
              x: (parent.width - width) / 2
              y: (parent.height - height) / 2
              width: 16
              height: 3
              color: "#353637"
              visible: control.checkState === Qt.PartiallyChecked
          }
      }

## Customizing ComboBox

ComboBox consists of background, content item, popup, and delegate.

#### Background

      background: Item {
          implicitWidth: 120
          implicitHeight: 40

          Rectangle {
              width: parent.width
              height: parent.height
              opacity: control.enabled ? 1.0 : 0.2
              color: control.pressed || popup.visible ? "#585A5C" : "#353637"
          }

          Image {
              x: parent.width - width - control.rightPadding
              y: (parent.height - height) / 2
              source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/drop-indicator.png"
          }
      }

#### Content item

      contentItem: Text {
          text: control.displayText
          font: control.font
          color: "#ffffff"
          horizontalAlignment: Text.AlignLeft
          verticalAlignment: Text.AlignVCenter
          elide: Text.ElideRight
          rightPadding: 18 + control.spacing
      }

#### Popup

      popup: T.Popup {
          y: control.height - 1
          implicitWidth: control.width
          implicitHeight: listview.contentHeight
          topMargin: 6
          bottomMargin: 6

          contentItem: ListView {
              id: listview
              clip: true
              model: control.popup.visible ? control.delegateModel : null
              currentIndex: control.highlightedIndex

              Rectangle {
                  z: 10
                  parent: listview
                  width: listview.width
                  height: listview.height
                  border.color: "#353637"
                  color: "transparent"
              }

              T.ScrollIndicator.vertical: ScrollIndicator { }
          }

          background: Rectangle { }
      }

#### Delegate

      delegate: ItemDelegate {
          width: control.width
          text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
          checkable: true
          autoExclusive: true
          checked: control.currentIndex === index
          highlighted: control.highlightedIndex === index
          pressed: highlighted && control.pressed
      }

## Customizing Dial

Dial consists of two visual items: background and handle.

#### Background

      background: Rectangle {
          x: control.width / 2 - width / 2
          y: control.height / 2 - height / 2
          width: Math.max(64, Math.min(control.width, control.height))
          height: Math.max(64, Math.min(control.width, control.height))
          radius: width / 2
          border.color: "#353637"
      }

#### Indicator

      handle: Image {
          id: handleItem
          x: background.x + background.width / 2 - handle.width / 2
          y: background.y + background.height / 2 - handle.height / 2
          width: 14
          height: 10
          source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/dial-indicator.png"
          antialiasing: true
          transform: [
              Translate {
                  y: -background.height * 0.4 + handle.height / 2
              },
              Rotation {
                  angle: control.angle
                  origin.x: handle.width / 2
                  origin.y: handle.height / 2
              }
          ]
      }

## Customizing Drawer

Drawer can have a visual background item. The navigation is implemented by the content item.

#### Background

#### Content item

Drawer has no content item by default.

## Customizing Frame

Frame consists of two visual items: background and frame.

#### Background

Frame has no background item by default.

#### Frame

      frame: Rectangle {
          width: parent.width
          height: parent.height

          color: "transparent"
          border.color: "#bdbebf"
      }

## Customizing GroupBox

GroupBox consists of three visual items: background, frame and label.

#### Background

GroupBox has no background item by default.

#### Frame

      frame: Rectangle {
          y: control.topPadding - control.padding
          width: parent.width
          height: parent.height - control.topPadding + control.padding

          color: "transparent"
          border.color: "#bdbebf"
      }

#### Label

      label: Text {
          x: control.leftPadding
          width: control.availableWidth

          text: control.title
          font: control.font
          color: control.enabled ? "#353637" : "#bdbebf"
          elide: Text.ElideRight
          horizontalAlignment: Text.AlignLeft
          verticalAlignment: Text.AlignVCenter
      }

## Customizing ItemDelegate

ItemDelegate consists of three visual items: background, label and indicator. The indicator is only visible for checkable items.

#### Background

      background: Rectangle {
          implicitWidth: 100
          implicitHeight: 40
          visible: control.pressed || control.highlighted
          color: control.pressed ? "#bdbebf" : "#eeeeee"
      }

#### Label

      label: Text {
          x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding
          y: control.topPadding
          width: control.availableWidth - (control.checkable ? indicator.width + control.spacing : 0)
          height: control.availableHeight

          text: control.text
          font: control.font
          color: control.enabled ? "#26282a" : "#bdbebf"
          elide: Text.ElideRight
          visible: control.text
          horizontalAlignment: Text.AlignLeft
          verticalAlignment: Text.AlignVCenter
      }

#### Indicator

      indicator: Image {
          x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
          y: control.topPadding + (control.availableHeight - height) / 2

          visible: control.checked
          source: control.checkable ? "qrc:/qt-project.org/imports/Qt/labs/controls/images/check.png" : ""
      }

## Customizing Label

Label can have a visual background item.

#### Background

Label has no background item by default.

## Customizing Menu

Menu consists of a contentItem.

#### Content item

      contentItem: ListView {
          implicitHeight: contentHeight
          model: control.contentModel
          // TODO: improve this?
          interactive: ApplicationWindow.window ? contentHeight > ApplicationWindow.window.height : false
          clip: true
          keyNavigationWraps: false
          currentIndex: -1

          ScrollIndicator.vertical: ScrollIndicator {}
      }

## Customizing MenuItem

MenuItem can be customized in the same manner as Button.

## Customizing PageIndicator

TODO

## Customizing Pane

Pane consists of a background.

#### Background

      background: Rectangle {
          color: "#ffffff"
      }

## Customizing ProgressBar

ProgressBar consists of two visual items: background and indicator.

#### Background

      background: Rectangle {
          implicitWidth: 200
          implicitHeight: 6
          x: control.leftPadding
          y: control.topPadding + (control.availableHeight - height) / 2
          width: control.availableWidth
          height: 6

          color: "#e4e4e4"
      }

#### Indicator

      indicator: ProgressStrip {
          id: strip
          x: control.leftPadding
          y: control.topPadding + (control.availableHeight - height) / 2
          width: control.availableWidth
          height: 6
          scale: control.mirrored ? -1 : 1
          progress: control.position
          indeterminate: control.indeterminate

          ProgressStripAnimator {
              target: strip
              running: control.visible && control.indeterminate
          }
      }

## Customizing RadioButton

RadioButton consists of three visual items: background, label and indicator.

#### Background

RadioButton has no background item by default.

#### Label

      label: Text {
          x: control.mirrored ? control.leftPadding : (indicator.x + indicator.width + control.spacing)
          y: control.topPadding
          width: control.availableWidth - indicator.width - control.spacing
          height: control.availableHeight

          text: control.text
          font: control.font
          color: control.pressed ? "#26282a" : "#353637"
          elide: Text.ElideRight
          visible: control.text
          horizontalAlignment: Text.AlignLeft
          verticalAlignment: Text.AlignVCenter
      }

#### Indicator

      indicator: Rectangle {
          implicitWidth: 28
          implicitHeight: 28
          x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
          y: control.topPadding + (control.availableHeight - height) / 2

          radius: width / 2
          border.width: 1
          border.color: (control.pressed ? "#26282a" : "#353637")
          color: control.pressed ? "#e4e4e4" : "#f6f6f6"

          Rectangle {
              x: (parent.width - width) / 2
              y: (parent.height - height) / 2
              width: 20
              height: 20
              radius: width / 2
              color: control.pressed ? "#26282a" : "#353637"
              visible: control.checked
          }
      }

## Customizing RangeSlider

RangeSlider consists of four visual items: background, track, first.handle and second.handle.

#### Background

RangeSlider has no background item by default.

#### Track

      track: Rectangle {
          x: control.leftPadding + (horizontal ? 0 : (control.availableWidth - width) / 2)
          y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : 0)
          implicitWidth: horizontal ? 200 : 6
          implicitHeight: horizontal ? 6 : 200
          width: horizontal ? control.availableWidth : implicitWidth
          height: horizontal ? implicitHeight : control.availableHeight
          radius: 3
          border.color: "#353637"
          color: "#ffffff"
          scale: horizontal && control.mirrored ? -1 : 1

          readonly property bool horizontal: control.orientation === Qt.Horizontal
      }

#### First Handle

      first.handle: Rectangle {
          x: control.leftPadding + (horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
          y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
          implicitWidth: 28
          implicitHeight: 28
          radius: width / 2
          border.width: activeFocus ? 2 : 1
          border.color: "#353637"
          color: first.pressed ? "#bdbebf" : "#ffffff"

          readonly property bool horizontal: control.orientation === Qt.Horizontal
      }

#### Second Handle

      second.handle: Rectangle {
          x: control.leftPadding + (horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
          y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
          implicitWidth: 28
          implicitHeight: 28
          radius: width / 2
          border.width: activeFocus ? 2 : 1
          border.color: "#353637"
          color: second.pressed ? "#bdbebf" : "#ffffff"

          readonly property bool horizontal: control.orientation === Qt.Horizontal
      }

## Customizing ScrollBar

ScrollBar consists of two visual items: background and handle.

#### Background

ScrollBar has no background item by default.

#### Handle

      handle: Rectangle {
          id: handle

          implicitWidth: 6
          implicitHeight: 6

          radius: width / 2
          color: control.pressed ? "#28282a" : "#bdbebf"
          visible: control.size < 1.0
          opacity: 0.0

          readonly property bool horizontal: control.orientation === Qt.Horizontal
          x: control.leftPadding + (horizontal ? control.position * control.availableWidth : 0)
          y: control.topPadding + (horizontal ? 0 : control.position * control.availableHeight)
          width: horizontal ? control.size * control.availableWidth : implicitWidth
          height: horizontal ? implicitHeight : control.size * control.availableHeight

          states: State {
              name: "active"
              when: control.active
              PropertyChanges { target: handle; opacity: 0.75 }
          }

          transitions: Transition {
              from: "active"
              SequentialAnimation {
                  PauseAnimation { duration: 450 }
                  NumberAnimation { target: handle; duration: 200; property: "opacity"; to: 0.0 }
              }
          }
      }

## Customizing ScrollIndicator

ScrollIndicator consists of two visual items: background and indicator.

#### Background

ScrollIndicator has no background item by default.

#### Indicator

      indicator: Rectangle {
          id: indicator

          implicitWidth: 2
          implicitHeight: 2

          color: "#bdbebf"
          visible: control.size < 1.0
          opacity: 0.0

          readonly property bool horizontal: control.orientation === Qt.Horizontal
          x: control.leftPadding + (horizontal ? control.position * control.width : 0)
          y: control.topPadding + (horizontal ? 0 : control.position * control.height)
          width: horizontal ? control.size * control.availableWidth : implicitWidth
          height: horizontal ? implicitHeight : control.size * control.availableHeight

          states: State {
              name: "active"
              when: control.active
              PropertyChanges { target: indicator; opacity: 0.75 }
          }

          transitions: [
              Transition {
                  from: "active"
                  SequentialAnimation {
                      PauseAnimation { duration: 450 }
                      NumberAnimation { target: indicator; duration: 200; property: "opacity"; to: 0.0 }
                  }
              }
          ]
      }

## Customizing Slider

Slider consists of three visual items: background, track and handle.

#### Background

Slider has no background item by default.

#### Track

      track: Rectangle {
          x: control.leftPadding + (horizontal ? 0 : (control.availableWidth - width) / 2)
          y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : 0)
          implicitWidth: horizontal ? 200 : 6
          implicitHeight: horizontal ? 6 : 200
          width: horizontal ? control.availableWidth : implicitWidth
          height: horizontal ? implicitHeight : control.availableHeight
          radius: 3
          border.color: "#353637"
          color: "#ffffff"
          scale: horizontal && control.mirrored ? -1 : 1

          readonly property bool horizontal: control.orientation === Qt.Horizontal
      }

#### Handle

      handle: Rectangle {
          x: control.leftPadding + (horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
          y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
          implicitWidth: 28
          implicitHeight: 28
          radius: width / 2
          border.color: "#353637"
          color: control.pressed ? "#bdbebf" : "#f6f6f6"

          readonly property bool horizontal: control.orientation === Qt.Horizontal
      }

## Customizing SpinBox

SpinBox consists of four visual items: background, contentItem, up indicator, and down indicator.

#### Background

      background: Rectangle {
          implicitWidth: 140
          border.color: "#bdbebf"
      }

#### Content item

      contentItem: TextInput {
          text: control.textFromValue(control.value, control.locale)

          font: control.font
          color: "#353637"
          selectionColor: "#fddd5c"
          selectedTextColor: color
          horizontalAlignment: Qt.AlignHCenter
          verticalAlignment: Qt.AlignVCenter

          validator: control.validator
          inputMethodHints: Qt.ImhFormattedNumbersOnly
      }

#### Down indicator

      down.indicator: Rectangle {
          x: control.mirrored ? parent.width - width : 0
          height: parent.height
          implicitWidth: 40
          implicitHeight: 40
          color: down.pressed ? "#e4e4e4" : "#f6f6f6"
          border.color: control.enabled ? "#353637" : "#bdbebf"

          Rectangle {
              x: (parent.width - width) / 2
              y: (parent.height - height) / 2
              width: parent.width / 3
              height: 2
              color: control.enabled ? "#353637" : "#bdbebf"
          }
      }

#### Up indicator

      up.indicator: Rectangle {
          x: control.mirrored ? 0 : parent.width - width
          height: parent.height
          implicitWidth: 40
          implicitHeight: 40
          color: up.pressed ? "#e4e4e4" : "#f6f6f6"
          border.color: control.enabled ? "#353637" : "#bdbebf"

          Rectangle {
              x: (parent.width - width) / 2
              y: (parent.height - height) / 2
              width: parent.width / 3
              height: 2
              color: control.enabled ? "#353637" : "#bdbebf"
          }
          Rectangle {
              x: (parent.width - width) / 2
              y: (parent.height - height) / 2
              width: 2
              height: parent.width / 3
              color: control.enabled ? "#353637" : "#bdbebf"
          }
      }

## Customizing StackView

StackView can have a visual background item, and it allows customizing the transitions that are used for push, pop, and replace operations.

#### Push enter

      pushEnter: Transition {
          XAnimator { from: (root.mirrored ? -1 : 1) * root.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
      }

#### Push exit

      pushExit: Transition {
          XAnimator { from: 0; to: (root.mirrored ? -1 : 1) * -root.width; duration: 400; easing.type: Easing.OutCubic }
      }

#### Pop enter

      popEnter: Transition {
          XAnimator { from: (root.mirrored ? -1 : 1) * -root.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
      }

#### Pop exit

      popExit: Transition {
          XAnimator { from: 0; to: (root.mirrored ? -1 : 1) * root.width; duration: 400; easing.type: Easing.OutCubic }
      }

#### Replace enter

      replaceEnter: Transition {
          XAnimator { from: (root.mirrored ? -1 : 1) * root.width; to: 0; duration: 400; easing.type: Easing.OutCubic }
      }

#### Replace exit

      replaceExit: Transition {
          XAnimator { from: 0; to: (root.mirrored ? -1 : 1) * -root.width; duration: 400; easing.type: Easing.OutCubic }
      }

## Customizing SwipeView

SwipeView can have a visual background item. The navigation is implemented by the content item.

#### Background

SwipeView has no background item by default.

#### Content item

      contentItem: ListView {
          model: control.contentModel
          currentIndex: control.currentIndex

          spacing: control.spacing
          orientation: Qt.Horizontal
          snapMode: ListView.SnapOneItem
          boundsBehavior: Flickable.StopAtBounds

          highlightRangeMode: ListView.StrictlyEnforceRange
          preferredHighlightBegin: 0
          preferredHighlightEnd: 0
          highlightMoveDuration: 250
      }

## Customizing Switch

Switch consists of three visual items: background, label and indicator.

#### Background

Switch has no background item by default.

#### Label

      label: Text {
          x: control.mirrored ? control.leftPadding : (indicator.x + indicator.width + control.spacing)
          y: control.topPadding
          width: control.availableWidth - indicator.width - control.spacing
          height: control.availableHeight

          text: control.text
          font: control.font
          color: control.enabled ? "#26282a" : "#bdbebf"
          elide: Text.ElideRight
          visible: control.text
          horizontalAlignment: Text.AlignLeft
          verticalAlignment: Text.AlignVCenter
      }

#### Indicator

      indicator: Item {
          x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
          y: control.topPadding + (control.availableHeight - height) / 2
          implicitWidth: 56
          implicitHeight: 28

          Rectangle {
              y: parent.height / 2 - height / 2
              width: 56
              height: 16
              radius: 8
              border.width: 1
              color: control.checked ? "#353637" : "transparent"
              border.color: control.checked ? "transparent" : "#353637"
          }

          Rectangle {
              x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
              y: (parent.height - height) / 2
              width: 28
              height: 28
              radius: 16
              color: control.pressed ? "#e4e4e4" : "#f6f6f6"
              border.width: 1
              border.color: control.pressed ? "#26282a" : "#353637"

              Behavior on x {
                  enabled: !control.pressed
                  SmoothedAnimation { velocity: 200 }
              }
          }
      }

## Customizing TabBar

TODO

## Customizing TabButton

TODO

## Customizing TextArea

TODO

## Customizing TextField

TextField offers a customizable background item.

#### Background

      background: Rectangle {
          implicitWidth: 200
          implicitHeight: 40
      //        border.width: control.activeFocus ? 2 : 1
          color: control.enabled ? "transparent" : "#353637"
          border.color: control.enabled ? "#bdbebf" : "transparent"
      }

## Customizing ToolBar

ToolBar consists of two visual items: background and frame.

#### Background

      background: Rectangle {
          implicitHeight: 40
          color: "#eeeeee"
      }

#### Frame

ToolBar has no frame item by default.

## Customizing ToolButton

ToolButton consists of two visual items: background and label.

#### Background

      background: Rectangle {
          implicitWidth: 40
          implicitHeight: 40

          color: Qt.darker("#33333333", control.enabled && (control.checked || control.highlighted) ? 1.5 : 1.0)
          opacity: control.pressed ? 1.0 : control.enabled && (control.checked || control.highlighted) ? 0.5 : 0
          visible: control.pressed || (control.enabled && (control.checked || control.highlighted))
      }

#### Label

      label: Text {
          x: control.leftPadding
          y: control.topPadding
          width: control.availableWidth
          height: control.availableHeight

          text: control.text
          font: control.font
          color: control.enabled ? "#26282a" : "#c2c2c2"
          elide: Text.ElideRight
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: Text.AlignVCenter
      }

## Customizing Tumbler

Tumbler consists of three visual items: background, contentItem, and delegate.

#### Background

Tumbler has no background item by default.

#### Content Item

      contentItem: PathView {
          id: pathView
          model: control.model
          delegate: control.delegate
          clip: true
          pathItemCount: control.visibleItemCount + 1
          preferredHighlightBegin: 0.5
          preferredHighlightEnd: 0.5
          dragMargin: width / 2

          path: Path {
              startX: pathView.width / 2
              startY: -pathView.delegateHeight / 2
              PathLine {
                  x: pathView.width / 2
                  y: pathView.pathItemCount * pathView.delegateHeight - pathView.delegateHeight / 2
              }
          }

          property real delegateHeight: control.availableHeight / control.visibleItemCount
      }

#### Delegate

      delegate: Text {
          id: label
          text: modelData
          color: "#666666"
          font: control.font
          opacity: 0.4 + Math.max(0, 1 - Math.abs(Tumbler.displacement)) * 0.6
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: Text.AlignVCenter
      }