Ubuntu.Components 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.

Import Statement: import Ubuntu.Components 1.3
Inherits: Empty

Properties

Signals

Detailed Description

Examples:

import Ubuntu.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

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

expansionCompleted()

Called when the selector has finished expanding or collapsing.