ItemSelector
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...
Properties
- colourImage : bool (preliminary)
- containerHeight : real (preliminary)
- 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.ListItems 0.1 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; icon: 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
This documentation is under development and is subject to change.
Colours image according to the fieldText colour of the theme, otherwise source colour is maintained.
This documentation is under development and is subject to change.
Custom height for list container which allows scrolling inside the selector.
This documentation is under development and is subject to change.
ListView delegate.
This documentation is under development and is subject to change.
Specifies whether the list is always alwaysExpanded.
This documentation is under development and is subject to change.
The list of values that will be shown under the label text. This is a model.
This documentation is under development and is subject to change.
If the list is alwaysExpanded, multiple choice selection is enabled.