src/controls.6/TabBar.qml

0001 import QtQuick
0002 import QtQuick.Layouts
0003 import QtQuick.Window
0004
0005 import QtQuick.Controls 2.15 as QQC
0006
0007 import org.mauikit.controls 1.3 as Maui
0008
0009 /**
0010  * @inherit QtQuick.Controls.TabBar
0011  * @brief Tab bar alternative to QQC TabBar, and based on it.
0012  *
0013  *  <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-tabbar.html">This controls inherits from QQC2 TabBar, to checkout its inherited properties refer to the Qt Docs.</a>
0014  *
0015  * Mostly used together with the TabView control.
0016  *
0017  * The layout of this control is divided into three sections: left, middle and right area.
0018  * The middle area is reserved for placing the tab buttons. The right and left side areas can be populated with any child item.
0019  *
0020  * All the child items are expected to be a TabButton or inherit from it. If you need to add an extra button, label or other item, consider adding them using the left and right containerizes.
0021  * @see leftContent
0022  * @see rightContent
0023  *
0024  * @code
0025  * TabBar
0026  * {
0027  *    leftContent: Button
0028  *    {
0029  *        text: "Button1"
0030  *    }
0031  *
0032  *    rightContent: [
0033  *
0034  *        Button
0035  *        {
0036  *            text: "Button2"
0037  *        },
0038  *
0039  *        Button
0040  *        {
0041  *            text: "Button3"
0042  *        }
0043  *    ]
0044  * }
0045  * @endcode
0046  *
0047  * @section notes Notes
0048  *
0049  * The contents of this bar will become flickable/scrollable if the implicit width of the child elements is higher than the available width.
0050  * When using it on a mobile device and a flick/swipe action is performed by the user, a signal will be emitted informing about the tab focused in the view port.
0051  * @see newTabFocused
0052  *
0053  * @note This control supports the attached Controls.showCSD property to display the window control buttons when using CSD.
0054  */
0055 QQC.TabBar
0056 {
0057     id: control
0058
0059     /**
0060      * @brief An alias to manually add elements to the container directly. This is the middle section of the control.
0061      * @property list<QtObject> TabBar::content
0062      */
0063     property alias content : _layout.data
0064
0065     /**
0066      * @brief An alias to add elements to the left area section.
0067      * @property list<QtObject> TabBar::leftContent
0068      */
0069     property alias leftContent: _leftLayout.data
0070
0071     /**
0072      * @brief An alias to add elements to the right area section.
0073      * @property list<QtObject> TabBar::rightContent
0074      */
0075     property alias rightContent: _layout.data
0076
0077     /**
0078      * @brief Whether the control will react to touch events to flick the tabs.
0079      * @property bool TabBar::interactive
0080      */
0081     property alias interactive: _content.interactive
0082
0083     /**
0084      * @brief Whether to display a button which represents the "add new tab" action.
0085      * If this button is clicked a signal is triggered.
0086      * @see newTabClicked
0087      */
0088     property bool showNewTabButton : true
0089
0090     /**
0091      * @brief Whether the tab buttons will be visible or not.
0092      */
0093     property bool showTabs : true
0094
0095     /**
0096      * @brief This signal is emitted when the "add new tab" button has been clicked.
0097      * @see showNewTabButton
0098      */
0099     signal newTabClicked()
0100
0101     /**
0102      * @brief This signal is emitted when a new tab button is focused after a swipe/flick action has been performed.
0103      * To set the new focused tab as the current one, use the index value passed as the argument to the currentIndex property. To make sure the tab is fully visible in the view port you can use the positioning function.
0104      * @see positionViewAtIndex
0105      */
0106     signal newTabFocused(int index)
0107
0108     background: Rectangle
0109     {
0110         color: Maui.Theme.backgroundColor
0111
0112         Behavior on color
0113         {
0114             Maui.ColorTransition{}
0115         }
0116
0117         Loader
0118         {
0119             z: 999
0120
0121             asynchronous: true
0122             width: Maui.Style.iconSizes.medium
0123             height: parent.height
0124             active: !_content.atXEnd && !parent.fits
0125             visible: active
0126
0127             anchors
0128             {
0129                 right: parent.right
0130                 top: parent.top
0131                 bottom: parent.bottom
0132             }
0133
0134             sourceComponent: Maui.EdgeShadow
0135             {
0136                 edge: Qt.RightEdge
0137             }
0138         }
0139
0140         Loader
0141         {
0142             z: 999
0143
0144             asynchronous: true
0145             width: Maui.Style.iconSizes.medium
0146             height: parent.height
0147             active: !_content.atXBeginning && !parent.fits
0148             visible: active
0149             anchors
0150             {
0151                 left: parent.left
0152                 top: parent.top
0153                 bottom: parent.bottom
0154             }
0155
0156             sourceComponent: Maui.EdgeShadow
0157             {
0158                 edge: Qt.LeftEdge
0159             }
0160         }
0161     }
0162
0163     contentItem: Item
0164     {
0165         implicitHeight: _layout.implicitHeight
0166         readonly property bool fits : _content.contentWidth <= width
0167
0168         Item
0169         {
0170             id: _dragHandler
0171             anchors.fill: parent
0172             DragHandler
0173             {
0174                 // enabled: !control.interactive
0175                 //                acceptedDevices: PointerDevice.Mouse
0176                 grabPermissions:  PointerHandler.CanTakeOverFromItems | PointerHandler.CanTakeOverFromHandlersOfDifferentType | PointerHandler.ApprovesTakeOverByAnything
0177                 onActiveChanged: if (active) { control.Window.window.startSystemMove(); }
0178             }
0179         }
0180
0181         RowLayout
0182         {
0183             id: _layout
0184             width: parent.width
0185             spacing: control.spacing
0186
0187             Row
0188             {
0189                 id: _leftLayout
0190                 spacing: control.spacing
0191             }
0192
0193             QQC.ScrollView
0194             {
0195                 Layout.fillWidth: true
0196
0197                 orientation : Qt.Horizontal
0198
0199                 QQC.ScrollBar.horizontal.policy: QQC.ScrollBar.AlwaysOff
0200                 QQC.ScrollBar.vertical.policy: QQC.ScrollBar.AlwaysOff
0201
0202                 contentHeight: availableHeight
0203                 implicitHeight: _content.currentItem ? _content.currentItem.height : 0
0204
0205                 ListView
0206                 {
0207                     id: _content
0208                     opacity: control.showTabs ? 1 : 0
0209                     visible: opacity > 0
0210
0211                     clip: true
0212
0213                     orientation: ListView.Horizontal
0214
0215                     spacing: control.spacing
0216
0217                     model: control.contentModel
0218                     currentIndex: control.currentIndex
0219
0220                     interactive: Maui.Handy.isMobile
0221                     snapMode: ListView.SnapOneItem
0222
0223                     highlightFollowsCurrentItem: true
0224                     highlightMoveDuration: 0
0225                     highlightResizeDuration : 0
0226
0227                     boundsBehavior: Flickable.StopAtBounds
0228                     boundsMovement: Flickable.StopAtBounds
0229
0230                     keyNavigationEnabled : true
0231                     keyNavigationWraps : true
0232
0233                     onMovementEnded:
0234                     {
0235                         const newIndex = indexAt(contentX, contentY)
0236                         control.newTabFocused(newIndex)
0237                     }
0238
0239                     Behavior on opacity
0240                     {
0241                         NumberAnimation
0242                         {
0243                             duration: Maui.Style.units.shortDuration
0244                             easing.type: Easing.InOutQuad
0245                         }
0246                     }
0247                 }
0248             }
0249
0250             Loader
0251             {
0252                 active: control.showNewTabButton
0253                 visible: active
0254                 asynchronous: true
0255
0256                 sourceComponent: QQC.ToolButton
0257                 {
0258                     icon.name: "list-add"
0259                     onClicked: control.newTabClicked()
0260                     flat: true
0261                 }
0262             }
0263
0264             Loader
0265             {
0266                 active: control.Maui.Controls.showCSD === true
0267                 visible: active
0268
0269                 asynchronous: true
0270
0271                 sourceComponent: Maui.WindowControls {}
0272             }
0273         }
0274     }
0275
0276     /**
0277      * @brief Positions the TabButton at the given index to be centered and visible.
0278      */
0279     function positionViewAtIndex(index)
0280     {
0281         _content.positionViewAtIndex(index, ListView.SnapPosition)
0282     }
0283 }