Displays page indicators and allows switching to the previous or next page. More...
| Import Statement: | import Felgo 4.0 |
| Since: | Felgo 2.7.0 |
| Inherits: |
The PageControl displays page indicators for a number of pages and highlights the currently active page. Page does not essentially refer to the AppPage 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 import QtQuick import QtQuick.Controls as QQC2 App { NavigationStack { AppPage { 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 } } } }
|
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.
|
[since Felgo 2.10.0] 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 |
The index of the currently active page. The default value is 0.
See also PageControl::previousPage, PageControl::nextPage, PageControl::setPage, PageControl::removePage, PageControl::addPage, and PageControl::getIndicatorItem.
|
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: ({ 0: IconType.search, 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.
|
pageSelected(int index) |
Fires when the currently active page is changed by the user.
Note: The corresponding handler is onPageSelected.
|
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.
|
nextPage() |
Marks the next page as active.
See also PageControl::currentPage, PageControl::previousPage, and PageControl::setPage.
|
previousPage() |
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.
