Add bindings between properties | Qt Creator Documentation

- Qt Creator Documentation
- Add bindings between properties
- Qt Creator 19.0.0

Using UI components ◦ Add custom properties

# Add bindings between properties

To dynamically change the behavior of a component, you can create a 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 Property Binding.

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

## Create bindings between component properties

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

1. Place two components in the 2D view.

2. Name the first component as viewBox.
3. Name the second component as connectBox.
4. Apply a thick black Border and a blue Color to the viewBox component.
5. Select the connectBox component.
6. Select Bindings from the Connections view.
7. Select the (Add) button to add a binding to the currently selected component in the binding editor.

   The binding editor.

8. In From, select viewBox as the parent component. Then select its border.color property.
9. In To, the connectBox component is already selected as the target component. Select color from the drop-down below to set its affected property.
10. The border.color of the viewBox component is applied to the color of the connectBox component.

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

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

### Summary of logical operators

You can use the following logical operators in the expressions to combine several conditions in one expression:

Operator | Meaning | Evaluates to `true` if
--- | --- | ---
! | NOT | The condition is not met.
&& | AND | Both conditions are met.
|| | OR | Either of the conditions is met.
< | Less than | The left operand is less than the right operand.
> | Greater than | The left operand is greater than the right operand.
>= | Greater than or equal | The left operand is greater than or equal to the right operand.
<= | Less than or equal | The left operand is less than or equal to the right operand.
== | Equal | The operands are equal.
=== | Strict equal | The operands are equal and of the same type.
!= | Not equal | The operands are not equal.
!== | Strict not equal | The operands are of the same type but not equal, or are of different type.

In addition, you can use arithmetic operators to compare numbers before checks. However, we recommend that you create separate properties for this purpose whenever possible.

See also How to: Use UI components, Qt Quick UI design, and Designing Qt Quick UIs.

Using UI components ◦ Add custom properties