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

Properties

Signals

Detailed Description

This component is under heavy development.

Examples:

import Ubuntu.Components 0.1
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; 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" }
    }

    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

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.


containerHeight : real

This documentation is under development and is subject to change.

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


read-onlyexpanded : bool

Is our list currently expanded?


delegate : Component

This documentation is under development and is subject to change.

ListView delegate.


expanded : bool

This documentation is under development and is subject to change.

Specifies whether the list is always expanded.


read-onlyitemHeight : real

Height of an individual list item.


model : var

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.


multiSelection : bool

This documentation is under development and is subject to change.

If the list is expanded, multiple choice selection is enabled.


selectedIndex : int

The index of the currently selected element in our list.


Signal Documentation

OptionSelector::delegateClicked(int index)

Called when delegate is clicked.


OptionSelector::expansionCompleted()

Called when the selector has finished expanding or collapsing.