Doc: provide code snippets for Overlay.modal and Overlay.modeless

Change-Id: I0ea789c0ba3a153b00ac3ab6501ecf10f6c733ce
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>

3 files changed, 120 insertions, 0 deletions

diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-overlay-modal.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-overlay-modal.qml
new file mode 100644
index 00000000..211697e0
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols2-overlay-modal.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Window 2.2
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    Binding {
+        target: popup
+        property: "visible"
+        value: root.Window.active
+    }
+//! [1]
+Popup {
+    id: popup
+    width: 400
+    height: 400
+    modal: true
+    visible: true
+
+    Overlay.modal: Rectangle {
+        color: "#aacfdbe7"
+    }
+}
+//! [1]
+}
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-overlay-modeless.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-overlay-modeless.qml
new file mode 100644
index 00000000..783f611e
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols2-overlay-modeless.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Window 2.2
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    Binding {
+        target: popup
+        property: "visible"
+        value: root.Window.active
+    }
+//! [1]
+Popup {
+    id: popup
+    width: 400
+    height: 400
+    dim: true
+    visible: true
+
+    Overlay.modeless: Rectangle {
+        color: "#aacfdbe7"
+    }
+}
+//! [1]
+}
diff --git a/src/quicktemplates2/qquickoverlay.cpp b/src/quicktemplates2/qquickoverlay.cpp
index eba31fe2..16ba714b 100644
--- a/src/quicktemplates2/qquickoverlay.cpp
+++ b/src/quicktemplates2/qquickoverlay.cpp
@@ -643,6 +643,11 @@ QQuickOverlay *QQuickOverlayAttached::overlay() const
 
     The property can be attached to any popup.
 
+    For example, to change the color of the background dimming for a modal
+    popup, the following code can be used:
+
+    \snippet qtquickcontrols2-overlay-modal.qml 1
+
     \sa Popup::modal
 */
 QQmlComponent *QQuickOverlayAttached::modal() const
@@ -671,6 +676,11 @@ void QQuickOverlayAttached::setModal(QQmlComponent *modal)
 
     The property can be attached to any popup.
 
+    For example, to change the color of the background dimming for a modeless
+    popup, the following code can be used:
+
+    \snippet qtquickcontrols2-overlay-modeless.qml 1
+
     \sa Popup::dim
 */
 QQmlComponent *QQuickOverlayAttached::modeless() const