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 0.1 |
Properties
- colourImage : bool (preliminary)
- containerHeight : real (preliminary)
- currentlyExpanded : bool
- delegate : Component (preliminary)
- expanded : bool (preliminary)
- itemHeight : real
- model : var (preliminary)
- multiSelection : bool (preliminary)
- selectedIndex : int
Signals
- delegateClicked(int index)
- expansionCompleted()
Detailed Description
This component is under heavy development.
Examples:
import Ubuntu.Components 0.1 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 |
This QML property is under development and is subject to change.
Colours image according to the fieldText colour of the theme, otherwise source colour is maintained.
containerHeight : real |
This QML property is under development and is subject to change.
Custom height for list container which allows scrolling inside the selector.
currentlyExpanded : bool |
Is our list currently expanded?
delegate : Component |
This QML property is under development and is subject to change.
ListView delegate.
expanded : bool |
This QML property is under development and is subject to change.
Specifies whether the list is always expanded.
read-onlyitemHeight : real |
Height of an individual list item.
model : var |
This QML property is under development and is subject to change.
The list of values that will be shown under the label text. This is a model.
multiSelection : bool |
This QML property is under development and is subject to change.
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.