src/controls/TabViewPage.qml

0001 import QtQuick
0002 import QtQuick.Controls
0003 import QtQuick.Layouts
0004
0005 import org.mauikit.controls as Maui
0006
0007 DemoPage
0008 {
0009     id: control
0010     title: i18n("TabView")
0011
0012     Maui.SectionGroup
0013     {
0014         title: control.title
0015         spacing: control.spacing
0016
0017         DemoSection
0018         {
0019             title: i18n("TabView")
0020             body: i18n("TabView manages all contents in a swipe view and a created a header with the tab buttons representing each child. You can add items dynamically or declarative. The attached properties to each child item help to give title icon and color to the tab buttons. The tab bar is exposed and any item can be placed using the rightCOntent and leftContent. The tab bar can also be moved to the bottom with the altTab property. An overview can be exposed using the showOverview method. To use a custom tab button delegate you can define the tabButtonComponent, to make it easier you can use the MauiKit TabViewButton.")
0021
0022             sampleText: 'import org.mauikit.controls as Maui
0023 Maui.TabView
0024 {
0025     tabBar.leftContent: Switch
0026     {
0027         text: i18n("Mobile")
0028     }
0029
0030     Rectangle
0031     {
0032         Maui.TabViewInfo.tabTitle: "Tab 1"
0033         color: "pink"
0034     }
0035
0036     Rectangle
0037     {
0038         Maui.TabViewInfo.tabTitle: "Tab 2"
0039         Maui.TabViewInfo.tabIcon:  "love"
0040         color: "blue"
0041     }
0042 }'
0043             column: Maui.TabView
0044             {
0045                 id: _tabView
0046                 Layout.fillWidth: true
0047                 implicitHeight: 600
0048
0049                 tabBar.leftContent: Switch
0050                 {
0051                     text: i18n("Mobile")
0052                     checked: _tabView.mobile
0053                     onToggled: _tabView.mobile = !_tabView.mobile
0054                 }
0055
0056                 Rectangle
0057                 {
0058                     Maui.TabViewInfo.tabTitle: "Tab 1"
0059                     color: "pink"
0060                 }
0061
0062                 Rectangle
0063                 {
0064                     Maui.TabViewInfo.tabTitle: "Tab 2"
0065                     Maui.TabViewInfo.tabIcon:  "love"
0066                     color: "blue"
0067                 }
0068
0069                 Rectangle
0070                 {
0071                     Maui.TabViewInfo.tabTitle: "Tab 3"
0072                     color: "yellow"
0073                 }
0074             }
0075         }
0076     }
0077 }