doc: Expand documentation for spanning-screens example

Add code snippets, screenshot and justification.

Task-number: QTBUG-91674
Change-Id: I96bf981db2121b0b8135fb83fb9ae16fda60c8c3
Reviewed-by: Paul Olav Tvete <paul.tvete@qt.io>
Reviewed-by: Eskil Abrahamsen Blomfeldt <eskil.abrahamsen-blomfeldt@qt.io>

1 files changed, 6 insertions, 0 deletions

diff --git a/examples/wayland/spanning-screens/main.qml b/examples/wayland/spanning-screens/main.qml
index 7fcb4ef9f..011d91d68 100644
--- a/examples/wayland/spanning-screens/main.qml
+++ b/examples/wayland/spanning-screens/main.qml
@@ -69,10 +69,12 @@ WaylandCompositor {
 
             Text { text: "Top screen" }
 
+            // ![enable screens]
             // Enable the following to make the output target an actual screen,
             // for example when running on eglfs in a multi-display embedded system.
 
             // screen: Qt.application.screens[0]
+            // ![enable screens]
         }
     }
 
@@ -113,6 +115,7 @@ WaylandCompositor {
         onToplevelCreated: {
             const shellSurface = xdgSurface;
 
+            // ![create items]
             const topItem = chromeComponent.createObject(topSurfaceArea, {
                 shellSurface
             });
@@ -121,11 +124,14 @@ WaylandCompositor {
                 shellSurface,
                 y: Qt.binding(function() { return -topSurfaceArea.height;})
             });
+            // ![create items]
 
+            // ![size]
             const height = topSurfaceArea.pixelHeight + bottomSurfaceArea.pixelHeight;
             const width = Math.max(bottomSurfaceArea.pixelWidth, topSurfaceArea.pixelWidth);
             const size = Qt.size(width, height);
             toplevel.sendFullscreen(size);
+            // ![size]
         }
     }
 }