# 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 Lomiri.Components.ListItems 1.3

- List of all members, including inherited members

## Properties

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

## Signals

- delegateClicked(int)
- delegateClicked(int)
- expansionCompleted()
- expansionCompleted()

## Detailed Description

Examples:

    import Lomiri.Components.ListItems 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
            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

colourImage : bool

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

containerHeight : real

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

currentlyExpanded : bool

Is our list currently expanded?

delegate : Component

ListView delegate.

expanded : bool

Specifies whether the list is always expanded.

[read-only] itemHeight : real

Height of an individual list item.

model : var

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

multiSelection : bool

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

Note: The corresponding handler is `onDelegateClicked`.

delegateClicked(int = index)

Called when delegate is clicked.

Note: The corresponding handler is `onDelegateClicked`.

expansionCompleted()

Called when the selector has finished expanding or collapsing.

Note: The corresponding handler is `onExpansionCompleted`.

expansionCompleted()

Called when the selector has finished expanding or collapsing.

Note: The corresponding handler is `onExpansionCompleted`.