• Home
• Felgo
• SimpleSection

SimpleSection

A ListView delegate item for displaying sections in a list view. More...

• List of all members, including inherited members

Properties

• style : StyleSimpleSection
• textItem : alias
• title : string

Signals

• selected(string section)

Detailed Description

SimpleSection is a simple item intended to be used for the ListView::section.delegate property.

It displays the title of the current section in a row, that uses colors based on the Theme configuration.

When using a ListPage, the ListView::section.delegate property is automatically set to SimpleSection.

Default Usage

The property ListView::section.property may be used to specify the property of the ListView::model data that contains the section. The SimpleSection then automatically displays the content of the section property as the title of the section.

 AppListView {
   model: ListModel {
     ListElement { type: "Fruits"; name: "Banana" }
     ListElement { type: "Fruits"; name: "Apple" }
     ListElement { type: "Vegetables"; name: "Potato" }
   }
   delegate: SimpleRow { text: name }

   section.property: "type"
   section.delegate: SimpleSection { }
 }

Advanced Usage

The displayed section title may also be set manually. Within the section delegate, three attached properties are available per default:

• section - Holds the value of the current section.
• nextSection - Returns the title of the next section.
• previousSection - The previous section.

In addition, it is possible to fully customize the internal Text item with the textItem property. Another feature is to allow click events on sections. The next example creates clickable sections with a custom title.

 AppListView {
   model: ListModel {
     ListElement { type: "Fruits"; name: "Banana" }
     ListElement { type: "Fruits"; name: "Apple" }
     ListElement { type: "Vegetables"; name: "Potato" }
   }
   delegate: SimpleRow { text: name }

   section.property: "type"
   section.delegate: SimpleSection {
     title: "Category: "+section // E.g. "Category: Fruits"
     textItem.horizontalAlignment: Text.AlignHCenter // center text horizontally
     enabled: true // make section clickable
     onSelected: {
       console.log("Section Selected: "+section)
       }
   }
 }

Section Styles

The SimpleSection::style property allows to either change certain styling properties or even set a completely individual style based on the StyleSimpleSection type. By default, there are already two different styles available that are based on the Theme::listSection and Theme::listSectionCompact configuration. Use the property SimpleSection::style.compactStyle to switch between these two default styles. Initially it is set to false.

Property Documentation

Signal Documentation