feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Turn "Using Qt Quick Toolbars" into a how-to topic

Browse Source 
Task-number: QTCREATORBUG-29361
Change-Id: I5ed2aa9322f2d83dc8c58a6254a7cde5186252be
Reviewed-by: Eike Ziller <eike.ziller@qt.io>
This commit is contained in:
Leena Miettinen
2024-03-14 13:33:26 +01:00
parent c9d51cfa4a
commit ebb3ad8d47
6 changed files with 62 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
doc/qtcreator/src/editors/creator-editors-writing-code.qdoc
View File

@@ -37,26 +37,6 @@
JavaScript object notation (JSON) entity. In addition, you can run
static checks on the QML and JavaScript code in your project to find
common problems.
\li \l{Complete code}
\QC anticipates what you are going to write and completes code
and code snippets for elements, properties, and IDs.
\li \l{Indent text or code}
\QC indents text and code according to rules that you
specify separately for files that have C++, QML, or
Nim (experimental) code and for other text files.
\li \l{Using Qt Quick Toolbars}
When you edit QML code in the code editor, you specify the
properties of QML components. For some properties, such as
colors and font names, this is not a trivial task. For example,
few people can visualize the color \c {#18793f}. To easily edit
these properties, you can use the Qt Quick Toolbars.
\endlist
\if defined(qtcreator)

1
doc/qtcreator/src/qtcreator-toc.qdoc
View File

@@ -31,7 +31,6 @@
\list
\li \l{Semantic Highlighting}
\li \l{Checking Code Syntax}
\li \l{Using Qt Quick Toolbars}
\endlist
\li \l{Configuring the Editor}
\endlist

25
doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
View File

@@ -1,4 +1,4 @@
// Copyright (C) 2023 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -55,9 +55,8 @@
To create a custom QML type:
\list 1
\li Select \uicontrol File > \uicontrol {New File} >
\uicontrol Qt >
\uicontrol {QML File (Qt Quick 2)}.
\li Go to \uicontrol File > \uicontrol {New File}.
\li Select \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)}.
\li Select \uicontrol Choose to open the \uicontrol Location dialog.
\li In the \uicontrol {File name} field, enter a name for the custom
QML type: \e Page.
@@ -78,12 +77,11 @@
When you start typing the QML type name, \QC suggests available types
and properties to \l{Complete code}{complete the code}.
Select the light bulb icon \inlineimage icons/refactormarker.png
next to the type name to open the \l{Editing Rectangles}
{Qt Quick Toolbar for rectangles}. You can use it to specify
Select the light bulb icon \inlineimage icons/refactormarker.png next to the
type name to open a \l{Edit rectangles}{toolbar} that you can use to specify
rectangle properties, such as color, transparency, and gradients.
\image qml-toolbar-rectangle.png {Qt Quick Toolbar for rectangles}
\image qml-toolbar-rectangle.png {Qt Quick toolbar for rectangles}
Next, add an \l Image type with \e qt-logo.png as the source. You can also
use any other image or a component. Position the image in the top-left
@@ -91,10 +89,10 @@
\printuntil }
You can use the \l{Previewing Images}{Qt Quick Toolbar for images} to
specify image properties, such as source file and fill mode.
Use a \l{Preview images}{toolbar for images} to specify image properties,
such as source file and fill mode.
\image qml-toolbar-image.png {Logo visible in Qt Quick Toolbar for images}
\image qml-toolbar-image.png {Logo visible in Qt Quick toolbar for images}
Now, create the rectangles that the image will move between. Their size
should match the image size and they should be transparent, so that the
@@ -114,7 +112,7 @@
\printuntil anchors.fill
To check your code, you can compare it with the \e {Page.qml} example file.
To check your code, compare it with the \e {Page.qml} example file.
Next, make the image move between the rectangles when users click
them by adding states and by connecting mouse clicks to state changes.
@@ -171,8 +169,7 @@
\printuntil },
\note You can use the \l{Previewing Animation}
{Qt Quick Toolbar for animation} to specify the
\note Use a \l{Preview animations}{toolbar for animations} to specify the
easing curve type and animation duration.
\image qml-toolbar-animation.png {Qt Quick Toolbar for animation}

91
doc/qtcreator/src/qtquick/qtquick-toolbars.qdoc
View File

@@ -1,4 +1,4 @@
// Copyright (C) 2023 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
// **********************************************************************
@@ -10,56 +10,47 @@
/*!
\page qt-quick-toolbars.html
\if defined(qtdesignstudio)
\previouspage creator-preferences-qtquick-code-style.html
\nextpage studio-finding.html
\previouspage qtquick-text-editor.html
\else
\previouspage creator-completing-code.html
\nextpage creator-editor-codepasting.html
\previouspage creator-how-tos.html
\endif
\title Using Qt Quick Toolbars
\ingroup creator-how-to-edit
When you select a QML type in the code and a toolbar is available,
a light bulb icon appears: \inlineimage icons/refactormarker.png
. Select the icon to open the toolbar.
\title Edit properties of QML types
To open toolbars immediately when you select a QML type, select
\preferences > \uicontrol {Qt Quick} >
\uicontrol {QML/JS Editing} > \uicontrol {Always show Qt Quick Toolbar}.
When you edit QML code in the code editor, you specify the properties of QML
types. For some properties, such as colors and font names, this is not a
trivial task. For example, few people can visualize the color \c {#18793f}.
To easily edit these properties, use the Qt Quick toolbars.
\image qtcreator-qml-js-editing.webp {QML/JS Editing preferences}
When you select a QML type in the code and a light bulb icon appears
(\inlineimage icons/refactormarker.png), select it to open a toolbar
for changing the properties of that type.
Drag the toolbar to pin it to another location. Select
\inlineimage icons/pin.png
to unpin the toolbar and move it to its default location. To pin toolbars
by default, select \uicontrol {Pin Qt Quick Toolbar}.
\section1 Preview images
\section1 Previewing Images
The Qt Quick Toolbar for images allows you to edit the properties of
Edit the properties of
\l {Border Image} and
\if defined(qtdesignstudio)
\l {Images}{Image} items.
\l {Images}{Image} items
\else
\l Image items.
\l Image items
\endif
You can scale and tile the images, replace them with other images,
to scale and tile the images, replace them with other images,
preview them, and change the image margins.
\image qml-toolbar-image.png "Qt Quick Toolbar for images"
\image qml-toolbar-image.png {Qt Quick Toolbar for images}
To preview an image, double-click it on the toolbar. In the preview
dialog, you can zoom the image. Drag the image margins to change them.
\image qml-toolbar-image-preview.png "Image preview dialog"
\image qml-toolbar-image-preview.png {Image preview dialog}
\section1 Formatting Text
\section1 Format text
The Qt Quick Toolbar for text allows you to edit the properties of
\l{Text} items.
You can change the font family and size as well as text formatting, style,
alignment, and color.
Edit the properties of \l{Text} items to change the font family and size,
as well as text formatting, style, alignment, and color.
\note Move the mouse pointer over a color hex value in the code editor to
see the color as a tooltip.
@@ -68,35 +59,53 @@
cannot use the toolbar to edit it. The button for editing the property
is disabled.
\image qml-toolbar-text.png "Qt Quick Toolbar for text"
\image qml-toolbar-text.png {Qt Quick Toolbar for text}
By default, font size is specified as pixels. To use points, instead,
change \uicontrol px to \uicontrol pt in the size field.
\section1 Previewing Animation
\section1 Preview animations
The Qt Quick Toolbar for animation allows you to edit the properties of
PropertyAnimation items and the items that inherit it. You can
change the easing curve type and duration. For some curves, you can also
Edit the properties of PropertyAnimation items and the items that inherit it
to change the easing curve type and duration. For some curves, you can also
specify amplitude, period, and overshoot values.
\image qml-toolbar-animation.png "Qt Quick Toolbar for animation"
\image qml-toolbar-animation.png {Qt Quick Toolbar for animation}
Select the play button to preview your changes.
\section1 Editing Rectangles
\section1 Edit rectangles
The Qt Quick Toolbar for rectangles allows you to edit the properties of
Edit the properties of
\if defined(qtdesignstudio)
\l {basic-rectangle}{Rectangle}
\else
Rectangle
\endif
items. You can change the fill and border colors and add gradients.
items to change the fill and border colors and add gradients.
\image qml-toolbar-rectangle.png "Qt Quick Toolbar for rectangles"
\image qml-toolbar-rectangle.png {Qt Quick Toolbar for rectangles}
To add gradient stop points, click above the gradient bar. To remove
stop points, drag them upwards.
\section1 Show toolbars immediately
To open toolbars immediately when you select a QML type, select
\preferences > \uicontrol {Qt Quick} >
\uicontrol {QML/JS Editing} > \uicontrol {Always show Qt Quick Toolbar}.
\image qtcreator-qml-js-editing.webp {QML/JS Editing preferences}
\section1 Pin toolbars
Drag the toolbar to pin it to another location. Select
\inlineimage icons/pin.png to unpin the toolbar and move
it to its default location.
To pin toolbars by default, select \uicontrol {Pin Qt Quick Toolbar}.
\if defined(qtcreator)
\sa {Creating a Qt Quick Application}
\endif
*/

1
doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
View File

@@ -206,7 +206,6 @@
\li \l{Indent text or code}
\li \l{Behavior}
\li \l{Qt Quick Code Style}
\li \l{Using Qt Quick Toolbars}
\endlist
\li \l{Finding}
\list

2
doc/qtdesignstudio/src/views/qtquick-text-editor.qdoc
View File

@@ -24,7 +24,7 @@
\li \l{Checking Code Syntax}
\li \l{Complete code}
\li \l{Indent text or code}
\li \l{Using Qt Quick Toolbars}
\li \l{Edit properties of QML types}
\endlist
\section1 Refactoring Code