Commit 4b0a9aa0 authored by Andrea Bernabei's avatar Andrea Bernabei

[examples] Update components gallery

parent e8cf752a
...@@ -39,13 +39,59 @@ ...@@ -39,13 +39,59 @@
****************************************************************************/ ****************************************************************************/
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Item { Rectangle {
id: root
width: parent.width width: parent.width
height: parent.height height: parent.height
color: "black"
ToolBar {
id: toolbar
anchors.top: parent.top
Rectangle {
id: backButton
width: opacity ? 60 : 0
anchors.left: parent.left
anchors.leftMargin: 20
opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
anchors.verticalCenter: parent.verticalCenter
antialiasing: true
height: 60
radius: 4
color: backmouse.pressed ? "#222" : "transparent"
Behavior on opacity { NumberAnimation{} }
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/navigation_previous_item.png"
}
MouseArea {
id: backmouse
anchors.fill: parent
anchors.margins: -10
onClicked: root.Stack.view.pop()
}
}
Text {
font.pixelSize: 42
Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
x: backButton.x + backButton.width + 20
anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Buttons"
}
}
Item {
anchors.top: toolbar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
Column { Column {
spacing: 40 spacing: 40
anchors.centerIn: parent anchors.centerIn: parent
...@@ -70,7 +116,6 @@ Item { ...@@ -70,7 +116,6 @@ Item {
text: "Go back" text: "Go back"
onClicked: if (stackView) stackView.pop() onClicked: if (stackView) stackView.pop()
} }
}
} }
} }
...@@ -18,19 +18,64 @@ ...@@ -18,19 +18,64 @@
*/ */
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
Item { Rectangle {
id: root id: root
width: parent.width width: parent.width
height: parent.height height: parent.height
color: "black"
property var oldItem property var oldItem
property var newItem property var newItem
SplitView { ToolBar {
id: toolbar
anchors.top: parent.top
Rectangle {
id: backButton
width: opacity ? 60 : 0
anchors.left: parent.left
anchors.leftMargin: 20
opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
anchors.verticalCenter: parent.verticalCenter
antialiasing: true
height: 60
radius: 4
color: backmouse.pressed ? "#222" : "transparent"
Behavior on opacity { NumberAnimation{} }
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/navigation_previous_item.png"
}
MouseArea {
id: backmouse
anchors.fill: parent anchors.fill: parent
anchors.margins: -10
onClicked: root.Stack.view.pop()
}
}
Text {
font.pixelSize: 42
Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
x: backButton.x + backButton.width + 20
anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Live Coding Arena"
}
}
SplitView {
anchors.top: toolbar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
//If we don't wrap ColumnLayout in an Item, the split view doesn't work :/ //If we don't wrap ColumnLayout in an Item, the split view doesn't work :/
Item { Item {
...@@ -160,7 +205,6 @@ Item { ...@@ -160,7 +205,6 @@ Item {
} }
} }
} }
} }
Item { Item {
......
...@@ -43,13 +43,16 @@ ...@@ -43,13 +43,16 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Item { Rectangle {
id: root
width: parent.width width: parent.width
height: parent.height height: parent.height
color: "black"
property real progress: 0 property real progress: 0
SequentialAnimation on progress { SequentialAnimation on progress {
loops: Animation.Infinite loops: Animation.Infinite
...@@ -66,6 +69,49 @@ Item { ...@@ -66,6 +69,49 @@ Item {
} }
} }
ToolBar {
id: toolbar
anchors.top: parent.top
Rectangle {
id: backButton
width: opacity ? 60 : 0
anchors.left: parent.left
anchors.leftMargin: 20
opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
anchors.verticalCenter: parent.verticalCenter
antialiasing: true
height: 60
radius: 4
color: backmouse.pressed ? "#222" : "transparent"
Behavior on opacity { NumberAnimation{} }
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/navigation_previous_item.png"
}
MouseArea {
id: backmouse
anchors.fill: parent
anchors.margins: -10
onClicked: root.Stack.view.pop()
}
}
Text {
font.pixelSize: 42
Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
x: backButton.x + backButton.width + 20
anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Progress Bars"
}
}
Item {
anchors.top: toolbar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
Column { Column {
spacing: 40 spacing: 40
anchors.centerIn: parent anchors.centerIn: parent
...@@ -88,7 +134,7 @@ Item { ...@@ -88,7 +134,7 @@ Item {
value: 1 value: 1
width: 400 width: 400
} }
}
} }
Component { Component {
......
...@@ -43,13 +43,59 @@ ...@@ -43,13 +43,59 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Item { Rectangle {
id: root
width: parent.width width: parent.width
height: parent.height height: parent.height
color: "black"
ToolBar {
id: toolbar
anchors.top: parent.top
Rectangle {
id: backButton
width: opacity ? 60 : 0
anchors.left: parent.left
anchors.leftMargin: 20
opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
anchors.verticalCenter: parent.verticalCenter
antialiasing: true
height: 60
radius: 4
color: backmouse.pressed ? "#222" : "transparent"
Behavior on opacity { NumberAnimation{} }
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/navigation_previous_item.png"
}
MouseArea {
id: backmouse
anchors.fill: parent
anchors.margins: -10
onClicked: root.Stack.view.pop()
}
}
Text {
font.pixelSize: 42
Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
x: backButton.x + backButton.width + 20
anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Sliders"
}
}
Item {
anchors.top: toolbar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
Column { Column {
spacing: 12 spacing: 12
anchors.centerIn: parent anchors.centerIn: parent
...@@ -69,7 +115,7 @@ Item { ...@@ -69,7 +115,7 @@ Item {
style: touchStyle style: touchStyle
value: 1.0 value: 1.0
} }
}
} }
Component { Component {
......
...@@ -43,15 +43,58 @@ ...@@ -43,15 +43,58 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Item { Rectangle {
id: root
width: parent.width width: parent.width
height: parent.height height: parent.height
TabView { color: "black"
ToolBar {
id: toolbar
anchors.top: parent.top
Rectangle {
id: backButton
width: opacity ? 60 : 0
anchors.left: parent.left
anchors.leftMargin: 20
opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
anchors.verticalCenter: parent.verticalCenter
antialiasing: true
height: 60
radius: 4
color: backmouse.pressed ? "#222" : "transparent"
Behavior on opacity { NumberAnimation{} }
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/navigation_previous_item.png"
}
MouseArea {
id: backmouse
anchors.fill: parent anchors.fill: parent
anchors.margins: -10
onClicked: root.Stack.view.pop()
}
}
Text {
font.pixelSize: 42
Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
x: backButton.x + backButton.width + 20
anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Tab Bars"
}
}
TabView {
anchors.top: toolbar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
style: touchStyle style: touchStyle
Tab { Tab {
title: "Buttons" title: "Buttons"
......
...@@ -43,13 +43,16 @@ ...@@ -43,13 +43,16 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.0 //needed for the Stack attached property
import QtQuick.Controls.Nemo 1.0 import QtQuick.Controls.Nemo 1.0
import QtQuick.Controls.Styles.Nemo 1.0 import QtQuick.Controls.Styles.Nemo 1.0
Item { Rectangle {
id: root
width: parent.width width: parent.width
height: parent.height height: parent.height
color: "black"
property real progress: 0 property real progress: 0
SequentialAnimation on progress { SequentialAnimation on progress {
loops: Animation.Infinite loops: Animation.Infinite
...@@ -66,6 +69,49 @@ Item { ...@@ -66,6 +69,49 @@ Item {
} }
} }
ToolBar {
id: toolbar
anchors.top: parent.top
Rectangle {
id: backButton
width: opacity ? 60 : 0
anchors.left: parent.left
anchors.leftMargin: 20
opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
anchors.verticalCenter: parent.verticalCenter
antialiasing: true
height: 60
radius: 4
color: backmouse.pressed ? "#222" : "transparent"
Behavior on opacity { NumberAnimation{} }
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/navigation_previous_item.png"
}
MouseArea {
id: backmouse
anchors.fill: parent
anchors.margins: -10
onClicked: root.Stack.view.pop()
}
}
Text {
font.pixelSize: 42
Behavior on x { NumberAnimation { easing.type: Easing.OutCubic} }
x: backButton.x + backButton.width + 20
anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Text Input"
}
}
Item {
anchors.top: toolbar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
Column { Column {
spacing: 40 spacing: 40
anchors.centerIn: parent anchors.centerIn: parent
...@@ -102,6 +148,8 @@ Item { ...@@ -102,6 +148,8 @@ Item {
readOnly: true readOnly: true
} }
} }
}
Component { Component {
id: touchStyle id: touchStyle
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment