diff --git a/doc/qtcreator/images/qmldesigner-breadcrumbs.png b/doc/qtcreator/images/qmldesigner-breadcrumbs.png index a3dc4710867..57c02771445 100644 Binary files a/doc/qtcreator/images/qmldesigner-breadcrumbs.png and b/doc/qtcreator/images/qmldesigner-breadcrumbs.png differ diff --git a/doc/qtcreator/images/qmldesigner-custom-component-properties.png b/doc/qtcreator/images/qmldesigner-custom-component-properties.png new file mode 100644 index 00000000000..b935f941325 Binary files /dev/null and b/doc/qtcreator/images/qmldesigner-custom-component-properties.png differ diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc index 82a90f702e0..8874c7c3d6e 100644 --- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-components.qdoc @@ -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 diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc index 1cf4f4df8fa..789d0defb42 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc +++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc @@ -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] */