Doc: Update info about custom components

- Describe "Edit Master Component" button in custom component
  properties.
- Organize the different ways of creating custom components under
  one heading.

Fixes: QDS-3164
Change-Id: I4b7c1f42e32c6d615ad5b2d9da26f15e69b2cb69
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2020-11-25 10:34:18 +01:00
parent a1e9e6b70b
commit 8cbbdacf3e
4 changed files with 39 additions and 11 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View File

@@ -203,6 +203,14 @@
\section1 Creating Components in Design Mode
You can either use project wizard templates to create custom components and
controls or \l{Moving Components into Separate Files}{move subcomponents
into separate files} to make them reusable in other components.
\section2 Creating Components from Scratch
To use wizard templates to create custom components:
\list 1
\li Select \uicontrol File > \uicontrol {New File or Project} >
@@ -224,7 +232,12 @@
\li Edit its properties in \uicontrol Properties.
The available properties depend on the QML type.
\image qmldesigner-custom-component-properties.png
The available properties depend on the QML type. You can
\l{Specifying Dynamic Properties}{add properties for
components} in the \uicontrol Properties tab of the
\uicontrol {Connection View}.
\endlist
@@ -246,7 +259,7 @@
\include qtdesignstudio-components.qdocinc creating studio components
\endif
\section1 Moving Components into Separate Files
\section2 Moving Components into Separate Files
An alternative way of creating reusable components is to move them into
separate QML files. Right-click a component in the \uicontrol Navigator
@@ -267,14 +280,24 @@
\section1 Moving Within Components
Components can consist of several other components. To view the component
hierarchy as a bread crumb path when you edit a component in
\uicontrol {Form Editor}, select \uicontrol {Go into Component} or press
\key F2. Click the component names in the path to navigate to them. You
can easily navigate back to the top level when you are done editing the
The QML files that specify components can contain instances of other
components specified in separate QML files. You can open the QML file
that specifies a component in different ways from different views:
\list
\li In \uicontrol {Form Editor} or \uicontrol Navigator,
right-click an instance of a component and then select
\uicontrol {Go into Component} in the context-menu or
press \key F2.
\li In \uicontrol Properties, select \uicontrol {Edit Master Component}.
\endlist
The component hierarchy is displayed as a bread crumb path, where you can
click the component names to open the respective files. This enables you
to easily navigate back to the top level when you are done editing the
component.
\image qmldesigner-breadcrumbs.png "Go into Component command"
\image qmldesigner-breadcrumbs.png "Component hierarchy"
\section1 Merging Files with Templates

View File

@@ -25,9 +25,9 @@
//! [creating studio components]
\section1 Creating Custom Controls
\section2 Creating Custom Controls
You can use the project wizard to create a starting point for a custom
You can use project wizard templates to create a starting point for a custom
\l [QtQuickControls2] {Button}, \l [QtQuickControls2] {Pane},
\l [QtQuickControls2] {StackLayout}{Stacked Layout},
\l [QtQuickControls2] {SwipeView}{Swipe View}, or
@@ -43,8 +43,13 @@
with a capital letter.
\li Edit component properties in the \uicontrol Properties view.
The available properties depend on the QML type.
The available properties depend on the QML type. You can
\l{Specifying Dynamic Properties}{add properties for components} in
the \uicontrol Properties tab of the \uicontrol {Connection View}.
\endlist
For an example of using the \uicontrol Button template to create a button,
see \l{Creating a Push Button} in the \l{Log In UI - Part 1} tutorial.
//! [creating studio components]
*/