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...

Properties

• colourImage : bool
• containerHeight : real
• currentlyExpanded : bool
• delegate : Component
• expanded : bool
• itemHeight : real
• model : var
• multiSelection : bool
• selectedIndex : int

Signals

• delegateClicked(int index)
• expansionCompleted()

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

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

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

Is our list currently expanded?

ListView delegate.

Specifies whether the list is always expanded.

Height of an individual list item.

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

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

The index of the currently selected element in our list.

Signal Documentation

Called when delegate is clicked.

Called when the selector has finished expanding or collapsing.