Tour Preview

Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!


A control that allows to jump to specific sections of a ListView. More...

Import Statement: import Felgo 3.0
Since: Felgo 2.9.2


Detailed Description

The SectionSelect control provides a side-bar that allows to alphabetically jump to the corresponding sections of a ListView. The side-bar has a native look on iOS & Android and takes the Theme colors into account.

iOS Android

Example Usage

 import Felgo 3.0

 App {
   NavigationStack {

     ListPage {
       id: listPage
       title: "SectionSelect Example"

       // add dummy entries for list page
       model: {
         var model = []
         for(var i = 0; i < 26; i++) {
           for(var j = 0; j < 5; j++) {
             var entry = {
               text: String.fromCharCode(65 + i) + " " + j,
               section: "Section: "+String.fromCharCode(65 + i), // for section display in list
               letter: String.fromCharCode(65 + i) // only for SectionSelect, the actual sections all start with 'Section ...'
         return model
       delegate: SimpleRow { }

       // activate sections "section"

       // add section select
       SectionSelect {
         id: sectionSelect
         anchors.right: parent.right
         target: listPage.listView
         sectionProperty: "letter"
     } // ListPage


Property Documentation

sectionProperty : string

The name of the section property within the target ListView's model. The target is used by default. Using a custom section property for the SectionSelect allows to use different sections for the SectionSelect control and the actual sections displayed in the ListView.

target : ListView

The target ListView of the SectionSelect control. The SectionSelect will read the target's model data and move the list to the chosen section when clicked.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded