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"

       listView.bottomMargin: nativeUtils.safeAreaInsets.bottom
       listView.anchors.rightMargin: sectionSelect.width

       // 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,
               // For section display in list
               section: "Section: " + String.fromCharCode(65 + i),
               // Only for SectionSelect, the actual sections all start with 'Section ...'
               letter: String.fromCharCode(65 + i)
             }
             model.push(entry)
           }
         }
         return model
       }
       delegate: SimpleRow { }

       // Activate sections
       section.property: "section"

       SectionSelect {
         id: sectionSelect
         anchors.right: parent.right
         target: listPage.listView
         sectionProperty: "letter"
         bottomMargin: nativeUtils.safeAreaInsets.bottom
       }
     }
   }
 }

Property Documentation

bottomMargin : real

Add additional bottom margin below the last section. This can be used to respect the bottom safe area on mobile devices. The default value is 0.

This property was introduced in Felgo 3.9.0.


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