From e349888b5217fdeb91933ec8324c6f0497b6d465 Mon Sep 17 00:00:00 2001 From: Andreas Eliasson Date: Tue, 28 Jun 2022 13:11:05 +0200 Subject: Doc: Use tabs instead of a table that has code snippets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Using a table with code snippets in different columns will cause the table to expand outside of the page width, forcing the user to scroll horizontally. In addition, in mobile view, the table with code snippets messes up the entire width of the page. Fixes: QTBUG-104156 Change-Id: I36341a5da162cd88961ee1f8741b166b167f8770 Reviewed-by: Kai Koehne Reviewed-by: Topi Reiniö (cherry picked from commit b6d3f84c2a2bd7bed7a85618a30e05925bc2b6c0) Reviewed-by: Qt Cherry-pick Bot --- src/qml/doc/src/qtqml-tool-qmltc.qdoc | 53 ++++++++++++++++++++--------------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/src/qml/doc/src/qtqml-tool-qmltc.qdoc b/src/qml/doc/src/qtqml-tool-qmltc.qdoc index 1bdeae098c..e13d0dc0c6 100644 --- a/src/qml/doc/src/qtqml-tool-qmltc.qdoc +++ b/src/qml/doc/src/qtqml-tool-qmltc.qdoc @@ -123,7 +123,7 @@ Then the CMake code would usually look similar to the following: \codeline \snippet qmltc/CMakeLists.txt qmltc-compile-to-cpp -\section3 Using the generated C++ +\section3 Using the Generated C++ Unlike in the case of QQmlComponent instantiation, the output of qmltc, being C++ code, is used directly by the application. Generally, constructing a new @@ -133,27 +133,36 @@ or, for example, combined with QQuickWindow to be drawn on screen. Given a \c{myApp.qml} file, the application code (in both cases) would typically look like this: -\table 100 % - -\header - \li Using QQmlComponent - \li Using qmltc-generated class -\row - \li \snippet qmltc/tst_qmltc_examples.cpp qqmlcomponent-include - \li \snippet qmltc/tst_qmltc_examples.cpp qmltc-include -\row - \li \snippet qmltc/tst_qmltc_examples.cpp qqmlcomponent-app-code-0 - \codeline - \snippet qmltc/tst_qmltc_examples.cpp qqmlcomponent-app-code-1 - \codeline - \snippet qmltc/tst_qmltc_examples.cpp qqmlcomponent-app-code-2 - \codeline - \snippet qmltc/tst_qmltc_examples.cpp qmltc-app-exec - - \li \snippet qmltc/tst_qmltc_examples.cpp qmltc-app-code - \codeline - \snippet qmltc/tst_qmltc_examples.cpp qmltc-app-exec -\endtable +\if defined(onlinedocs) + \tab {generated-c++}{tab-qqmlcomponent}{Using QQmlComponent}{checked} + \tab {generated-c++}{tab-qmltc}{Using qmltc-generated class}{} + \tabcontent {tab-qqmlcomponent} +\else + \section4 Using QQmlComponent +\endif +\snippet qmltc/tst_qmltc_examples.cpp qqmlcomponent-include +\codeline +\snippet qmltc/tst_qmltc_examples.cpp qqmlcomponent-app-code-0 +\codeline +\snippet qmltc/tst_qmltc_examples.cpp qqmlcomponent-app-code-1 +\codeline +\snippet qmltc/tst_qmltc_examples.cpp qqmlcomponent-app-code-2 +\codeline +\snippet qmltc/tst_qmltc_examples.cpp qmltc-app-exec +\if defined(onlinedocs) + \endtabcontent + \tabcontent {tab-qmltc} +\else + \section4 Using qmltc-generated class +\endif +\snippet qmltc/tst_qmltc_examples.cpp qmltc-include +\codeline +\snippet qmltc/tst_qmltc_examples.cpp qmltc-app-code +\codeline +\snippet qmltc/tst_qmltc_examples.cpp qmltc-app-exec +\if defined(onlinedocs) + \endtabcontent +\endif \section2 QML engine -- cgit v1.2.3