OptionSelector QML Type
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 Lomiri.Components 1.3 |
Inherits: |
Properties
- colourImage : bool
- containerHeight : real
- count : int
- currentlyExpanded : bool
- delegate : Component
- expanded : bool
- itemHeight : real
- model : var
- multiSelection : bool
- selectedIndex : int
Signals
Detailed Description
Examples:
import Lomiri.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.
This property holds the number of items in the OptionSelector.
Signal Documentation
Called when delegate is clicked.
Note: The corresponding handler is onDelegateClicked
.
Called when the selector has finished expanding or collapsing.
Note: The corresponding handler is onExpansionCompleted
.