diff options
Diffstat (limited to 'examples/quick/ui-components/scrollbar')
-rw-r--r-- | examples/quick/ui-components/scrollbar/ScrollBar.qml | 74 | ||||
-rw-r--r-- | examples/quick/ui-components/scrollbar/main.qml | 93 | ||||
-rw-r--r-- | examples/quick/ui-components/scrollbar/pics/niagara_falls.jpg | bin | 0 -> 142510 bytes | |||
-rw-r--r-- | examples/quick/ui-components/scrollbar/scrollbar.qmlproject | 16 |
4 files changed, 183 insertions, 0 deletions
diff --git a/examples/quick/ui-components/scrollbar/ScrollBar.qml b/examples/quick/ui-components/scrollbar/ScrollBar.qml new file mode 100644 index 0000000000..a3d0d3841c --- /dev/null +++ b/examples/quick/ui-components/scrollbar/ScrollBar.qml @@ -0,0 +1,74 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: scrollBar + + // The properties that define the scrollbar's state. + // position and pageSize are in the range 0.0 - 1.0. They are relative to the + // height of the page, i.e. a pageSize of 0.5 means that you can see 50% + // of the height of the view. + // orientation can be either Qt.Vertical or Qt.Horizontal + property real position + property real pageSize + property variant orientation : Qt.Vertical + + // A light, semi-transparent background + Rectangle { + id: background + anchors.fill: parent + radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1) + color: "white" + opacity: 0.3 + } + + // Size the bar to the required size, depending upon the orientation. + Rectangle { + x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1) + y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1 + width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2)) + height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2) + radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1) + color: "black" + opacity: 0.7 + } +} diff --git a/examples/quick/ui-components/scrollbar/main.qml b/examples/quick/ui-components/scrollbar/main.qml new file mode 100644 index 0000000000..a7d602b437 --- /dev/null +++ b/examples/quick/ui-components/scrollbar/main.qml @@ -0,0 +1,93 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Rectangle { + width: 640 + height: 480 + + // Create a flickable to view a large image. + Flickable { + id: view + anchors.fill: parent + contentWidth: picture.width + contentHeight: picture.height + + Image { + id: picture + source: "pics/niagara_falls.jpg" + asynchronous: true + } + + // Only show the scrollbars when the view is moving. + states: State { + name: "ShowBars" + when: view.movingVertically || view.movingHorizontally + PropertyChanges { target: verticalScrollBar; opacity: 1 } + PropertyChanges { target: horizontalScrollBar; opacity: 1 } + } + + transitions: Transition { + NumberAnimation { properties: "opacity"; duration: 400 } + } + } + + // Attach scrollbars to the right and bottom edges of the view. + ScrollBar { + id: verticalScrollBar + width: 12; height: view.height-12 + anchors.right: view.right + opacity: 0 + orientation: Qt.Vertical + position: view.visibleArea.yPosition + pageSize: view.visibleArea.heightRatio + } + + ScrollBar { + id: horizontalScrollBar + width: view.width-12; height: 12 + anchors.bottom: view.bottom + opacity: 0 + orientation: Qt.Horizontal + position: view.visibleArea.xPosition + pageSize: view.visibleArea.widthRatio + } +} diff --git a/examples/quick/ui-components/scrollbar/pics/niagara_falls.jpg b/examples/quick/ui-components/scrollbar/pics/niagara_falls.jpg Binary files differnew file mode 100644 index 0000000000..e625c0d3e6 --- /dev/null +++ b/examples/quick/ui-components/scrollbar/pics/niagara_falls.jpg diff --git a/examples/quick/ui-components/scrollbar/scrollbar.qmlproject b/examples/quick/ui-components/scrollbar/scrollbar.qmlproject new file mode 100644 index 0000000000..e5a8bf02ca --- /dev/null +++ b/examples/quick/ui-components/scrollbar/scrollbar.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.1 + +Project { + mainFile: "main.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} |