Displays page indicators and allows switching to the previous or next page. More...

Import Statement: import Felgo 3.0
Since: Felgo 2.7.0




Detailed Description

The PageControl displays page indicators for a number of pages and highlights the currently active page. Page does not essentially refer to the Page component in this context.

In addition to the default page indicators, it is also possible to display icons or a custom indicator item.

This example shows a PageControl together with a SwipeView, to show the number of pages and which one is currently selected:

 import Felgo 3.0
 import QtQuick 2.0
 import QtQuick.Controls 2.3 as QQC2

 App {

   NavigationStack {

     Page {
       id: page
       title: "Page Control"

       QQC2.SwipeView {
         id: view

         currentIndex: 0
         anchors.fill: parent

         Rectangle {
             id: firstPage
             width: page.width
             height: page.height
             color: "#ccc"
         Rectangle {
             id: secondPage
             width: page.width
             height: page.height
             color: "#ddd"
         Rectangle {
             id: thirdPage
             width: page.width
             height: page.height
             color: "#eee"

       PageControl {
         pages: 3
         anchors.bottom: parent.bottom
         anchors.bottomMargin: dp(10)
         currentPage: view.currentIndex

Property Documentation

activeTintColor : color

The color of the active page indicator. The default value is Theme::tintColor.

backgroundColor : color

The background color of the page control area. The default color is transparent.

clickableIndicator : bool

Whether the page indicators can be clicked to directly activate this page. Deactivated by default.

Note: This feature only works if the default indicatorDelegate is used.

This property was introduced in Felgo 2.10.0.

currentPage : int

hidesForSinglePage : bool

Allows to hide the control whenever there's only one page. Deactivated by default.

iconIndicatorSize : real

The size of page indicator icons. The default value is based on the chosen indicatorSize.

See also indicatorSize.

indicatorDelegate : alias

Allows to set a custom delegate for the page indicator item. The following example uses a Text item that displays the page number.

 PageControl {
   id: pageControl
   pages: 5
   indicatorSize: dp(12)
   indicatorDelegate: Text {
     font.pixelSize: pageControl.indicatorSize
     text: "#"+index
     color: pageControl.currentPage === index ? pageControl.activeTintColor : pageControl.tintColor

indicatorSize : real

The size of each page indicator. The default is 8 dp.

See also iconIndicatorSize.

loopPages : bool

Whether it is possible indefinitely switch through the pages. If the last page is active a call to PageControl::nextPage opens the first page again.

pageIcons : var

Allows to display icons as the page indicator for certain pages. The pages are addressed based on their index:

 PageControl {
   pages: 5
   pageIcons: ({
     2: IconType.home

This example displays a page control for five pages. The first page uses the "search" icon, the third page the "home" icon.

pages : int

The number of page indicators the control displays. The default value is 1.

spacing : real

The horizontal spacing between page indicators. The default value is 8 dp.

tintColor : color

The color of page indicators. The default is Theme::tintLightColor.

Signal Documentation

pageSelected(int = index)

Fires when the currently active page is changed by the user.

Method Documentation

addPage( = index)

Adds a page at the given index. If no index is specified, the function adds the page at the end. The configured pageIcons setting is also modified to match the changed page index values.

See also PageControl::removePage and PageControl::pages.

getIndicatorItem( = index)

Returns the indicator Item for the page with the given index.

See also PageControl::indicatorDelegate.


Marks the next page as active.

See also PageControl::currentPage, PageControl::previousPage, and PageControl::setPage.


Marks the previous page as active.

See also PageControl::currentPage, PageControl::nextPage, and PageControl::setPage.

removePage( = index)

Removes the page at the given index. If no index is specified, the function removes the last page. The configured pageIcons setting is also modified to match the changed page index values.

See also PageControl::addPage and PageControl::pages.

setPage( = index)

Sets the PageControl to activate a certain page.

See also PageControl::currentPage, PageControl::previousPage, and PageControl::nextPage.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support