Skip to content

Q
qtquickcontrols-nemo
Commit 4b0a9aa0 authored by Andrea Bernabei's avatar Andrea Bernabei
Browse files
Options

[examples] Update components gallery

parent e8cf752a
Hide whitespace changes
Inline Side-by-side
Showing with 364 additions and 92 deletions
examples/touch/content/ButtonPage.qml
View file @ 4b0a9aa0
...@@ -39,38 +39,83 @@ ...@@ -39,38 +39,83 @@
****************************************************************************/ ****************************************************************************/
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
Column { color: "black"
spacing: 40 ToolBar {
anchors.centerIn: parent id: toolbar
anchors.top: parent.top
Button { Rectangle {
property bool isGlacier: Theme.name == "Glacier" id: backButton
anchors.margins: 20 width: opacity ? 60 : 0
text: isGlacier ? "Set Ugly Theme" : "Set Nice Theme" anchors.left: parent.left
onClicked: isGlacier ? Theme.loadFromFile("ugly.json") anchors.leftMargin: 20
: Theme.loadFromFile("glacier.json") 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()
}
} }
Button { Text {
anchors.margins: 20 font.pixelSize: 42
enabled: false Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
text: "Disabled" x: backButton.x + backButton.width + 20
anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Buttons"
} }
}
Button { Item {
anchors.margins: 20 anchors.top: toolbar.bottom
primary: true anchors.left: parent.left
text: "Go back" anchors.right: parent.right
onClicked: if (stackView) stackView.pop() anchors.bottom: parent.bottom
}
Column {
spacing: 40
anchors.centerIn: parent
Button {
property bool isGlacier: Theme.name == "Glacier"
anchors.margins: 20
text: isGlacier ? "Set Ugly Theme" : "Set Nice Theme"
onClicked: isGlacier ? Theme.loadFromFile("ugly.json")
: Theme.loadFromFile("glacier.json")
}
Button {
anchors.margins: 20
enabled: false
text: "Disabled"
}
Button {
anchors.margins: 20
primary: true
text: "Go back"
onClicked: if (stackView) stackView.pop()
}
}
} }
} }
examples/touch/content/LiveCoding.qml
View file @ 4b0a9aa0
...@@ -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
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: "Live Coding Arena"
}
}
SplitView { SplitView {
anchors.fill: parent 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 {
......
examples/touch/content/ProgressBarPage.qml
View file @ 4b0a9aa0
...@@ -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,29 +69,72 @@ Item { ...@@ -66,29 +69,72 @@ Item {
} }
} }
Column { ToolBar {
spacing: 40 id: toolbar
anchors.centerIn: parent anchors.top: parent.top
Rectangle {
ProgressBar { id: backButton
anchors.margins: 20 width: opacity ? 60 : 0
width: 400 anchors.left: parent.left
value: progress 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()
}
} }
ProgressBar { Text {
anchors.margins: 20 font.pixelSize: 42
width: 400 Behavior on x { NumberAnimation { easing.type: Easing.OutCubic } }
value: 1 - progress x: backButton.x + backButton.width + 20
anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Progress Bars"
} }
}
ProgressBar { Item {
anchors.margins: 20 anchors.top: toolbar.bottom
style: touchStyle anchors.left: parent.left
value: 1 anchors.right: parent.right
width: 400 anchors.bottom: parent.bottom
}
Column {
spacing: 40
anchors.centerIn: parent
ProgressBar {
anchors.margins: 20
width: 400
value: progress
}
ProgressBar {
anchors.margins: 20
width: 400
value: 1 - progress
}
ProgressBar {
anchors.margins: 20
style: touchStyle
value: 1
width: 400
}
}
} }
Component { Component {
......
examples/touch/content/SliderPage.qml
View file @ 4b0a9aa0
...@@ -43,33 +43,79 @@ ...@@ -43,33 +43,79 @@
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
Column { color: "black"
spacing: 12 ToolBar {
anchors.centerIn: parent id: toolbar
anchors.top: parent.top
Slider { Rectangle {
anchors.margins: 20 id: backButton
//style: touchStyle width: opacity ? 60 : 0
value: 0 anchors.left: parent.left
} anchors.leftMargin: 20
Slider { opacity: (root.Stack.view && (root.Stack.view.depth > 1)) ? 1 : 0
anchors.margins: 20 anchors.verticalCenter: parent.verticalCenter
//style: touchStyle antialiasing: true
value: 0.5 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()
}
} }
Slider {
anchors.margins: 20 Text {
style: touchStyle font.pixelSize: 42
value: 1.0 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 {
spacing: 12
anchors.centerIn: parent
Slider {
anchors.margins: 20
//style: touchStyle
value: 0
}
Slider {
anchors.margins: 20
//style: touchStyle
value: 0.5
}
Slider {
anchors.margins: 20
style: touchStyle
value: 1.0
}
}
} }
Component { Component {
......
examples/touch/content/TabBarPage.qml
View file @ 4b0a9aa0
...@@ -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
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: "Tab Bars"
}
}
TabView { TabView {
anchors.fill: parent 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"
......
examples/touch/content/TextInputPage.qml
View file @ 4b0a9aa0
...@@ -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,42 +69,87 @@ Item { ...@@ -66,42 +69,87 @@ Item {
} }
} }
Column { ToolBar {
spacing: 40 id: toolbar
anchors.centerIn: parent anchors.top: parent.top
Rectangle {
TextField { id: backButton
anchors.margins: 20 width: opacity ? 60 : 0
text: "Text input" anchors.left: parent.left
//style: touchStyle 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()
}
} }
TextField { Text {
anchors.margins: 20 font.pixelSize: 42
text: "Readonly Text input" Behavior on x { NumberAnimation { easing.type: Easing.OutCubic} }
//style: touchStyle x: backButton.x + backButton.width + 20
readOnly: true anchors.verticalCenter: parent.verticalCenter
color: "white"
text: "Text Input"
} }
}
TextField { Item {
anchors.margins: 20 anchors.top: toolbar.bottom
text: "Disabled textfield" anchors.left: parent.left
enabled: false anchors.right: parent.right
} anchors.bottom: parent.bottom
TextField { Column {
anchors.margins: 20 spacing: 40
text: "Text input" anchors.centerIn: parent
style: touchStyle
} TextField {
anchors.margins: 20
text: "Text input"
//style: touchStyle
}
TextField { TextField {
anchors.margins: 20 anchors.margins: 20
text: "Readonly Text input" text: "Readonly Text input"
style: touchStyle //style: touchStyle
readOnly: true readOnly: true
}
TextField {
anchors.margins: 20
text: "Disabled textfield"
enabled: false
}
TextField {
anchors.margins: 20
text: "Text input"
style: touchStyle
}
TextField {
anchors.margins: 20
text: "Readonly Text input"
style: touchStyle
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