ItemSelector QML Type
ListItem 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.ListItems 1.0 |
Inherits: |
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.ListItems 1.0 as ListItem Column { anchors.left: parent.left anchors.right: parent.right spacing: units.gu(3) ListItem.ItemSelector { text: i18n.tr("Label") model: [i18n.tr("Value 1"), i18n.tr("Value 2"), i18n.tr("Value 3"), i18n.tr("Value 4")] } ListItem.ItemSelector { text: i18n.tr("Label") expanded: true model: [i18n.tr("Value 1"), i18n.tr("Value 2"), i18n.tr("Value 3"), i18n.tr("Value 4")] } ListItem.ItemSelector { text: i18n.tr("Multiple Selection") alwaysExpanded: false expanded: true model: [i18n.tr("Value 1"), i18n.tr("Value 2"), i18n.tr("Value 3"), i18n.tr("Value 4")] } ListItem.ItemSelector { text: i18n.tr("Label") model: customModel expanded: true colourImage: true delegate: selectorDelegate } Component { id: selectorDelegate Toolkit.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" } } ListItem.ItemSelector { 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 } ListItem.ItemSelector { 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.
model : var |
The list of values that will be shown under the label text. This is a model.