diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index f2cba727297..9f3f201cde0 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -96,6 +96,7 @@ \li \l{Form Editor} \li \l{Library} \li \l{Navigator} + \li \l{Properties} \endlist \li \l {Creating UIs} \list @@ -110,7 +111,7 @@ \li \l{Creating Buttons} \li \l{Creating Scalable Buttons and Borders} \endlist - \li \l{Specifying Item Properties} + \li \l{Specifying Component Properties} \li \l{Positioning Items} \li \l{Using Custom Fonts} \li \l{Annotating Designs} diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index 91159e76bbc..f9822526ccd 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -196,7 +196,7 @@ \list \li \l{Creating Components} \li \l{Navigator} - \li \l{Specifying Item Properties} + \li \l{Specifying Component Properties} \endlist Next, we will make the image move between the rectangles when users click diff --git a/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc index 11b3f40a562..8ce4def14e2 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2020 The Qt Company Ltd. +** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Creator documentation. @@ -54,7 +54,7 @@ {Item} type. Even though it has no visual appearance itself (similarly to a mouse area, for example), it defines all the properties that are common across visual types, such as position, size, and visibility. For - more information, see \l{Specifying Basic Item Properties}. + more information, see \l{Specifying Basic Component Properties}. In addition, each type has a set of properties that specify its visual appearance and behavior. You can modify the property values to set fill diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc index 5f7711b8af4..a03b2ce4576 100644 --- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-components.qdoc @@ -80,7 +80,7 @@ \li Select components in \uicontrol Navigator to edit the values of their properties in \uicontrol Properties. \image qmldesigner-properties-view.png "Properties view" - For more information, see \l {Specifying Item Properties}. + For more information, see \l {Specifying Component Properties}. \li To change the appearance and behavior of your components in ways that are not supported out of the box, you can define custom properties for your components in the \uicontrol Connections view, diff --git a/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc index d1de85a6b2a..c370f36b3f7 100644 --- a/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc @@ -83,7 +83,7 @@ \image qtquick-custom-properties.png "Custom properties in Properties view" For more information about setting property values in the - \uicontrol Properties view, see \l{Specifying Item Properties}. + \uicontrol Properties view, see \l{Specifying Component Properties}. For an example of using custom properties in an application, see \l{Creating a Mobile Application}. diff --git a/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc new file mode 100644 index 00000000000..61c6312a5ab --- /dev/null +++ b/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc @@ -0,0 +1,163 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Creator documentation. +** +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \page qtquick-properties-view.html + \previouspage qtquick-navigator.html + \nextpage creator-project-managing-workspaces.html + + \title Properties + + The \uicontrol Properties view displays all the properties of the selected + \l{glossary-component}{component}. The properties are grouped by type. The + top part of the view displays properties that are common to all components, + such as type name, ID, position, size, and visibility. + + \image qtquick-item-properties-common.png "Basic component properties" + + The bottom part of the view displays properties that have been defined for + the component type. For example, the following image displays the predefined + properties you can set for \l{basic-rectangle}{Rectangle} and \l Text + components. + + \image qmldesigner-element-properties.png "Rectangle and Text properties" + + \section1 Summary of Properties View Buttons + + The following table lists the \uicontrol Properties view buttons: + + \table + \header + \li Icon + \li Tooltip + \li Read More + \row + \li \inlineimage export_unchecked.png + \li Adds a property alias that you can use from outside of the + component for the root component. You can use a menu item + in the actions menu to add property aliases for property + values of child components. + \li \l{Adding Property Aliases} + \row + \li \inlineimage icons/action-icon.png + \li Opens a menu with actions for: + \list + \li Resetting property values to their default values + \li Setting property bindings + \li Creating property aliases + \li Inserting keyframes for timeline animations + \endlist + \li + \list + \li \l{Viewing Changes in Properties} + \li \l{Adding Bindings Between Properties} + \li \l{Adding Property Aliases} + \li \l{Setting Keyframe Values} + \endlist + \row + \li \inlineimage icons/action-icon-binding.png + \li Indicates that the value of the property is bound to the value + of another property. Opens the same menu as the action icon. + \li \l{Adding Bindings Between Properties} + + \endtable + + \section1 Viewing Changes in Properties + + The default values of properties are displayed in white color, while the + values that you specify explicitly are highlighted with blue color. In + addition, property changes in \l{Adding States}{states} are highlighted + with blue. + + This allows you to easily see which values are set in the component + file for this component instance and which values are default + characteristics of a component. + + When editing states, you can easily see which values are explicitly set in + the current state and which values are derived from the base state. + + The following images illustrate this. In the base state, the \uicontrol Size + (1) and \uicontrol Colors (2) values are explicitly set and highlighted. + + \image qmldesigner-properties-explicit-base.png "Explicitly set properties" + + In \uicontrol State1, only the color (1) is explicitly set and highlighted. + + \image qmldesigner-properties-explicit-state1.png "Explicitly set properties" + + Resetting a property sets it back to the default value and removes the value + from the component file. + + \note As a result, all boolean values can be visualized in four different + ways. + + For example, visibility can be visualized as follows: + + \table + \row + \li \image qmldesigner-boolean-true.png + \li TRUE + \li The component is visible by default. The visibility might be + overridden by the visibility set in the base state. + \row + \li \image qmldesigner-boolean-true-blue.png + \li TRUE (highlighted) + \li The component is explicitly set to visible. + \row + \li \image qmldesigner-boolean-false.png + \li FALSE + \li The component is hidden by default. The visibility might be + overridden by the visibility set in the base state. + \row + \li \image qmldesigner-boolean-false-blue.png + \li FALSE (hightlighted) + \li The component is explicitly set to hidden. + \endtable + + \section1 Multiselection + + To modify the values of common properties of multiple components + simultaneously, select the components in \l Navigator or \l {Form Editor}: + + \list + \li On Windows, press and hold \key Ctrl and \key Shift, and then click + the components to select them. + \li On \macos, press \key Shift to select a range of components or + \key Cmd to select multiple single components. + \endlist + + You can \l{Locking Components}{lock other components} in + \uicontrol Navigator to make multiselection easier. + + \section1 Getting Help for Properties + + \list + \li For information about setting common component properties, see + \l{Specifying Component Properties}. + \li For more information on the properties available for a + component, press \key {F1} or see \l{Component Types} + and \l{Positioning Items}. + \endlist +*/ diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc index 5f375c62e61..5bfd3d4a11f 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2020 The Qt Company Ltd. +** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Creator documentation. @@ -28,109 +28,144 @@ \previouspage quick-scalable-image.html \nextpage qtquick-positioning.html - \title Specifying Item Properties + \title Specifying Component Properties - The \uicontrol Properties view displays all the properties of the selected - item. The properties are grouped by type. The top part of the view displays - properties that are common to all QML types, such as type name, id, - position, size, and visibility. + The \l Properties view displays all the properties of the selected + \l{glossary-component}{component}. - \image qtquick-item-properties-common.png "Basic item properties" + \target basic-item + \section1 Specifying Basic Component Properties - The bottom part of the view displays properties that have been defined for - the QML type. For example, the following image displays the predefined - properties you can set for \uicontrol Rectangle and \uicontrol Text items. + All components share a set of properties that you can specify in the + \uicontrol Properties view. - \image qmldesigner-element-properties.png "Rectangle and Text properties" + \image qtquick-item-properties-common.png "Basic component properties" - To modify the values of common properties of multiple items simultaneously, - select the items in the \uicontrol Navigator or on the canvas: + \section2 Type - \list - \li On Windows, press and hold \key Ctrl and \key Shift, and then click - the items to select them. - \li On \macos, press \key Shift to select a range of items or \key Cmd - to select multiple single items. - \endlist + When you create a component using a \l{Component Types}{preset component}, + it has all the properties of the preset you used. If you realize later that + another preset component with another set of default properties would be + more suitable for your purposes, you can change the component type by + double-clicking the \uicontrol Type field and entering the name of + another preset component in the field. - To return an item to its implicit position after moving it, select the - \inlineimage qtcreator-reset-position-icon.png - (\uicontrol {Reset Position}) button on the toolbar. To return it to its - implicit size, select \inlineimage qtcreator-reset-size-icon.png + If you have specified values for properties that are not supported by the + new component type, \QC offers to remove them for you. If you'd rather do + this yourself, you can select the \inlineimage icons/action-icon.png + (\uicontrol Actions) menu next to the property name, and then select + \uicontrol Reset to remove the property values before trying again. + + \section2 ID + + Each component and each instance of a component has an \e ID that uniquely + identifies it and enables other components' properties to be bound to it. + You can specify IDs for components in the \uicontrol ID field. + + An ID must be unique, it must begin with a lower-case letter or an + underscore character, and it can contain only letters, numbers, and + underscore characters. + + For more technical information about IDs, see \l{The id Attribute}. + + The value of the \uicontrol {Custom ID} field specifies the name of an + \l{Annotating Designs}{annotation}. + + \section2 Geometry + + In the \uicontrol Position group, you can set the position of a component on + the x and y axis. The position of a component in the UI can be either + absolute or relative to other components. For more information, see + \l{Positioning Items}. + + In the 2D space, the z position of a component determines its position in + relation to its sibling components in the component hierarchy. You can set + it in the \uicontrol Z field in the \uicontrol Advanced tab. + + In the \uicontrol Size group, you can set the width and height of a + component. You can also use the resize cursor to \l{Resizing 2D Items} + {resize 2D components} in \uicontrol {Form Editor} or the scaling gizmo + to \l{Scaling Items}{scale 3D components} in \uicontrol {3D Editor}. + The values in the \uicontrol X and \uicontrol Y fields change accordingly. + + The component size and position can also be managed automatically + when \l{Using Layouts}{using layouts}. + + The width and height of the root component in a component file determine + the size of a component. The component size might also be zero (0,0) + if its final size is determined by property bindings. For more + information, see \l {Previewing Component Size}. + + \section3 Resetting Component Position and Size + + To return a component to its default position after moving it, + select the \inlineimage qtcreator-reset-position-icon.png + (\uicontrol {Reset Position}) button on the \l{Design Views} + {Design mode toolbar}. To return it to its default size, select + \inlineimage qtcreator-reset-size-icon.png (\uicontrol {Reset Size}) button. - To set the visibility of the item, select \uicontrol Edit > - \uicontrol Visibility in the context menu. + \section2 Visibility - For more information on the properties available for an item, press - \key {F1}. + You can use the properties in the \uicontrol Visibility group to show and + hide components. - \section1 Specifying Custom Properties + Deselect the \uicontrol {Is visible} check box to hide a component and all + its child components, unless they have explicitly been set to be visible. + This might have surprise effects when using property bindings. In such + cases, it may be better to use the \uicontrol Opacity property instead. - Each predefined QML type has a set of properties that you can extend by - defining additional properties for your own QML components. For more - information, see \l{Specifying Dynamic Properties}. + If this property is disabled, the component will no longer receive + \l{Mouse Area}{mouse events} but will continue to receive key events + and will retain the keyboard focus events, if it has been set by + selecting the \uicontrol Enabled check box in the \uicontrol Advanced tab. - The properties you add for a QML type are displayed in the - \uicontrol Properties view when you select a component - of that type in \uicontrol Navigator or \uicontrol {Form Editor}. + The visibility value is only affected by changes to this property or the + parent's visible property. It does not change, for example, if this + component moves off-screen, or if the opacity changes to 0. - \image qtquick-custom-properties.png "Custom properties in Properties view" + In the \uicontrol Opacity field, specify the opacity of a component as a + number between 0.0 (fully transparent) and 1.0 (fully opaque). The specified + opacity is also applied individually to child components, sometimes with + surprising effects. - \section1 Viewing Changes in Properties + Changing a component's opacity does not affect whether the component + receives user input events. - The default values of properties are displayed in white color, while the - values that you specify explicitly are highlighted with blue color. In - addition, property changes in states are highlighted with blue. + You can \l{Creating Animations}{animate} the opacity value to make a + component fade in and out. - This allows you to easily see which values are set in the UI form or QML - file and which values are default characteristics of a QML type or a - component. + If the \uicontrol Clip check box is selected, the component and its children + are clipped to the bounding rectangle of the component. - When editing states, you can easily see which values are explicitly set in - the current state and which values are derived from the base state. + \section1 Managing 2D Transformations - The following images illustrate this. In the base state, the \uicontrol Size - (1) and \uicontrol Colors (2) values are explicitly set and highlighted. + You can assign any number of transformations, such as rotation and scaling, + to a component in the \uicontrol Advanced tab of the \uicontrol Properties + view. Each transformation is applied in order, one at a time. - \image qmldesigner-properties-explicit-base.png "Explicitly set properties" + \image qtquick-item-properties-advanced.png "Advanced component properties" - In \uicontrol State1, only the color (1) is explicitly set and highlighted. + In the \uicontrol Origin field, select the origin point for scaling and + rotation. - \image qmldesigner-properties-explicit-state1.png "Explicitly set properties" + Set the scale factor in the \uicontrol Scale field. A value of less than + 1.0 makes the component smaller, whereas a value greater than 1.0 makes + it larger. A negative value causes the component to be mirrored in + \uicontrol {Form Editor}. - Resetting a property sets it back to the default value and removes the value - from the UI form or QML file. + In the \uicontrol Rotation field, specify the rotation of the component + in degrees clockwise around the origin point. - \note As a result, all boolean values can be visualized in four different - ways. + Alternatively, you can move, resize, or rotate components by dragging them + in \l{Form Editor}. - For example, visibility can be visualized as follows: - - \table - \row - \li \image qmldesigner-boolean-true.png - \li TRUE - \li The QML type is visible by default. The visibility might be - overridden by the visibility set in the base state. - \row - \li \image qmldesigner-boolean-true-blue.png - \li TRUE (highlighted) - \li The QML type is explicitly set to visible. - \row - \li \image qmldesigner-boolean-false.png - \li FALSE - \li The QML type is hidden by default. The visibility might be - overridden by the visibility set in the base state. - \row - \li \image qmldesigner-boolean-false-blue.png - \li FALSE (hightlighted) - \li The type is explicitly set to hidden. - \endtable + For more information about transforming 3D components, see + \l{Managing 3D Transformations} and \l{Working in 3D Editor}. \section1 Picking Colors - To specify the color of the selected item in the color picker view (1), + To specify the color of the selected component in the color picker view (1), select the color picker icon (2) in the \uicontrol Properties view. \image qtquick-designer-color-picker.png "Color Picker view" @@ -138,7 +173,7 @@ You can use either a solid color (3) or a gradient (4). You can select the gradient in the \uicontrol {Gradient Picker} (5). - The \uicontrol Original field displays the original color of the item, + The \uicontrol Original field displays the original color of the component, whereas the \uicontrol New field displays the current color. The \uicontrol Recent field displays the colors that you have last selected. @@ -159,13 +194,13 @@ Calculating gradients can be computationally expensive compared to the use of solid color fills or images. Consider using gradients only for - static items in a UI. + static components in a UI. \if defined(qtdesignstudio) \section2 Setting Gradient Properties Select the arrow below the gradient button to set gradient properties - for Studio Components. + for \l{Shapes}{Studio Components}. \image qtquick-designer-gradient-types.png "Gradients supported by Studio Components" @@ -189,7 +224,7 @@ \image qtquick-designer-gradient-properties-radial.png "Radial gradient properties" You can set the center and focal radius in the \uicontrol {Center radius} - and \uicontrol {Focal radius} fields. For simple radial gradients, set to + and \uicontrol {Focal radius} fields. For simple radial gradients, set the focal radius to 0. You can set the center and focal points in the \uicontrol CenterX, @@ -210,7 +245,7 @@ \section2 Selecting Web Gradients The \uicontrol {Gradient Picker} enables you to specify - \l{https://webgradients.com/}{WebGradients} for QML types + \l{https://webgradients.com/}{WebGradients} for components that support \l QGradient. To open the \uicontrol {Gradient Picker}, select the @@ -218,7 +253,7 @@ \image qtquick-designer-gradient-picker.png "Gradient Picker dialog" - To apply a gradient on the selected item, select \uicontrol Apply. + To apply a gradient on the selected component, select \uicontrol Apply. To save a gradient in the \uicontrol {User Presets} tab, select \uicontrol Save. @@ -226,9 +261,9 @@ By default, a linear gradient (4) is used, but you can select another supported gradient type in the \uicontrol Properties view. - \section1 Marking Text Items for Translation + \section1 Marking Text Components for Translation - To support translators, mark each text item that should be translated. + To support translators, mark each text component that should be translated. In the \uicontrol Properties view, \uicontrol Text field, select \uicontrol tr (1). \image qmldesigner-text-property-tr.png "Text properties" @@ -257,126 +292,11 @@ You can add other languages later by editing the project file. \endif - \target basic-item - \section1 Specifying Basic Item Properties - - All QML types share a set of properties that you can specify in - \uicontrol Properties. - - \image qtquick-item-properties-common.png "Basic item properties" - - \section2 Type - - When you create a component using a QML type, the component has all the - properties of the type you used. If you realize later that another QML - type with another set of predefined properties would be more suitable for - your purposes, you can change the component type by double-clicking the - \uicontrol Type field and entering the name of another QML type in the - field. - - If you have specified values for properties that are not supported by - the new type, \QC offers to remove them for you. If you'd rather do - this yourself, you can select the \inlineimage icons/action-icon.png - (\uicontrol Actions) menu next to the property name, and then select - \uicontrol Reset to remove the property values before trying again. - - \section2 Id - - Each QML type and each instance of a QML type has an \e id that uniquely - identifies it and enables other items' properties to be bound to it. - You can specify ids for items in the \uicontrol Id field. - - An id must be unique, it must begin with a lower-case letter or an - underscore character, and it can contain only letters, numbers, and - underscore characters. - - For more information, see \l{The id Attribute}. - - The value of the \uicontrol {Custom id} field specifies the name of an - \l{Annotating Designs}{annotation}. - - \section2 Geometry - - In the \uicontrol Position group, you can set the position of an item on - the x and y axis. The position of an item in the UI can be either absolute - or relative to other items. For more information, see - \l{Positioning Items}. - - The z position of an item determines its position in relation to its - sibling items in the type hierarchy. You can set it in the \uicontrol Z - field in the \uicontrol Advanced tab. - - In the \uicontrol Size group, you can set the width and height of - an item. You can also use the resize cursor to \l{Resizing 2D Items} - {resize 2D items} in \uicontrol {Form Editor} or the scaling gizmo - to \l{Scaling Items}{scale 3D items} in \uicontrol {3D Editor}. The - values in the \uicontrol X and \uicontrol Y fields change accordingly. - - The item size and position can also be managed automatically - when \l{Using Layouts}{using layouts}. - - The width and height of the root item in a QML file determine the - size of a component. The component size might also be zero (0,0) - if its final size is determined by property bindings. For more - information, see \l {Previewing Component Size}. - - \section2 Visibility - - You can use the properties in the \uicontrol Visibility group to show and - hide items. - - Deselect the \uicontrol {Is visible} check box to hide an item and all its - child items, unless they have explicitly been set to be visible. This might - have surprise effects when using property bindings. In such cases, it may be - better to use the \uicontrol Opacity property instead. - - If this property is disabled, the item will no longer receive mouse events, - but will continue to receive key events and will retain the keyboard focus - if it has been set by selecting the \uicontrol Enabled check box in the - \uicontrol Advanced tab. - - The visibility value is only affected by changes to this property or the - parent's visible property. It does not change, for example, if this item - moves off-screen, or if the opacity changes to 0. - - In the \uicontrol Opacity field, specify the opacity of an item as a number - between 0.0 (fully transparent) and 1.0 (fully opaque). The specified - opacity is also applied individually to child items, sometimes with - surprising effects. - - Changing an item's opacity does not affect whether the item receives user - input events. - - You can \l{Creating Animations}{animate} the opacity value to make items - fade in and out. - - If the \uicontrol Clip check box is selected, the item and its children are - clipped to the bounding rectangle of the item. - - \section1 Managing 2D Transformations - - You can assign any number of transformations, such as rotation and scaling, - to an item in the \uicontrol Advanced tab of the \uicontrol Properties view. - Each transformation is applied in order, one at a time. - - \image qtquick-item-properties-advanced.png "Advanced item properties" - - In the \uicontrol Origin field, select the origin point for scaling and - rotation. - - Set the scale factor in the \uicontrol Scale field. A value of less than - 1.0 makes the component smaller, whereas a value greater than 1.0 makes - it larger. A negative value causes the component to be mirrored in - \uicontrol {Form Editor}. - - In the \uicontrol Rotation field, specify the rotation of the component - in degrees clockwise around the origin point. - \section1 Specifying Developer Properties In the \uicontrol Advanced tab of the \uicontrol Properties view, you can - manage the more advanced properties of QML types that are based on the - \l Item type and are mostly used by application developers. + manage the more advanced properties of components that are based on the + \l Item component and that are mostly used by application developers. Select the \uicontrol Smooth check box to activate smooth sampling. Smooth sampling is performed using linear interpolation, while non-smooth sampling @@ -384,28 +304,28 @@ impact on performance, it is activated by default. The value of the \uicontrol {Baseline offset} specifies the position of the - item's baseline in local coordinates. The baseline of a Text item is the - imaginary line on which the text sits. Controls containing text usually set - their baseline to the baseline of their text. For non-text items, a default - baseline offset of 0 is used. + component's baseline in local coordinates. The baseline of a \l Text + component is the imaginary line on which the text sits. Controls containing + text usually set their baseline to the baseline of their text. For non-text + components, a default baseline offset of 0 is used. \section2 Managing Mouse and Keyboard Events - Select the \uicontrol Enabled check box to allow the item to receive mouse - and keyboard events. The children of the item inherit this behavior, unless - you explicitly set this value for them. + Select the \uicontrol Enabled check box to allow the component to receive + mouse and keyboard events. The children of the component inherit this + behavior, unless you explicitly set this value for them. - You can enable the \uicontrol Focus check box to specify that the item has - active focus and the \uicontrol {Active focus on tab} check box to add the - item to the \e {tab focus chain}. The tab focus chain traverses elements by - first visiting the parent, and then its children in the order they are - defined. Pressing \key Tab on an item in the tab focus chain moves - keyboard focus to the next item in the chain. Pressing back tab (usually, - \key {Shift+Tab}) moves focus to the previous item. + You can enable the \uicontrol Focus check box to specify that the component + has active focus and the \uicontrol {Active focus on tab} check box to add + the component to the \e {tab focus chain}. The tab focus chain traverses + components by first visiting the parent, and then its children in the order + they are defined. Pressing \key Tab on a component in the tab focus chain + moves keyboard focus to the next component in the chain. Pressing back tab + (usually, \key {Shift+Tab}) moves focus to the previous component. \section2 Using Layers - Qt Quick 2 makes use of a dedicated scene graph that is then traversed and + Qt Quick makes use of a dedicated scene graph that is then traversed and rendered via a graphics API such as OpenGL ES, OpenGL, Vulkan, Metal, or Direct 3D. Using a scene graph for graphics rather than the traditional imperative painting systems, means that the scene to be rendered can be @@ -414,8 +334,8 @@ such as \l{Batching}{batch rendering} to minimize state changes and discarding obscured primitives. - For example, if a user-interface contains a list of ten items where each - item has a background color, an icon and a text. Using the traditional + For example, a UI might contain a list of ten items where + each item has a background color, an icon and a text. Using traditional drawing techniques, this would result in 30 draw calls and a similar amount of state changes. A scene graph, on the other hand, could reorganize the primitives to render such that all backgrounds are drawn in one call, @@ -423,34 +343,34 @@ to only 3. Batching and state change reduction like this can greatly improve performance on some hardware. - You need a basic understanding of how items are rendered in QML + You need a basic understanding of how components are rendered to be able to set layer properties. Rendering is described in \l {Qt Quick Scene Graph Default Renderer}. \image qtquick-item-properties-layer.png "Layer properties" - Items are normally rendered directly into the window they belong to. + Components are normally rendered directly into the window they belong to. However, by selecting the \uicontrol Enabled check box in the - \uicontrol Layer group, you can delegate the item and its entire subtree + \uicontrol Layer group, you can delegate the component and its entire subtree into an offscreen surface. Only the offscreen surface, a texture, will then be drawn into the window. For more information, see \l{Item Layers}. - When layering is enabled, you can use the item directly as a texture, - in combination with the item you select in the \uicontrol Effect field. - Typically, this item should be a shader effect with a source texture + When layering is enabled, you can use the component directly as a texture, + in combination with the component you select in the \uicontrol Effect field. + Typically, this component should be a shader effect with a source texture specified. You can use the effects in the \uicontrol Effects section - of \uicontrol Library that are based on the QML types in the + of \uicontrol Library that are based on the components in the \l {Qt Graphical Effects} module. - To enable the item to pass the layer's offscreen surface to the effect + To enable the component to pass the layer's offscreen surface to the effect correctly, the \uicontrol {Sampler name} field is set to the source property of the texture. - Note that when an item's layer is enabled, the scene graph will allocate + Note that when a component's layer is enabled, the scene graph will allocate memory in the GPU equal to width x height x 4. In memory constrained - configurations, large layers should be used with care. Also, an item + configurations, large layers should be used with care. Also, a component using a layer cannot be batched during rendering. This means that a - scene with many layered items may have performance problems. + scene with many layered components may have performance problems. By default, multisampling is enabled for the entire window if the scenegraph renderer is in use and the underlying graphics API supports it. By setting @@ -471,17 +391,18 @@ In the \uicontrol {Texture mirroring} field, specify whether the generated OpenGL texture should be mirrored by flipping it along the x or y axis. Custom mirroring can be useful if the generated texture is directly accessed - by custom shaders. If no effect is specified for the layered item, mirroring - has no effect on the UI representation of the item. + by custom shaders. If no effect is specified for the layered component, + mirroring has no effect on the UI representation of the component. - The item will use linear interpolation for scaling if the \uicontrol Smooth - check box is selected. To use a mipmap for downsampling, select the - \uicontrol Mipmap check box. Mipmapping may improve the visual quality of - downscaled items. For mipmapping of single Image items, select the - \uicontrol Mipmap check box in the image properties, instead. + The component will use linear interpolation for scaling if the + \uicontrol Smooth check box is selected. To use a mipmap for downsampling, + select the \uicontrol Mipmap check box. Mipmapping may improve the visual + quality of downscaled components. For mipmapping of single Image components, + select the \uicontrol Mipmap check box in the \l{Images}{image properties}, + instead. - To use a texture with a size different from that of the item, specify the - width and height of the texture in the \uicontrol {Texture size} field. + To use a texture with a size different from that of the component, specify + the width and height of the texture in the \uicontrol {Texture size} field. The \uicontrol {Wrap mode} defines the OpenGL wrap modes associated with the texture. You can clamp the texture to edges or repeat it horizontally @@ -490,11 +411,11 @@ \section1 Editing Properties Inline - You can double-click objects on the canvas to edit their text, color, - or source properties inline. Because you can specify several of these - properties for some QML types, such as \l {text-edit}{Text Edit}, - you can also right-click objects to open the inline editors from a - context-menu. + You can double-click components in \l {Form Editor} to edit their + text, color, or source properties inline. Because you can specify several + of these properties for some components, such as \l {text-edit}{Text Edit}, + you can also right-click components to open the inline editors from the + context menu. \image qmldesigner-inline-editing.png */ diff --git a/doc/qtcreator/src/qtquick/qtquick-transition-editor.qdocinc b/doc/qtcreator/src/qtquick/qtquick-transition-editor.qdocinc index 38eac9d512d..ff20d84e22a 100644 --- a/doc/qtcreator/src/qtquick/qtquick-transition-editor.qdocinc +++ b/doc/qtcreator/src/qtquick/qtquick-transition-editor.qdocinc @@ -31,7 +31,7 @@ To make movement between states smooth, you can use \uicontrol {Transition Editor} to animate the changes between states. First, you need to \l{Creating States}{add states} in - the \uicontrol States view and \l{Specifying Item Properties} + the \uicontrol States view and \l{Specifying Component Properties} {edit some properties} that can be animated, such as colors or numbers, in the \uicontrol Properties view. For example, you can animate the changes in the position of an object. diff --git a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc index c62d44c23d0..22da82757c5 100644 --- a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc @@ -82,7 +82,7 @@ You can manage the items in the current QML file and their relationships in the \uicontrol Navigator view. - \li \l {Specifying Item Properties} + \li \l {Specifying Component Properties} You can specify values for the properties of a component to change its appearance and behavior. All QML types have a set of predefined diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc index cb46272da96..0027d51f42d 100644 --- a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc +++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc @@ -124,8 +124,8 @@ layer into. The component that is generated during import will be of this type. For example, if you drew a rectangle, you can export it as a \l Rectangle component. You can provide the - \l{QML Imports}{import statement} of the component set where the - component is defined in the \uicontrol {Imports} field. + \l{Learn Qt Quick - QML Types}{import statement} of the component + set where the component is defined in the \uicontrol {Imports} field. \row \li \uicontrol Properties \li Sets values of properties for the component. You can add properties diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 22d92ea81d4..6ca647ce293 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -61,6 +61,7 @@ \li \l{Form Editor} \li \l{Library} \li \l{Navigator} + \li \l{Properties} \endlist \li \l{Managing Workspaces} \li \l{Managing Sessions} @@ -99,7 +100,7 @@ \li \l{Creating Buttons} \li \l{Creating Scalable Buttons and Borders} \endlist - \li \l{Specifying Item Properties} + \li \l{Specifying Component Properties} \li \l{Positioning Items} \li \l{Using Custom Fonts} \li \l{Annotating Designs} diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc index 57fdc6d1dec..43cbd060622 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -63,7 +63,7 @@ \list \li \l{Designing Application Flows} \li \l{Creating Components} - \li \l{Specifying Item Properties} + \li \l{Specifying Component Properties} \li \l{Positioning Items} \li \l{Annotating Designs} \endlist diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc index 3f443c2eaa2..8690fe0a336 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc @@ -63,7 +63,7 @@ \li \uicontrol {Properties} (5) organizes the properties of the selected item. You can change the properties also in \uicontrol {Text Editor}. For more information, see - \l {Specifying Item Properties}. + \l {Specifying Component Properties}. \li \uicontrol Connections (6) enables you to create connections between objects, signals, and object properties. For more information, see \l{Adding Connections}.