Ubuntu.Components.OptionSelector

Component displaying either a single selected value or expanded multiple choice with an optional image and subtext when not expanded, when expanding it opens a listing of all the possible values for selection with an additional option of always being expanded. If multiple choice is selected the list is expanded automatically. More...

Import Statement: import Ubuntu.Components 1.3
Inherits:

Empty

Properties

Signals

Detailed Description

Examples:

import Ubuntu.Components 1.3
Column {
spacing: units.gu(3)
OptionSelector {
text: i18n.tr("Label")
model: [i18n.tr("Value 1"),
i18n.tr("Value 2"),
i18n.tr("Value 3"),
i18n.tr("Value 4")]
}
OptionSelector {
text: i18n.tr("Label")
expanded: true
model: [i18n.tr("Value 1"),
i18n.tr("Value 2"),
i18n.tr("Value 3"),
i18n.tr("Value 4")]
}
OptionSelector {
objectName: "optionselector_multipleselection"
text: i18n.tr("Multiple Selection")
expanded: false
multiSelection: true
model: [i18n.tr("Value 1"),
i18n.tr("Value 2"),
i18n.tr("Value 3"),
i18n.tr("Value 4")]
}
OptionSelector {
text: i18n.tr("Label")
model: customModel
expanded: true
colourImage: true
delegate: selectorDelegate
}
Component {
id: selectorDelegate
OptionSelectorDelegate { text: name; subText: description; iconSource: image }
}
ListModel {
id: customModel
ListElement { name: "Name 1"; description: "Description 1"; image: "images.png" }
ListElement { name: "Name 2"; description: "Description 2"; image: "images.png" }
ListElement { name: "Name 3"; description: "Description 3"; image: "images.png" }
ListElement { name: "Name 4"; description: "Description 4"; image: "images.png" }
}
OptionSelector {
text: i18n.tr("Label")
model: [i18n.tr("Value 1"),
i18n.tr("Value 2"),
i18n.tr("Value 3"),
i18n.tr("Value 4"),
i18n.tr("Value 5"),
i18n.tr("Value 6"),
i18n.tr("Value 7"),
i18n.tr("Value 8")]
containerHeight: itemHeight  4
}
OptionSelector {
text: i18n.tr("Label")
expanded: true
model: [i18n.tr("Value 1"),
i18n.tr("Value 2"),
i18n.tr("Value 3"),
i18n.tr("Value 4"),
i18n.tr("Value 5"),
i18n.tr("Value 6"),
i18n.tr("Value 7"),
i18n.tr("Value 8")]
containerHeight: itemHeight  4
}
}

Property Documentation

colourImage : bool

Colours image according to the fieldText colour of the theme, otherwise source colour is maintained.


containerHeight : real

Custom height for list container which allows scrolling inside the selector.


currentlyExpanded : bool

Is our list currently expanded?


delegate : Component

ListView delegate.


expanded : bool

Specifies whether the list is always expanded.


[read-only] itemHeight : real

Height of an individual list item.


model : http://doc.qt.io/qt-5/qml-var.html">var

The list of values that will be shown under the label text. This is a model.


multiSelection : bool

If the multiple choice selection is enabled the list is always expanded.


selectedIndex : int

The index of the currently selected element in our list.


Signal Documentation

delegateClicked(int index)

Called when delegate is clicked.


expansionCompleted()

Called when the selector has finished expanding or collapsing.