330 lines
10 KiB
QML
330 lines
10 KiB
QML
|
/****************************************************************************
|
||
|
|
**
|
||
|
|
** Copyright (C) 2016 The Qt Company Ltd.
|
||
|
|
** Contact: https://www.qt.io/licensing/
|
||
|
|
**
|
||
|
|
** This file is part of the Qt Quick Controls module of the Qt Toolkit.
|
||
|
|
**
|
||
|
|
** $QT_BEGIN_LICENSE:LGPL$
|
||
|
|
** Commercial License Usage
|
||
|
|
** Licensees holding valid commercial Qt licenses may use this file in
|
||
|
|
** accordance with the commercial license agreement provided with the
|
||
|
|
** Software or, alternatively, in accordance with the terms contained in
|
||
|
|
** a written agreement between you and The Qt Company. For licensing terms
|
||
|
|
** and conditions see https://www.qt.io/terms-conditions. For further
|
||
|
|
** information use the contact form at https://www.qt.io/contact-us.
|
||
|
|
**
|
||
|
|
** GNU Lesser General Public License Usage
|
||
|
|
** Alternatively, this file may be used under the terms of the GNU Lesser
|
||
|
|
** General Public License version 3 as published by the Free Software
|
||
|
|
** Foundation and appearing in the file LICENSE.LGPL3 included in the
|
||
|
|
** packaging of this file. Please review the following information to
|
||
|
|
** ensure the GNU Lesser General Public License version 3 requirements
|
||
|
|
** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
|
||
|
|
**
|
||
|
|
** GNU General Public License Usage
|
||
|
|
** Alternatively, this file may be used under the terms of the GNU
|
||
|
|
** General Public License version 2.0 or (at your option) the GNU General
|
||
|
|
** Public license version 3 or any later version approved by the KDE Free
|
||
|
|
** Qt Foundation. The licenses are as published by the Free Software
|
||
|
|
** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
|
||
|
|
** included in the packaging of this file. Please review the following
|
||
|
|
** information to ensure the GNU General Public License requirements will
|
||
|
|
** be met: https://www.gnu.org/licenses/gpl-2.0.html and
|
||
|
|
** https://www.gnu.org/licenses/gpl-3.0.html.
|
||
|
|
**
|
||
|
|
** $QT_END_LICENSE$
|
||
|
|
**
|
||
|
|
****************************************************************************/
|
||
|
|
|
||
|
|
import QtQuick 2.2
|
||
|
|
import QtQuick.Controls 1.2
|
||
|
|
import QtQuick.Controls.Private 1.0
|
||
|
|
|
||
|
|
/*!
|
||
|
|
\qmltype TabView
|
||
|
|
\inqmlmodule QtQuick.Controls
|
||
|
|
\since 5.1
|
||
|
|
\ingroup views
|
||
|
|
\ingroup controls
|
||
|
|
\brief A control that allows the user to select one of multiple stacked items.
|
||
|
|
|
||
|
|
\image tabview.png
|
||
|
|
|
||
|
|
TabView provides tab-based navigation model for your application.
|
||
|
|
For example, the following snippet uses tabs to present rectangles of
|
||
|
|
different color on each tab page:
|
||
|
|
|
||
|
|
\qml
|
||
|
|
TabView {
|
||
|
|
Tab {
|
||
|
|
title: "Red"
|
||
|
|
Rectangle { color: "red" }
|
||
|
|
}
|
||
|
|
Tab {
|
||
|
|
title: "Blue"
|
||
|
|
Rectangle { color: "blue" }
|
||
|
|
}
|
||
|
|
Tab {
|
||
|
|
title: "Green"
|
||
|
|
Rectangle { color: "green" }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
\endqml
|
||
|
|
|
||
|
|
\note You can create a custom appearance for a TabView by
|
||
|
|
assigning a \l {TabViewStyle}.
|
||
|
|
|
||
|
|
\l Tab represents the content of a tab in a TabView.
|
||
|
|
*/
|
||
|
|
|
||
|
|
FocusScope {
|
||
|
|
id: root
|
||
|
|
|
||
|
|
implicitWidth: 240
|
||
|
|
implicitHeight: 150
|
||
|
|
|
||
|
|
/*! The current tab index */
|
||
|
|
property int currentIndex: 0
|
||
|
|
|
||
|
|
/*! The current tab count */
|
||
|
|
readonly property int count: __tabs.count
|
||
|
|
|
||
|
|
/*! The visibility of the tab frame around contents */
|
||
|
|
property bool frameVisible: true
|
||
|
|
|
||
|
|
/*! The visibility of the tab bar */
|
||
|
|
property bool tabsVisible: true
|
||
|
|
|
||
|
|
/*!
|
||
|
|
\qmlproperty enumeration TabView::tabPosition
|
||
|
|
|
||
|
|
\list
|
||
|
|
\li Qt.TopEdge (default)
|
||
|
|
\li Qt.BottomEdge
|
||
|
|
\endlist
|
||
|
|
*/
|
||
|
|
property int tabPosition: Qt.TopEdge
|
||
|
|
|
||
|
|
/*!
|
||
|
|
\qmlproperty Item TabView::contentItem
|
||
|
|
\since QtQuick.Controls 1.3
|
||
|
|
|
||
|
|
This property holds the content item of the tab view.
|
||
|
|
|
||
|
|
Tabs declared as children of a TabView are automatically parented to the TabView's contentItem.
|
||
|
|
*/
|
||
|
|
readonly property alias contentItem: stack
|
||
|
|
|
||
|
|
/*! \internal */
|
||
|
|
default property alias data: stack.data
|
||
|
|
|
||
|
|
/*!
|
||
|
|
\qmlmethod Tab TabView::addTab(string title, Component component)
|
||
|
|
|
||
|
|
Adds a new tab with the given \a title and an optional \a component.
|
||
|
|
|
||
|
|
Returns the newly added tab.
|
||
|
|
*/
|
||
|
|
function addTab(title, component) {
|
||
|
|
return insertTab(__tabs.count, title, component)
|
||
|
|
}
|
||
|
|
|
||
|
|
/*!
|
||
|
|
\qmlmethod Tab TabView::insertTab(int index, string title, Component component)
|
||
|
|
|
||
|
|
Inserts a new tab at \a index, with the given \a title and
|
||
|
|
an optional \a component.
|
||
|
|
|
||
|
|
Returns the newly added tab.
|
||
|
|
*/
|
||
|
|
function insertTab(index, title, component) {
|
||
|
|
var tab = tabcomp.createObject()
|
||
|
|
tab.sourceComponent = component
|
||
|
|
tab.title = title
|
||
|
|
// insert at appropriate index first, then set the parent to
|
||
|
|
// avoid onChildrenChanged appending it to the end of the list
|
||
|
|
__tabs.insert(index, {tab: tab})
|
||
|
|
tab.__inserted = true
|
||
|
|
tab.parent = stack
|
||
|
|
__didInsertIndex(index)
|
||
|
|
__setOpacities()
|
||
|
|
return tab
|
||
|
|
}
|
||
|
|
|
||
|
|
/*! \qmlmethod void TabView::removeTab(int index)
|
||
|
|
Removes and destroys a tab at the given \a index. */
|
||
|
|
function removeTab(index) {
|
||
|
|
var tab = __tabs.get(index).tab
|
||
|
|
__willRemoveIndex(index)
|
||
|
|
__tabs.remove(index, 1)
|
||
|
|
tab.destroy()
|
||
|
|
__setOpacities()
|
||
|
|
}
|
||
|
|
|
||
|
|
/*! \qmlmethod void TabView::moveTab(int from, int to)
|
||
|
|
Moves a tab \a from index \a to another. */
|
||
|
|
function moveTab(from, to) {
|
||
|
|
__tabs.move(from, to, 1)
|
||
|
|
|
||
|
|
if (currentIndex == from) {
|
||
|
|
currentIndex = to
|
||
|
|
} else {
|
||
|
|
var start = Math.min(from, to)
|
||
|
|
var end = Math.max(from, to)
|
||
|
|
if (currentIndex >= start && currentIndex <= end) {
|
||
|
|
if (from < to)
|
||
|
|
--currentIndex
|
||
|
|
else
|
||
|
|
++currentIndex
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*! \qmlmethod Tab TabView::getTab(int index)
|
||
|
|
Returns the \l Tab item at \a index. */
|
||
|
|
function getTab(index) {
|
||
|
|
var data = __tabs.get(index)
|
||
|
|
return data && data.tab
|
||
|
|
}
|
||
|
|
|
||
|
|
/*! \internal */
|
||
|
|
property ListModel __tabs: ListModel { }
|
||
|
|
|
||
|
|
/*! \internal */
|
||
|
|
property Component style: Settings.styleComponent(Settings.style, "TabViewStyle.qml", root)
|
||
|
|
|
||
|
|
/*! \internal */
|
||
|
|
property var __styleItem: loader.item
|
||
|
|
|
||
|
|
onCurrentIndexChanged: __setOpacities()
|
||
|
|
|
||
|
|
/*! \internal */
|
||
|
|
function __willRemoveIndex(index) {
|
||
|
|
// Make sure currentIndex will points to the same tab after the removal.
|
||
|
|
// Also activate the next index if the current index is being removed,
|
||
|
|
// except when it's both the current and last index.
|
||
|
|
if (count > 1 && (currentIndex > index || currentIndex == count -1))
|
||
|
|
--currentIndex
|
||
|
|
}
|
||
|
|
function __didInsertIndex(index) {
|
||
|
|
// Make sure currentIndex points to the same tab as before the insertion.
|
||
|
|
if (count > 1 && currentIndex >= index)
|
||
|
|
currentIndex++
|
||
|
|
}
|
||
|
|
|
||
|
|
function __setOpacities() {
|
||
|
|
for (var i = 0; i < __tabs.count; ++i) {
|
||
|
|
var child = __tabs.get(i).tab
|
||
|
|
child.visible = (i == currentIndex ? true : false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
activeFocusOnTab: false
|
||
|
|
|
||
|
|
Component {
|
||
|
|
id: tabcomp
|
||
|
|
Tab {}
|
||
|
|
}
|
||
|
|
|
||
|
|
TabBar {
|
||
|
|
id: tabbarItem
|
||
|
|
objectName: "tabbar"
|
||
|
|
tabView: root
|
||
|
|
style: loader.item
|
||
|
|
anchors.top: parent.top
|
||
|
|
anchors.left: root.left
|
||
|
|
anchors.right: root.right
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
id: loader
|
||
|
|
z: tabbarItem.z - 1
|
||
|
|
sourceComponent: style
|
||
|
|
property var __control: root
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
id: frameLoader
|
||
|
|
z: tabbarItem.z - 1
|
||
|
|
|
||
|
|
anchors.fill: parent
|
||
|
|
anchors.topMargin: tabPosition === Qt.TopEdge && tabbarItem && tabsVisible ? Math.max(0, tabbarItem.height - baseOverlap) : 0
|
||
|
|
anchors.bottomMargin: tabPosition === Qt.BottomEdge && tabbarItem && tabsVisible ? Math.max(0, tabbarItem.height -baseOverlap) : 0
|
||
|
|
sourceComponent: frameVisible && loader.item ? loader.item.frame : null
|
||
|
|
|
||
|
|
property int baseOverlap: __styleItem ? __styleItem.frameOverlap : 0
|
||
|
|
|
||
|
|
Item {
|
||
|
|
id: stack
|
||
|
|
|
||
|
|
anchors.fill: parent
|
||
|
|
anchors.margins: (frameVisible ? frameWidth : 0)
|
||
|
|
anchors.topMargin: anchors.margins + (style =="mac" ? 6 : 0)
|
||
|
|
anchors.bottomMargin: anchors.margins
|
||
|
|
|
||
|
|
property int frameWidth
|
||
|
|
property string style
|
||
|
|
property bool completed: false
|
||
|
|
|
||
|
|
Component.onCompleted: {
|
||
|
|
addTabs(stack.children)
|
||
|
|
completed = true
|
||
|
|
}
|
||
|
|
|
||
|
|
onChildrenChanged: {
|
||
|
|
if (completed)
|
||
|
|
stack.addTabs(stack.children)
|
||
|
|
}
|
||
|
|
|
||
|
|
function addTabs(tabs) {
|
||
|
|
var tabAdded = false
|
||
|
|
for (var i = 0 ; i < tabs.length ; ++i) {
|
||
|
|
var tab = tabs[i]
|
||
|
|
if (!tab.__inserted && tab.Accessible.role === Accessible.LayeredPane) {
|
||
|
|
tab.__inserted = true
|
||
|
|
// reparent tabs created dynamically by createObject(tabView)
|
||
|
|
tab.parent = stack
|
||
|
|
// a dynamically added tab should also get automatically removed when destructed
|
||
|
|
if (completed)
|
||
|
|
tab.Component.onDestruction.connect(stack.onDynamicTabDestroyed.bind(tab))
|
||
|
|
__tabs.append({tab: tab})
|
||
|
|
tabAdded = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (tabAdded)
|
||
|
|
__setOpacities()
|
||
|
|
}
|
||
|
|
|
||
|
|
function onDynamicTabDestroyed() {
|
||
|
|
for (var i = 0; i < __tabs.count; ++i) {
|
||
|
|
if (__tabs.get(i).tab === this) {
|
||
|
|
__willRemoveIndex(i)
|
||
|
|
__tabs.remove(i, 1)
|
||
|
|
__setOpacities()
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onLoaded: { item.z = -1 }
|
||
|
|
}
|
||
|
|
|
||
|
|
onChildrenChanged: stack.addTabs(root.children)
|
||
|
|
|
||
|
|
states: [
|
||
|
|
State {
|
||
|
|
name: "Bottom"
|
||
|
|
when: tabPosition === Qt.BottomEdge && tabbarItem != undefined
|
||
|
|
PropertyChanges {
|
||
|
|
target: tabbarItem
|
||
|
|
anchors.topMargin: -frameLoader.baseOverlap
|
||
|
|
}
|
||
|
|
AnchorChanges {
|
||
|
|
target: tabbarItem
|
||
|
|
anchors.top: frameLoader.bottom
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|