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

/*!
    \page quick-property-bindings.html
    \previouspage creator-how-tos.html

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

    \title Add bindings between properties

    To dynamically change the behavior of a component, you can create a
    \e binding between the properties of two components. To create a property
    binding, a property is assigned a JavaScript expression that evaluates to
    the desired value. Behind the scenes, the variables in the binding
    expression are monitored. When a change is detected, the binding
    expression is re-evaluated and the new result is applied to the property.

    At its simplest, a binding may be a reference to another property.
    For example, the height of a component can be bound to the height of its
    parent, so that when the parent height changes, the component height is
    adjusted automatically.

    For more information about the use of property bindings, see
    \l{Property Binding}.

    To create bindings between components, go to \uicontrol Connections >
    \uicontrol Bindings.

    \image {qmldesigner-bindings.webp} {The Bindings tab in the Connections view.}

    \section1 Create bindings between component properties

    To bind a property of a component to the property of another component:

    \list 1

        \li Place two components in the \uicontrol {2D} view.

        \image {qmldesigner-components-before-binding.webp} {Two components next to each other in the 2D view.}

        \li Name the first component as \e {viewBox}.
        \li Name the second component as \e {connectBox}.
        \li Apply a thick \e black \uicontrol Border and a \e blue \uicontrol{Color} to the \e {viewBox} component.
        \li Select the \e {connectBox} component.
        \li Select \uicontrol Bindings from the \uicontrol Connections view.
        \li Select the \imageplus
             (\uicontrol Add) button to add a binding to the currently selected
            component in the binding editor.

        \image {qmldesigner-updated-bindings-editor.webp} {The binding editor.}
        \caption The binding editor.

        \li In \uicontrol From, select \e {viewBox} as the parent component. Then
            select its \uicontrol {border.color} property.
        \li In \uicontrol To, the \e {connectBox} component is already selected
            as the target component. Select \uicontrol {color} from the drop-down
            below to set its affected property.
        \li The \uicontrol {border.color} of the \e {viewBox} component is
            applied to the \uicontrol {color} of the \e {connectBox} component.

        \image {qmldesigner-components-after-binding.webp} {Two components next to each other in the 2D view with the property binding applied.}

    \endlist

    All bindings have an automated JavaScript expression in the code. For more
    information, see \l{Set bindings}.

    For an example of creating property bindings, see
    \l{Use states to change component property values}.

    \include creator-logical-operators.qdocinc logical operators

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