Add Coffee example

This example shows how to split logic from declarative
the QML and how to design an application using
Qt Quick Designer.

Change-Id: I9c20aa26fcc269530036a4f67aed5a84ba1aa1fd
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
Reviewed-by: Petref Saraci <petref.saraci@qt.io>

40 files changed, 1795 insertions, 0 deletions

diff --git a/doc/src/snippets/coffee/ApplicationFlow.qml b/doc/src/snippets/coffee/ApplicationFlow.qml
new file mode 100644
index 000000000..143f62009
--- /dev/null
+++ b/doc/src/snippets/coffee/ApplicationFlow.qml
@@ -0,0 +1,146 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+import Coffee 1.0
+
+ApplicationFlowForm {
+    id: applicationFlow
+    state: "initial"
+
+    property int animationDuration: 400
+
+    choosingCoffee.brewButtonSelection.onClicked: {
+        applicationFlow.state = "settings"
+        applicationFlow.choosingCoffee.milkSlider.value = applicationFlow.choosingCoffee.sideBar.currentMilk
+        applicationFlow.choosingCoffee.sugarSlider.value = 2
+    }
+
+
+    choosingCoffee.sideBar.onCoffeeSelected: {
+        applicationFlow.state = "selection"
+    }
+
+    choosingCoffee.backButton.onClicked: {
+        applicationFlow.state = "selection"
+    }
+
+    choosingCoffee.brewButton.onClicked: {
+        applicationFlow.state = "empty cup"
+    }
+
+    emptyCup.continueButton.onClicked: {
+        applicationFlow.state = "brewing"
+        brewing.coffeeName = choosingCoffee.sideBar.currentCoffee
+        brewing.start()
+    }
+
+    brewing.onFinished: {
+        finalAnimation.start()
+    }
+
+    SequentialAnimation {
+        id: finalAnimation
+
+        PropertyAction {
+            target: applicationFlow
+            property: "state"
+            value: "finished"
+        }
+
+        PauseAnimation {
+            duration: 1000
+        }
+
+        PropertyAction {
+            target: applicationFlow
+            property: "state"
+            value: "start"
+        }
+
+        PauseAnimation {
+            duration: applicationFlow.animationDuration
+        }
+
+        PauseAnimation {
+            duration: 400
+        }
+
+        PropertyAction {
+            target: applicationFlow
+            property: "state"
+            value: "initial"
+        }
+    }
+
+
+    Behavior on choosingCoffee.x {
+        PropertyAnimation {
+            duration: applicationFlow.animationDuration
+            easing.type: Easing.InOutQuad
+        }
+    }
+
+
+    Behavior on emptyCup.x {
+        PropertyAnimation {
+            duration: applicationFlow.animationDuration
+            easing.type: Easing.InOutQuad
+        }
+    }
+
+    Behavior on brewing.x {
+        PropertyAnimation {
+            duration: applicationFlow.animationDuration
+            easing.type: Easing.InOutQuad
+        }
+    }
+
+}
diff --git a/doc/src/snippets/coffee/ApplicationFlowForm.ui.qml b/doc/src/snippets/coffee/ApplicationFlowForm.ui.qml
new file mode 100644
index 000000000..1844d133b
--- /dev/null
+++ b/doc/src/snippets/coffee/ApplicationFlowForm.ui.qml
@@ -0,0 +1,198 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+import Coffee 1.0
+
+Rectangle {
+    id: root
+    width: Constants.width
+    height: Constants.height
+    property alias choosingCoffee: choosingCoffee
+    property alias brewing: brewing
+    property alias emptyCup: emptyCup
+
+    color: Constants.backgroundColor
+
+    state: intital
+
+    EmptyCupForm {
+        id: emptyCup
+        x: Constants.width
+        y: 0
+    }
+
+    Brewing {
+        id: brewing
+        x: Constants.width * 2
+        y: 0
+    }
+
+    ChoosingCoffee {
+        id: choosingCoffee
+    }
+
+    states: [
+        State {
+            name: "initial"
+        },
+        State {
+            name: "selection"
+
+            PropertyChanges {
+                target: choosingCoffee
+                selected: true
+            }
+        },
+        State {
+            name: "settings"
+
+            PropertyChanges {
+                target: choosingCoffee
+                x: -Constants.leftSideBarWidth
+                selected: false
+                inSettings: true
+            }
+
+            PropertyChanges {
+                target: emptyCup
+                x: Constants.width
+                y: 0
+            }
+
+            PropertyChanges {
+                target: brewing
+                x: Constants.width * 2
+                y: 0
+            }
+        },
+        State {
+            name: "empty cup"
+
+            PropertyChanges {
+                target: emptyCup
+                x: 0
+            }
+
+            PropertyChanges {
+                target: choosingCoffee
+                x: -Constants.width - Constants.leftSideBarWidth
+                inSettings: true
+                selected: false
+            }
+
+            PropertyChanges {
+                target: brewing
+                x: Constants.width
+            }
+        },
+        State {
+            name: "brewing"
+
+            PropertyChanges {
+                target: emptyCup
+                x: -Constants.width
+            }
+
+            PropertyChanges {
+                target: brewing
+                x: 0
+            }
+
+            PropertyChanges {
+                target: choosingCoffee
+                x: -Constants.width * 2 - Constants.leftSideBarWidth
+            }
+        },
+        State {
+            name: "finished"
+
+            PropertyChanges {
+                target: emptyCup
+                x: -Constants.width
+                y: 0
+                visible: false
+            }
+
+            PropertyChanges {
+                target: brewing
+                x: 0
+            }
+
+            PropertyChanges {
+                target: choosingCoffee
+                x: -Constants.leftSideBarWidth - Constants.width
+                questionVisible: true
+                inSettings: true
+            }
+        },
+        State {
+            name: "start"
+
+            PropertyChanges {
+                target: emptyCup
+                x: 0
+                visible: false
+            }
+
+            PropertyChanges {
+                target: brewing
+                x: Constants.width
+                y: 0
+            }
+
+            PropertyChanges {
+                target: choosingCoffee
+                x: 0
+                inSettings: true
+            }
+        }
+    ]
+}
diff --git a/doc/src/snippets/coffee/Brewing.qml b/doc/src/snippets/coffee/Brewing.qml
new file mode 100644
index 000000000..c80972441
--- /dev/null
+++ b/doc/src/snippets/coffee/Brewing.qml
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+
+BrewingForm {
+    id: root
+    function start() {
+        animation.start()
+    }
+
+    signal finished()
+
+    SequentialAnimation {
+        id: animation
+        PauseAnimation {
+            duration: 1500
+        }
+        PropertyAction {
+            target: root
+            property: "state"
+            value: "coffee"
+        }
+        PauseAnimation {
+            duration: 1500
+        }
+        PropertyAction {
+            target: root
+            property: "state"
+            value: "milk"
+        }
+        PauseAnimation {
+            duration: 1500
+        }
+        ScriptAction {
+            script: root.finished()
+        }
+    }
+
+    Behavior on cup.coffeeAmount {
+        PropertyAnimation {
+
+        }
+    }
+
+    Behavior on cup.milkAmount {
+        PropertyAnimation {
+        }
+    }
+}
+
+
diff --git a/doc/src/snippets/coffee/BrewingForm.ui.qml b/doc/src/snippets/coffee/BrewingForm.ui.qml
new file mode 100644
index 000000000..8de3d880a
--- /dev/null
+++ b/doc/src/snippets/coffee/BrewingForm.ui.qml
@@ -0,0 +1,122 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import Coffee 1.0
+
+Item {
+    id: root
+    width: Constants.width
+    height: Constants.height
+    clip: true
+    property string coffeeName: qsTr("Cappucino")
+    property alias cup: cup
+
+    state: "initial state"
+
+    Rectangle {
+        id: rectangle
+        color: Constants.backgroundColor
+        anchors.fill: parent
+
+        CupForm {
+            id: cup
+            x: 256
+            y: 96
+            anchors.horizontalCenterOffset: 150
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            questionVisible: false
+            coffeeLabel: ""
+            showLabels: false
+            milkAmount: 0
+            coffeeAmount: 0
+            sugarAmount: 0
+        }
+    }
+    Text {
+        id: brewLabel
+
+        color: "#ffffff"
+        text: qsTr("Making ") + root.coffeeName
+        anchors.topMargin: Constants.defaultMargin
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.family: Constants.fontFamily
+        wrapMode: Text.WrapAnywhere
+        font.pixelSize: 64
+        font.capitalization: Font.AllUppercase
+    }
+    states: [
+        State {
+            name: "coffee"
+
+            PropertyChanges {
+                target: cup
+                coffeeAmount: 4
+            }
+        },
+        State {
+            name: "milk"
+            PropertyChanges {
+                target: cup
+                milkAmount: 6
+                coffeeAmount: 4
+            }
+
+            PropertyChanges {
+                target: brewLabel
+                text: root.coffeeName + qsTr(" Ready")
+            }
+        }
+    ]
+}
diff --git a/doc/src/snippets/coffee/ChoosingCoffee.ui.qml b/doc/src/snippets/coffee/ChoosingCoffee.ui.qml
new file mode 100644
index 000000000..8b9be8b92
--- /dev/null
+++ b/doc/src/snippets/coffee/ChoosingCoffee.ui.qml
@@ -0,0 +1,235 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import Coffee 1.0
+
+Item {
+    id: root
+
+    width: Constants.width + Constants.leftSideBarWidth
+    height: Constants.height
+
+    property alias milkSlider: milkSlider
+    property alias sugarSlider: sugarSlider
+
+    property alias brewButtonSelection: brewButtonSelection
+    property bool selected: false
+    property alias brewButton: brewButton
+    property alias sideBar: sideBar
+    property alias backButton: backButton
+
+    property alias questionVisible: cup.questionVisible
+
+    property real coffeeAmount: 5
+
+    property bool inSettings: false
+
+    state: "initial state"
+
+    Rectangle {
+        id: rectangle
+        color: Constants.backgroundColor
+        anchors.fill: parent
+    }
+
+    Rectangle {
+        id: rightSideBar
+
+        x: 658
+        y: 0
+        width: Constants.leftSideBarWidth
+        height: 768
+        color: "#eec1a2"
+        visible: false
+        anchors.right: parent.right
+
+        Column {
+            spacing: 32
+            anchors.bottom: brewButton.top
+            anchors.bottomMargin: 100
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Slider {
+                id: milkSlider
+                width: 256
+                height: 48
+
+                to: 10
+                value: 6
+
+                Image {
+                    x: 48
+                    y: -12
+                    source: "images/icons/contents/milk.png"
+                }
+            }
+            Slider {
+                id: sugarSlider
+
+                width: 256
+                height: 48
+                to: 10
+                stepSize: 1
+                value: 0
+
+                Image {
+                    x: 48
+                    y: -12
+                    source: "images/icons/contents/sugar.png"
+                }
+            }
+        }
+
+        NavigationButton {
+            id: brewButton
+
+            text: "Brew"
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            anchors.rightMargin: Constants.defaultMargin
+            anchors.bottomMargin: Constants.defaultMargin
+        }
+    }
+
+    SideBar {
+        id: sideBar
+        width: Constants.leftSideBarWidth
+    }
+
+    states: [
+        State {
+            name: "initial state"
+            when: !root.selected && !root.inSettings
+        },
+        State {
+            name: "selected state"
+            when: root.selected
+
+            PropertyChanges {
+                target: cup
+
+                questionVisible: false
+                visible: true
+            }
+
+            PropertyChanges {
+                target: brewButton
+                visible: true
+            }
+
+            PropertyChanges {
+                target: brewButtonSelection
+                visible: true
+            }
+        },
+        State {
+            name: "settings"
+            when: root.inSettings
+            PropertyChanges {
+                target: cup
+                x: 354
+                y: 0
+                questionVisible: false
+                visible: true
+                milkAmount: milkSlider.value
+                sugarAmount: sugarSlider.value
+            }
+
+            PropertyChanges {
+                target: brewButton
+                visible: true
+            }
+
+            PropertyChanges {
+                target: backButton
+                opacity: 1
+            }
+
+            PropertyChanges {
+                target: rightSideBar
+                visible: true
+            }
+        }
+    ]
+
+    CupForm {
+        id: cup
+        anchors.right: rightSideBar.left
+        anchors.left: sideBar.right
+        visible: true
+        milkAmount: sideBar.currentMilk
+        coffeeAmount: sideBar.currentCoffeeAmount
+        coffeeLabel: sideBar.currentCoffee
+        questionVisible: true
+    }
+    NavigationButton {
+        id: backButton
+        text: "Back"
+        opacity: 0
+        anchors.leftMargin: Constants.defaultMargin
+        anchors.bottom: parent.bottom
+        anchors.left: sideBar.right
+        anchors.bottomMargin: Constants.defaultMargin
+        forward: false
+    }
+
+    NavigationButton {
+        id: brewButtonSelection
+
+        anchors.left: sideBar.right
+        anchors.leftMargin: Constants.defaultMargin
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: Constants.defaultMargin
+        visible: false
+    }
+}
diff --git a/doc/src/snippets/coffee/CoffeeButton.qml b/doc/src/snippets/coffee/CoffeeButton.qml
new file mode 100644
index 000000000..158881b9c
--- /dev/null
+++ b/doc/src/snippets/coffee/CoffeeButton.qml
@@ -0,0 +1,158 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import Coffee 1.0
+
+Image {
+    id: root
+    source: "images/icons/coffees/cappucino.png"
+    signal clicked
+
+    property int duration: 250
+    property alias text: label.text
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: root.clicked()
+        onPressed: {
+            glow.visible = true
+            animation1.start()
+            animation2.start()
+        }
+    }
+
+    Rectangle {
+        id: glow
+        visible: false
+
+        width: 250
+        height: 250
+        color: "#00000000"
+        radius: 125
+        scale: 1.05
+        border.color: "#ffffff"
+    }
+
+    Label {
+        id: label
+        x: 292
+        y: 252
+        text: qsTr("Label")
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: "#443224"
+        font.family: Constants.fontFamily
+        font.pixelSize: 28
+    }
+
+    PropertyAnimation {
+        target: glow
+        id: animation1
+        duration: root.duration
+        loops: 1
+        from: 1.05
+        to: 1.2
+        property: "scale"
+    }
+
+    ParallelAnimation {
+        id: animation2
+        SequentialAnimation {
+            PropertyAnimation {
+                target: glow
+                duration: root.duration
+                loops: 1
+                from: 0.2
+                to: 1.0
+                property: "opacity"
+            }
+            PropertyAnimation {
+                target: glow
+                duration: root.duration
+                loops: 1
+                from: 1.0
+                to: 0.0
+                property: "opacity"
+            }
+
+            PropertyAction {
+                target: glow
+                property: "visible"
+                value: false
+            }
+        }
+
+        SequentialAnimation {
+            PropertyAction {
+                target: glow
+                property: "border.width"
+                value: 20
+            }
+
+            PauseAnimation {
+                duration: 200
+            }
+
+            PropertyAnimation {
+                target: glow
+                duration: root.duration
+                loops: 1
+                from: 20
+                to: 10
+                property: "border.width"
+            }
+        }
+    }
+
+
+
+}
diff --git a/doc/src/snippets/coffee/Cup.qml b/doc/src/snippets/coffee/Cup.qml
new file mode 100644
index 000000000..c950a2efd
--- /dev/null
+++ b/doc/src/snippets/coffee/Cup.qml
@@ -0,0 +1,4 @@
+import QtQuick 2.4
+
+CupForm {
+}
diff --git a/doc/src/snippets/coffee/CupForm.ui.qml b/doc/src/snippets/coffee/CupForm.ui.qml
new file mode 100644
index 000000000..bf82a9ffa
--- /dev/null
+++ b/doc/src/snippets/coffee/CupForm.ui.qml
@@ -0,0 +1,197 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import Coffee 1.0
+
+Item {
+    id: root
+
+    width: 768
+    height: 768
+    property alias questionVisible: question.visible
+    property bool showLabels: true
+    property alias coffeeLabel: cappuccinoLabel.text
+
+    property real sugarAmount: 2
+    property real milkAmount: 4
+    property real coffeeAmount: 4
+
+    Rectangle {
+        id: rectangle
+        color: "#443224"
+        anchors.fill: parent
+
+        Image {
+            id: background
+            x: 12
+            y: 170
+            source: "images/cup structure/cup elements/coffee_cup_back.png"
+        }
+
+        Item {
+            id: foam
+            x: 12
+            width: 457
+            anchors.topMargin: milk.anchors.topMargin - 40
+            anchors.bottom: background.bottom
+            anchors.top: background.top
+            clip: true
+            Image {
+                anchors.bottom: parent.bottom
+                source: "images/cup structure/liquids/liquid_foam.png"
+            }
+        }
+
+        Item {
+            id: milk
+            x: 12
+            width: 457
+            anchors.topMargin: 400 - coffee.height - root.milkAmount * 15 + 20
+            anchors.bottom: background.bottom
+            anchors.top: background.top
+            clip: true
+            Image {
+                source: "images/cup structure/liquids/liquid_milk.png"
+                anchors.bottom: parent.bottom
+            }
+        }
+
+        Item {
+            id: coffee
+            x: 12
+            width: 457
+            height: root.coffeeAmount * 40
+            anchors.bottomMargin: 0
+            anchors.bottom: background.bottom
+            clip: true
+
+            Image {
+                anchors.bottom: parent.bottom
+                source: "images/cup structure/liquids/liquid_coffee.png"
+            }
+        }
+
+        Image {
+            id: cupFront
+            x: 11
+            y: 170
+            source: "images/cup structure/cup elements/coffee_cup_front.png"
+        }
+
+        Text {
+            x: 499
+            y: 370
+            color: "#ffffff"
+            text: qsTr("Hot Milk")
+            font.capitalization: Font.AllUppercase
+            font.family: Constants.fontFamily
+            wrapMode: Text.WrapAnywhere
+            font.pixelSize: 18
+            visible: root.showLabels
+        }
+
+        Text {
+            x: 486
+            y: 468
+            color: "#ffffff"
+            text: qsTr("Espresso Coffee")
+            font.capitalization: Font.AllUppercase
+            font.family: Constants.fontFamily
+            wrapMode: Text.WrapAnywhere
+            font.pixelSize: 18
+            visible: root.showLabels
+        }
+
+        Image {
+            x: 414
+            y: 274
+            visible: root.showLabels
+            source: "images/ui controls/line.png"
+        }
+
+        Text {
+            x: 512
+            y: 259
+            color: "#ffffff"
+            text: qsTr("Milk Foam")
+            font.family: Constants.fontFamily
+            wrapMode: Text.WrapAnywhere
+            font.pixelSize: 18
+            font.capitalization: Font.AllUppercase
+            visible: root.showLabels
+        }
+
+        Image {
+            x: 404
+            y: 382
+            source: "images/ui controls/line.png"
+            visible: root.showLabels
+        }
+
+        Image {
+            x: 388
+            y: 482
+            source: "images/ui controls/line.png"
+            visible: root.showLabels
+        }
+
+        Text {
+            id: cappuccinoLabel
+            color: "#ffffff"
+            text: qsTr("CAPPUCCINO")
+            visible: !question.visible
+            anchors.top: parent.top
+            anchors.topMargin: 32
+            anchors.left: parent.left
+            anchors.leftMargin: Constants.defaultMargin
+            font.family: Constants.fontFamily
+            wrapMode: Text.WrapAnywhere
+            font.pixelSize: 64
+            font.capitalization: Font.AllUppercase
+        }
+
+        Item {
+            id: sugarItem
+            x: 181
+            y: 419
+            width: 119
+            height: 111
+            rotation: -45
+
+            Rectangle {
+                x: 21
+                y: 8
+                width: 48
+                height: 48
+                color: "#ffffff"
+                opacity: root.sugarAmount / 10
+            }
+
+            Rectangle {
+                x: 74
+                y: 40
+                width: 32
+                height: 32
+                color: "#ffffff"
+                visible: root.sugarAmount > 5
+                opacity: root.sugarAmount / 30
+            }
+
+            Rectangle {
+                x: 45
+                y: 62
+                width: 24
+                height: 24
+                color: "#ffffff"
+                opacity: root.sugarAmount / 25
+            }
+        }
+    }
+    Image {
+        id: question
+        y: 170
+        anchors.left: parent.left
+        anchors.leftMargin: 11
+        source: "images/cup structure/coffee_cup_large.png"
+    }
+}
diff --git a/doc/src/snippets/coffee/EmptyCup.qml b/doc/src/snippets/coffee/EmptyCup.qml
new file mode 100644
index 000000000..4d7a3ec52
--- /dev/null
+++ b/doc/src/snippets/coffee/EmptyCup.qml
@@ -0,0 +1,4 @@
+import QtQuick 2.4
+
+EmptyCupForm {
+}
diff --git a/doc/src/snippets/coffee/EmptyCupForm.ui.qml b/doc/src/snippets/coffee/EmptyCupForm.ui.qml
new file mode 100644
index 000000000..c70b3c5ee
--- /dev/null
+++ b/doc/src/snippets/coffee/EmptyCupForm.ui.qml
@@ -0,0 +1,51 @@
+import QtQuick 2.4
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import Coffee 1.0
+
+Item {
+    id: root
+    width: Constants.width
+    height: Constants.height
+    property alias continueButton: continueButton
+
+    state: "initial state"
+
+    Rectangle {
+        id: rectangle
+        color: Constants.backgroundColor
+        anchors.fill: parent
+
+        Image {
+            id: image
+            x: 284
+            y: 174
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            source: "images/cup structure/coffee_cup_outline.png"
+        }
+    }
+
+    Text {
+        id: brewLabel
+        x: 84
+        y: 26
+        color: "#ffffff"
+        text: qsTr("Please insert cup into tray")
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.family: Constants.fontFamily
+        wrapMode: Text.WrapAnywhere
+        font.pixelSize: 64
+        font.capitalization: Font.AllUppercase
+    }
+
+    NavigationButton {
+        id: continueButton
+        x: 324
+        y: 650
+        text: "Continue"
+        anchors.bottomMargin: Constants.defaultMargin
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+    }
+}
diff --git a/doc/src/snippets/coffee/Main.qml b/doc/src/snippets/coffee/Main.qml
new file mode 100644
index 000000000..14488156e
--- /dev/null
+++ b/doc/src/snippets/coffee/Main.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import Coffee 1.0
+
+ApplicationWindow {
+    visible: true
+    width: Constants.width
+    height: Constants.height
+    title: qsTr("Coffee")
+
+    ApplicationFlow {
+    }
+}
diff --git a/doc/src/snippets/coffee/NavigationButton.ui.qml b/doc/src/snippets/coffee/NavigationButton.ui.qml
new file mode 100644
index 000000000..66216e6fd
--- /dev/null
+++ b/doc/src/snippets/coffee/NavigationButton.ui.qml
@@ -0,0 +1,95 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import Coffee 1.0
+
+Row {
+    id: row
+
+    signal clicked
+
+    property alias text: brewLabel.text
+
+    property bool forward: true
+    layoutDirection: row.forward ? Qt.LeftToRight : Qt.RightToLeft
+
+    spacing: 17
+
+    Text {
+        id: brewLabel
+        color: "#ffffff"
+        text: qsTr("Brew Me a CUP")
+        font.family: Constants.fontFamily
+        wrapMode: Text.WrapAnywhere
+        font.pixelSize: 64
+        font.capitalization: Font.AllUppercase
+    }
+
+    Image {
+        id: image
+
+        anchors.verticalCenter: parent.verticalCenter
+        source: row.forward ? "images/ui controls/buttons/go/white.png" : "images/ui controls/buttons/back/white.png"
+        scale: mouseArea.containsMouse ? 1.1 : 1
+        MouseArea {
+            id: mouseArea
+            hoverEnabled: true
+
+            anchors.fill: parent
+            Connections {
+                target: mouseArea
+                onClicked: row.clicked()
+            }
+        }
+    }
+}
diff --git a/doc/src/snippets/coffee/SideBar.qml b/doc/src/snippets/coffee/SideBar.qml
new file mode 100644
index 000000000..285215b46
--- /dev/null
+++ b/doc/src/snippets/coffee/SideBar.qml
@@ -0,0 +1,95 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+
+SideBarForm {
+    id: sideBar
+    property string currentCoffee: qsTr("Cappucino")
+    signal coffeeSelected
+    property real currentMilk: 0
+    property real currentCoffeeAmount: 4
+
+    Behavior on currentMilk {
+         NumberAnimation { duration: 250 }
+    }
+
+    Behavior on currentCoffeeAmount {
+         NumberAnimation { duration: 250 }
+    }
+
+    macchiatoButton.onClicked: {
+        sideBar.currentCoffee = qsTr("Macchiato")
+        sideBar.currentMilk = 1
+        sideBar.currentCoffeeAmount = 4
+        sideBar.coffeeSelected()
+    }
+
+    latteButton.onClicked: {
+        sideBar.currentCoffee = qsTr("Latte")
+        sideBar.currentMilk = 10
+        sideBar.currentCoffeeAmount = 3
+        sideBar.coffeeSelected()
+    }
+
+    espressoButton.onClicked: {
+        sideBar.currentCoffee = qsTr("Espresso")
+        sideBar.currentMilk = 0
+        sideBar.currentCoffeeAmount = 4
+        sideBar.coffeeSelected()
+    }
+
+    cappuccinoButton.onClicked: {
+        sideBar.currentCoffee = qsTr("Cappucino")
+        sideBar.currentMilk = 7
+        sideBar.currentCoffeeAmount = 3.5
+        sideBar.coffeeSelected()
+    }
+}
diff --git a/doc/src/snippets/coffee/SideBarForm.ui.qml b/doc/src/snippets/coffee/SideBarForm.ui.qml
new file mode 100644
index 000000000..adcf0cc1b
--- /dev/null
+++ b/doc/src/snippets/coffee/SideBarForm.ui.qml
@@ -0,0 +1,107 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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.4
+import QtQuick.Layouts 1.3
+
+Flickable {
+    id: flickable
+    x: 0
+    y: 0
+    width: 354
+    height: 768
+
+    property alias macchiatoButton: macchiatoButton
+    property alias latteButton: latteButton
+    property alias espressoButton: espressoButton
+    property alias cappuccinoButton: cappuccinoButton
+
+    contentWidth: 250
+    boundsBehavior: Flickable.StopAtBounds
+    contentHeight: 1506
+    clip: true
+
+    Rectangle {
+        id: background
+        x: 0
+        width: 354
+        height: 1506
+        color: "#eec1a2"
+    }
+
+    ColumnLayout {
+        x: 52
+        y: 0
+        spacing: 64
+
+        CoffeeButton {
+            id: cappuccinoButton
+            text: "Cappuccino"
+        }
+
+        CoffeeButton {
+            id: espressoButton
+            text: "Espresso"
+            source: "images/icons/coffees/Espresso.png"
+        }
+
+        CoffeeButton {
+            id: latteButton
+            text: "Latte"
+            source: "images/icons/coffees/Latte.png"
+        }
+
+        CoffeeButton {
+            id: macchiatoButton
+            text: "Macchiato"
+            source: "images/icons/coffees/Macchiato.png"
+        }
+    }
+}
diff --git a/doc/src/snippets/coffee/coffee.pro b/doc/src/snippets/coffee/coffee.pro
new file mode 100644
index 000000000..0c9dce00b
--- /dev/null
+++ b/doc/src/snippets/coffee/coffee.pro
@@ -0,0 +1,35 @@
+QT += qml quick
+
+CONFIG += c++11
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc
+
+# Additional import path used to resolve QML modules in Qt Creator's code model
+QML_IMPORT_PATH = $$PWD/imports
+
+# Additional import path used to resolve QML modules just for Qt Quick Designer
+QML_DESIGNER_IMPORT_PATH =
+
+# The following define makes your compiler emit warnings if you use
+# any feature of Qt which as been marked deprecated (the exact warnings
+# depend on your compiler). Please consult the documentation of the
+# deprecated API in order to know how to port your code away from it.
+DEFINES += QT_DEPRECATED_WARNINGS
+
+# You can also make your code fail to compile if you use deprecated APIs.
+# In order to do so, uncomment the following line.
+# You can also select to disable deprecated APIs only up to a certain version of Qt.
+#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
+
+# Default rules for deployment.
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target
+
+DISTFILES += \
+    images/ui components/loader/loading bar 1.png \
+    images/ui components/loader/loading bar 2.png \
+    images/ui components/loader/loading bar 3.png \
+    images/ui components/loader/loading bg.png
diff --git a/doc/src/snippets/coffee/images/cup structure/coffee_cup_large.png b/doc/src/snippets/coffee/images/cup structure/coffee_cup_large.png
new file mode 100644
index 000000000..e69889af5
--- /dev/null
+++ b/doc/src/snippets/coffee/images/cup structure/coffee_cup_large.png
diff --git a/doc/src/snippets/coffee/images/cup structure/coffee_cup_outline.png b/doc/src/snippets/coffee/images/cup structure/coffee_cup_outline.png
new file mode 100644
index 000000000..941e0c145
--- /dev/null
+++ b/doc/src/snippets/coffee/images/cup structure/coffee_cup_outline.png
diff --git a/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_back.png b/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_back.png
new file mode 100644
index 000000000..045732cab
--- /dev/null
+++ b/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_back.png
diff --git a/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_coverplate.png b/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_coverplate.png
new file mode 100644
index 000000000..48041c539
--- /dev/null
+++ b/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_coverplate.png
diff --git a/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_front.png b/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_front.png
new file mode 100644
index 000000000..e2c2a7743
--- /dev/null
+++ b/doc/src/snippets/coffee/images/cup structure/cup elements/coffee_cup_front.png
diff --git a/doc/src/snippets/coffee/images/cup structure/liquids/liquid_coffee.png b/doc/src/snippets/coffee/images/cup structure/liquids/liquid_coffee.png
new file mode 100644
index 000000000..0fff3e39d
--- /dev/null
+++ b/doc/src/snippets/coffee/images/cup structure/liquids/liquid_coffee.png
diff --git a/doc/src/snippets/coffee/images/cup structure/liquids/liquid_foam.png b/doc/src/snippets/coffee/images/cup structure/liquids/liquid_foam.png
new file mode 100644
index 000000000..d07496ce2
--- /dev/null
+++ b/doc/src/snippets/coffee/images/cup structure/liquids/liquid_foam.png
diff --git a/doc/src/snippets/coffee/images/cup structure/liquids/liquid_milk.png b/doc/src/snippets/coffee/images/cup structure/liquids/liquid_milk.png
new file mode 100644
index 000000000..3235b4d6b
--- /dev/null
+++ b/doc/src/snippets/coffee/images/cup structure/liquids/liquid_milk.png
diff --git a/doc/src/snippets/coffee/images/icons/coffees/Americano.png b/doc/src/snippets/coffee/images/icons/coffees/Americano.png
new file mode 100644
index 000000000..b1c0c384a
--- /dev/null
+++ b/doc/src/snippets/coffee/images/icons/coffees/Americano.png
diff --git a/doc/src/snippets/coffee/images/icons/coffees/Espresso.png b/doc/src/snippets/coffee/images/icons/coffees/Espresso.png
new file mode 100644
index 000000000..faac7593c
--- /dev/null
+++ b/doc/src/snippets/coffee/images/icons/coffees/Espresso.png
diff --git a/doc/src/snippets/coffee/images/icons/coffees/Latte.png b/doc/src/snippets/coffee/images/icons/coffees/Latte.png
new file mode 100644
index 000000000..d9e4e6164
--- /dev/null
+++ b/doc/src/snippets/coffee/images/icons/coffees/Latte.png
diff --git a/doc/src/snippets/coffee/images/icons/coffees/Macchiato.png b/doc/src/snippets/coffee/images/icons/coffees/Macchiato.png
new file mode 100644
index 000000000..fb7c1c91c
--- /dev/null
+++ b/doc/src/snippets/coffee/images/icons/coffees/Macchiato.png
diff --git a/doc/src/snippets/coffee/images/icons/coffees/cappucino.png b/doc/src/snippets/coffee/images/icons/coffees/cappucino.png
new file mode 100644
index 000000000..d5557e8da
--- /dev/null
+++ b/doc/src/snippets/coffee/images/icons/coffees/cappucino.png
diff --git a/doc/src/snippets/coffee/images/icons/contents/coffee.png b/doc/src/snippets/coffee/images/icons/contents/coffee.png
new file mode 100644
index 000000000..c4b35be19
--- /dev/null
+++ b/doc/src/snippets/coffee/images/icons/contents/coffee.png
diff --git a/doc/src/snippets/coffee/images/icons/contents/milk.png b/doc/src/snippets/coffee/images/icons/contents/milk.png
new file mode 100644
index 000000000..19709cfed
--- /dev/null
+++ b/doc/src/snippets/coffee/images/icons/contents/milk.png
diff --git a/doc/src/snippets/coffee/images/icons/contents/sugar.png b/doc/src/snippets/coffee/images/icons/contents/sugar.png
new file mode 100644
index 000000000..ac83a7f37
--- /dev/null
+++ b/doc/src/snippets/coffee/images/icons/contents/sugar.png
diff --git a/doc/src/snippets/coffee/images/ui controls/buttons/back/white.png b/doc/src/snippets/coffee/images/ui controls/buttons/back/white.png
new file mode 100644
index 000000000..633f0f301
--- /dev/null
+++ b/doc/src/snippets/coffee/images/ui controls/buttons/back/white.png
diff --git a/doc/src/snippets/coffee/images/ui controls/buttons/go/white.png b/doc/src/snippets/coffee/images/ui controls/buttons/go/white.png
new file mode 100644
index 000000000..0172138d0
--- /dev/null
+++ b/doc/src/snippets/coffee/images/ui controls/buttons/go/white.png
diff --git a/doc/src/snippets/coffee/images/ui controls/line.png b/doc/src/snippets/coffee/images/ui controls/line.png
new file mode 100644
index 000000000..bd4484ef8
--- /dev/null
+++ b/doc/src/snippets/coffee/images/ui controls/line.png
diff --git a/doc/src/snippets/coffee/imports/Coffee/Constants.qml b/doc/src/snippets/coffee/imports/Coffee/Constants.qml
new file mode 100644
index 000000000..8816a9f58
--- /dev/null
+++ b/doc/src/snippets/coffee/imports/Coffee/Constants.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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$
+**
+****************************************************************************/
+
+
+pragma Singleton
+import QtQuick 2.6
+
+QtObject {
+    property FontLoader fontLoader: FontLoader {
+        id: fontLoader
+        source: "TitilliumWeb-Regular.ttf"
+    }
+    readonly property alias fontFamily: fontLoader.name
+
+    readonly property int width: 1024
+    readonly property int height: 768
+    readonly property int leftSideBarWidth: 366
+
+    readonly property color backgroundColor: "#443224"
+    readonly property int defaultMargin: 8
+}
diff --git a/doc/src/snippets/coffee/imports/Coffee/TitilliumWeb-Regular.ttf b/doc/src/snippets/coffee/imports/Coffee/TitilliumWeb-Regular.ttf
new file mode 100644
index 000000000..6da821935
--- /dev/null
+++ b/doc/src/snippets/coffee/imports/Coffee/TitilliumWeb-Regular.ttf
diff --git a/doc/src/snippets/coffee/imports/Coffee/qmldir b/doc/src/snippets/coffee/imports/Coffee/qmldir
new file mode 100644
index 000000000..616ac2035
--- /dev/null
+++ b/doc/src/snippets/coffee/imports/Coffee/qmldir
@@ -0,0 +1 @@
+singleton Constants 1.0 Constants.qml
diff --git a/doc/src/snippets/coffee/main.cpp b/doc/src/snippets/coffee/main.cpp
new file mode 100644
index 000000000..40c7e7577
--- /dev/null
+++ b/doc/src/snippets/coffee/main.cpp
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, 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 The Qt Company Ltd 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$
+**
+****************************************************************************/
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.addImportPath(":/imports");
+    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    return app.exec();
+}
diff --git a/doc/src/snippets/coffee/qml.qrc b/doc/src/snippets/coffee/qml.qrc
new file mode 100644
index 000000000..2f8c143bd
--- /dev/null
+++ b/doc/src/snippets/coffee/qml.qrc
@@ -0,0 +1,39 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>qtquickcontrols2.conf</file>
+        <file>images/cup structure/cup elements/coffee_cup_back.png</file>
+        <file>images/cup structure/cup elements/coffee_cup_coverplate.png</file>
+        <file>images/cup structure/cup elements/coffee_cup_front.png</file>
+        <file>images/cup structure/liquids/liquid_coffee.png</file>
+        <file>images/cup structure/liquids/liquid_foam.png</file>
+        <file>images/cup structure/liquids/liquid_milk.png</file>
+        <file>images/cup structure/coffee_cup_large.png</file>
+        <file>images/cup structure/coffee_cup_outline.png</file>
+        <file>images/icons/contents/coffee.png</file>
+        <file>images/icons/contents/milk.png</file>
+        <file>images/icons/contents/sugar.png</file>
+        <file>images/icons/coffees/Americano.png</file>
+        <file>images/icons/coffees/cappucino.png</file>
+        <file>images/icons/coffees/Espresso.png</file>
+        <file>images/icons/coffees/Latte.png</file>
+        <file>images/icons/coffees/Macchiato.png</file>
+        <file>images/ui controls/buttons/back/white.png</file>
+        <file>images/ui controls/buttons/go/white.png</file>
+        <file>images/ui controls/line.png</file>
+        <file>CoffeeButton.qml</file>
+        <file>CupForm.ui.qml</file>
+        <file>SideBar.qml</file>
+        <file>SideBarForm.ui.qml</file>
+        <file>NavigationButton.ui.qml</file>
+        <file>ApplicationFlow.qml</file>
+        <file>ApplicationFlowForm.ui.qml</file>
+        <file>EmptyCupForm.ui.qml</file>
+        <file>Brewing.qml</file>
+        <file>BrewingForm.ui.qml</file>
+        <file>ChoosingCoffee.ui.qml</file>
+        <file>imports/Coffee/Constants.qml</file>
+        <file>imports/Coffee/qmldir</file>
+        <file>imports/Coffee/TitilliumWeb-Regular.ttf</file>
+    </qresource>
+</RCC>
diff --git a/doc/src/snippets/coffee/qtquickcontrols2.conf b/doc/src/snippets/coffee/qtquickcontrols2.conf
new file mode 100644
index 000000000..e16b5bb52
--- /dev/null
+++ b/doc/src/snippets/coffee/qtquickcontrols2.conf
@@ -0,0 +1,10 @@
+[Controls]
+Style=Material
+
+[Universal]
+Theme=Light
+
+[Material]
+Theme=Dark
+Primary=Grey
+Accent=White