diff options
Diffstat (limited to 'examples/quick/controls/gallery/content/Styles.qml')
| -rw-r--r-- | examples/quick/controls/gallery/content/Styles.qml | 379 |
1 files changed, 246 insertions, 133 deletions
diff --git a/examples/quick/controls/gallery/content/Styles.qml b/examples/quick/controls/gallery/content/Styles.qml index b5e98f80..e46a9ea0 100644 --- a/examples/quick/controls/gallery/content/Styles.qml +++ b/examples/quick/controls/gallery/content/Styles.qml @@ -45,195 +45,308 @@ import QtQuick 2.1 import QtQuick.Controls 1.0 import QtQuick.Controls.Styles 1.0 -import QtQuick.Dialogs 1.0 +import QtQuick.Particles 2.0 +import QtQuick.Layouts 1.0 Item { id: root width: 300 height: 200 - ColorDialog { - id: colorDialog - color: "#afe" - property color last: "#afe" - onRejected: color = last - onVisibleChanged: if (visible) last = color - } - - Column { - anchors.margins: 20 - anchors.horizontalCenter: parent.horizontalCenter + property int columnWidth: 120 + GridLayout { + rowSpacing: 12 + columnSpacing: 30 anchors.top: parent.top - spacing: 20 + anchors.horizontalCenter: parent.horizontalCenter + anchors.margins: 30 - Row { - spacing: 8 - Button { - text: "Set color…" - style: ButtonStyle { } - onClicked: colorDialog.open() - } - Button { - text: "Push me" - style: ButtonStyle { } - } - Button { - text: "Push me" - style: buttonStyle - } + Button { + text: "Push me" + style: ButtonStyle { } + implicitWidth: columnWidth } - Row { - spacing: 8 - TextField { - style: TextFieldStyle { } - } - TextField { - style: TextFieldStyle { } - } - TextField { - style: textfieldStyle + Button { + text: "Push me" + style: ButtonStyle { + background: BorderImage { + source: control.pressed ? "../images/button-pressed.png" : "../images/button.png" + border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4 + } } + implicitWidth: columnWidth + } + Button { + text: "Push me" + style: buttonStyle + implicitWidth: columnWidth } - Row { - spacing: 8 - Slider { - value: 50 - maximumValue: 100 - width: 100 - style: SliderStyle { } - } - Slider { - value: 50 - maximumValue: 100 - width: 100 - style: SliderStyle { } - } - Slider { - value: 50 - maximumValue: 100 - width: 100 - style: sliderStyle + TextField { + Layout.row: 1 + style: TextFieldStyle { } + implicitWidth: columnWidth + } + TextField { + style: TextFieldStyle { + background: BorderImage { + source: "../images/textfield.png" + border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4 + } } + implicitWidth: columnWidth + } + TextField { + style: textfieldStyle + implicitWidth: columnWidth } - Row { - spacing: 8 - ProgressBar { - value: 50 - maximumValue: 100 - width: 100 - style: ProgressBarStyle{ } - } - ProgressBar { - value: 50 - maximumValue: 100 - width: 100 - style: ProgressBarStyle{ } - } - ProgressBar { - value: 50 - maximumValue: 100 - width: 100 - style: progressbarStyle + Slider { + id: slider1 + Layout.row: 2 + value: 0.5 + implicitWidth: columnWidth + style: SliderStyle { } + } + Slider { + id: slider2 + value: 0.5 + implicitWidth: columnWidth + style: SliderStyle { + groove: BorderImage { + height: 6 + border.top: 1 + border.bottom: 1 + source: "../images/progress-background.png" + border.left: 6 + border.right: 6 + BorderImage { + anchors.verticalCenter: parent.verticalCenter + source: "../images/progress-fill.png" + border.left: 5 ; border.top: 1 + border.right: 5 ; border.bottom: 1 + width: styleData.handlePosition + height: parent.height + } + } + handle: Item { + width: 13 + height: 13 + Image { + anchors.centerIn: parent + source: "../images/slider-handle.png" + } + } } } + Slider { + id: slider3 + value: 0.5 + implicitWidth: columnWidth + style: sliderStyle + } - Row { - spacing: 8 - CheckBox { - text: "CheckBox" - style: CheckBoxStyle{} - } - RadioButton { - style: RadioButtonStyle{} - text: "RadioButton" - } + ProgressBar { + Layout.row: 3 + value: slider1.value + implicitWidth: columnWidth + style: ProgressBarStyle{ } + } + ProgressBar { + value: slider2.value + implicitWidth: columnWidth + style: progressBarStyle + } + ProgressBar { + value: slider3.value + implicitWidth: columnWidth + style: progressBarStyle2 + } - ComboBox { - model: ["Paris", "Oslo", "New York"] - style: ComboBoxStyle{} - } + CheckBox { + text: "CheckBox" + style: CheckBoxStyle{} + Layout.row: 4 + implicitWidth: columnWidth + } + RadioButton { + style: RadioButtonStyle{} + text: "RadioButton" + implicitWidth: columnWidth } - Row { - TabView { - width: 400 - height: 30 - Tab { title: "One" ; Item {}} - Tab { title: "Two" ; Item {}} - Tab { title: "Three" ; Item {}} - Tab { title: "Four" ; Item {}} - style: tabViewStyle - } + ComboBox { + model: ["Paris", "Oslo", "New York"] + style: ComboBoxStyle{} + implicitWidth: columnWidth + } + + TabView { + Layout.row: 5 + Layout.columnSpan: 3 + Layout.fillWidth: true + implicitHeight: 30 + Tab { title: "One" ; Item {}} + Tab { title: "Two" ; Item {}} + Tab { title: "Three" ; Item {}} + Tab { title: "Four" ; Item {}} + style: TabViewStyle {} + } + + TabView { + Layout.row: 6 + Layout.columnSpan: 3 + Layout.fillWidth: true + implicitHeight: 30 + Tab { title: "One" ; Item {}} + Tab { title: "Two" ; Item {}} + Tab { title: "Three" ; Item {}} + Tab { title: "Four" ; Item {}} + style: tabViewStyle } } // Style delegates: property Component buttonStyle: ButtonStyle { - panel: Rectangle { - implicitHeight: 20 - implicitWidth: 100 - color: control.pressed ? "darkGray" : "lightGray" + background: Rectangle { + implicitHeight: 22 + implicitWidth: columnWidth + color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc" antialiasing: true border.color: "gray" radius: height/2 - Text { - anchors.centerIn: parent - text: control.text + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + antialiasing: true + visible: !control.pressed + border.color: "#aaffffff" + radius: height/2 } } } property Component textfieldStyle: TextFieldStyle { background: Rectangle { - implicitWidth: 100 - implicitHeight: 20 + implicitWidth: columnWidth + implicitHeight: 22 color: "#f0f0f0" antialiasing: true border.color: "gray" radius: height/2 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + antialiasing: true + border.color: "#aaffffff" + radius: height/2 + } } } property Component sliderStyle: SliderStyle { handle: Rectangle { - width: 14 - height: 14 + width: 18 + height: 18 color: control.pressed ? "darkGray" : "lightGray" border.color: "gray" antialiasing: true radius: height/2 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + antialiasing: true + border.color: "#eee" + radius: height/2 + } } groove: Rectangle { height: 8 - implicitWidth: 100 - implicitHeight: 20 + implicitWidth: columnWidth + implicitHeight: 22 antialiasing: true - color: "darkGray" - border.color: "gray" + color: "#ccc" + border.color: "#777" radius: height/2 + Rectangle { + anchors.fill: parent + anchors.margins: 1 + color: "transparent" + antialiasing: true + border.color: "#66ffffff" + radius: height/2 + } } } - property Component progressbarStyle: ProgressBarStyle { - panel: Rectangle { - implicitWidth: 100 - implicitHeight: 20 + property Component progressBarStyle: ProgressBarStyle { + background: BorderImage { + source: "../images/progress-background.png" + border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2 + } + progress: Item { + clip: true + BorderImage { + anchors.fill: parent + anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0 + source: "../images/progress-fill.png" + border.left: 10 ; border.right: 10 + Rectangle { + width: 1 + color: "#a70" + opacity: 0.8 + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.bottomMargin: 1 + anchors.right: parent.right + visible: control.value < control.maximumValue + anchors.rightMargin: -parent.anchors.rightMargin + } + } + ParticleSystem{ id: bubbles } + ImageParticle{ + id: fireball + system: bubbles + source: "../images/bubble.png" + opacity: 0.7 + } + Emitter{ + system: bubbles + anchors.bottom: parent.bottom + anchors.margins: 4 + anchors.bottomMargin: -4 + anchors.left: parent.left + anchors.right: parent.right + size: 4 + sizeVariation: 4 + acceleration: PointDirection{ y: -6; xVariation: 3 } + emitRate: 6 * control.value + lifeSpan: 3000 + } + } + } + + property Component progressBarStyle2: ProgressBarStyle { + background: Rectangle { + implicitWidth: columnWidth + implicitHeight: 24 color: "#f0f0f0" border.color: "gray" - antialiasing: true - radius: height/2 + } + progress: Rectangle { + color: "#ccc" + border.color: "gray" Rectangle { - implicitWidth: 100 - implicitHeight: 20 - color: "#f0f0f0" - border.color: "gray" - antialiasing: true - radius: height/2 + color: "transparent" + border.color: "#44ffffff" + anchors.fill: parent + anchors.margins: 1 } } } @@ -250,21 +363,21 @@ Item { } border.color: "#898989" Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" } - } tab: Item { - implicitWidth: image.sourceSize.width + property int totalOverlap: tabOverlap * (control.count - 1) + implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width) implicitHeight: image.sourceSize.height BorderImage { id: image anchors.fill: parent - source: tab.selected ? "../images/tab_selected.png" : "../images/tab.png" - border.left: 50 + source: styleData.selected ? "../images/tab_selected.png" : "../images/tab.png" + border.left: 30 smooth: false - border.right: 50 + border.right: 30 } Text { - text: tab.title + text: styleData.title anchors.centerIn: parent } } |