// Copyright (C) 2026 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \page qtquick-properties-view.html
    \previouspage creator-how-tos.html

    \ingroup creator-how-to-design-qtquick-components

    \title Change properties

    Change the values of component properties in the \uicontrol Properties view.

   \section1 View 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{Working with 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 Position and \uicontrol Size values are explicitly set
    and highlighted.

    \image {qmldesigner-properties-explicit-base.png} {Explicitly set properties.}

    In \uicontrol State1, only \uicontrol Position 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} {The Visibility property selected but not highlighted.}
            \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} {The Visibility property selected and highlighted.}
            \li TRUE (highlighted)
            \li The component is explicitly set to visible.
        \row
            \li \image {qmldesigner-boolean-false.png} {The Visibility property not selected and not highlighted.}
            \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} {The Visibility property not selected but highlighted.}
            \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 the \uicontrol {Navigator} or
    \uicontrol {2D} view:

    \list
        \li On Windows, select and hold \key Ctrl and \key Shift, and then click
            the components to select them.
        \li On \macos, select \key Shift to select a range of components or
            \key Cmd to select multiple single components.
    \endlist

    You can \l{Lock components}{lock other components} in \uicontrol Navigator to
    make multiselection easier.

    \section1 Copy and paste formatting

    You can copy property values from a component and paste them to one or
    several other components. The values are applied if the target components
    have those particular properties.

    To copy property values from a component, right-click it in the
    \uicontrol 2D or \uicontrol Navigator view and select \uicontrol Edit >
    \uicontrol {Copy Formatting}.

    To apply the values to one or several other components, select them in the
    \uicontrol {Navigator} or \uicontrol {2D} view, and
    then right-click and select \uicontrol Edit > \uicontrol {Apply Formatting}.

    \section1 Edit properties inline

    You can double-click components in the \uicontrol {2D} view 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} {Selecting Edit Color from the context menu in the 2D view.}

    \section1 Edit properties in multiple views

    You can open multiple \uicontrol Properties views to edit the properties of multiple nodes
    simultaneously. You can lock each of the \uicontrol Properties views to prevent the subject node from
    changing by each selection.

    \note To edit properties in multiple views, activate the
    \uicontrol {Multi Property Editor} extension.

    To edit the properties of multiple nodes simultaneously:
      \list 1
        \li In \uicontrol Navigator, select any node and open the
            \uicontrol {Properties} view to edit its properties.
        \li In \uicontrol Properties, to open another \uicontrol Properties view for editing
            properties of another node:
          \list 1
            \li Select \imagelockoff to prevent the subject node from changing.
            \li In \uicontrol Navigator, select another node.
            \li In \uicontrol Properties, select \imageplus to edit its properties
                in another \uicontrol Properties view.
          \endlist
        \li Edit the properties in each of the \uicontrol Properties views as needed.
                \image {opening-multiple-properties-views.webp} {Opening a new Properties view to edit the properties of another node.}
      \endlist

    \section1 Get help for properties

    \list
        \li For information about setting common component properties, see
            \l{Set basic component properties}.
        \li For more information about the properties available for a
            component, select \key {F1} or see \l{Component types}
            and \l{Make layouts scalable}.
    \endlist

    \sa {Activate extensions}, {Use UI components}{How to: Use UI components},
    {Qt Quick UI design}, {Designing Qt Quick UIs}
*/
