Sections

Display a list of sections that the user can select. By tapping on a section name the selectedIndex will be updated, and the associated Action is triggered. More...

Import Statement: import Ubuntu.Components 1.3
Since: Ubuntu.Components 1.3
Inherits:

StyledItem

Properties

Detailed Description

Property Documentation

actions : Action

List of actions that represent the sections. The text of each action is displayed as the section name and clicking a section will update the selectedIndex.

When selectedIndex is changed (by user interaction or by setting the value), actions[selectedIndex] will be triggered.

Example:

Sections {
    actions: [
        Action {
            text: "first"
            onTriggered: print("one")
        },
        Action {
            text: "second"
            onTriggered: print("two")
        },
        Action {
            text: "third"
            onTriggered: print("three")
        }
    ]
}

It is strongly recommended to limit the number of sections to two or three. The actions are used as the model for the Sections by default. If no trigger functions need to be specified, model may be used directly without setting the actions property. If both actions and model are set, model overrides the actions.


model : var

The input model for the sections. By default model takes the actions as input, but if no trigger functions need to be specified, it can be simplified to a list of strings naming the sections:

Sections {
    model: [ "one", "two", "three" ]
    onSelectedIndexChanged: {
        print("Selected section " + model[selectedIndex]);
    }
}

selectedIndex : int

The index of the currently selected section in model. The default value is 0 if there is at least 1 section, or -1 for no sections. When the model is changed, selectedIndex is reset to 0 and the first action is triggered. Upon completion of the Sections component, if there is an Action associated with the selected index, that Action will be triggered.