Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

SectionSelect

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

Import Statement: import Felgo 3.0
Since: Felgo 2.9.2
Inherits:

Rectangle

Properties

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 ...'
             }
             model.push(entry)
           }
         }
         return model
       }
       delegate: SimpleRow { }

       // activate sections
       section.property: "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 section.property 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