diff options
Diffstat (limited to 'examples/declarative/scrollbar/ScrollBar.qml')
| -rw-r--r-- | examples/declarative/scrollbar/ScrollBar.qml | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml new file mode 100644 index 0000000..470a170 --- /dev/null +++ b/examples/declarative/scrollbar/ScrollBar.qml @@ -0,0 +1,26 @@ +<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 'Vertical' or 'Horizontal' + --> + <properties> + <Property name="position"/> + <Property name="pageSize"/> + <Property name="orientation" value="Vertical"/> + </properties> + + <!-- A light, semi-transparent background --> + <Rect id="Background" radius="{orientation == 'Vertical' ? (width/2) : (height/2)}" color="white" opacity="0.3" anchors.fill="{parent}"/> + + <!-- Size the bar to the required size, depending upon the orientation. --> + <Rect opacity="0.6" color="black" + radius="{orientation == 'Vertical' ? (width/2) : (height/2)}" + x="{orientation == 'Vertical' ? 2 : (ScrollBar.position * (ScrollBar.width-4) + 2)}" + y="{orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-4) + 2) : 2}" + width="{orientation == 'Vertical' ? (parent.width-4) : (ScrollBar.pageSize * (ScrollBar.width-4))}" + height="{orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-4)) : (parent.height-4)}" + /> +</Item> |