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

/*!
    \page quick-component-instances.html
    \previouspage creator-how-tos.html

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

    \title Create component instances

    \QMLD comes with \e {preset components} that you can use in your UI by
    creating instances of them.

    \image {qmldesigner-editing-components.webp} {Creating component instances.}

    To create component instances and edit their properties:

    \list 1
        \li Drag components from \uicontrol Components (1) to the
            \uicontrol {Navigator} (2) or \uicontrol {2D} (3) view.
            This creates instances of the components in the current
            component file.
        \li Select component instances 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 {Set basic component properties}.
        \li To change the appearance and behavior of the component instances
            in ways that are not supported in \QMLD by default, you can define
            custom properties on the \uicontrol {Properties} tab in the
            \uicontrol {Connections} view.
            \image {add-updated-local-custom-property.webp} {Connections View Properties tab.}
            For more information, see \l{Add custom properties}.
        \li To enable users to interact with the component instances, connect
            the instances to signals on the \uicontrol Connections tab in the
            \uicontrol {Connections} view. For example, you can specify what
            happens when a component instance is clicked. For more information,
            see \l{Connect components to signals}.
            \image {qmldesigner-connections.webp} {Connections View Connections tab.}
        \li To dynamically change the behavior of a component instance when
            another component instance changes, create bindings between them on
            the \uicontrol Bindings tab in the \uicontrol {Connections} view.
            For more information, see \l{Add bindings between properties}.
            \image {qmldesigner-bindings.webp} {Connections view Bindings tab.}
        \li Add states to apply sets of changes to the property values of one
            or several component instances in the \uicontrol States view.
            For more information, see \l{Working with states}.
        \li Animate the properties of component instances in the
            \uicontrol Timeline view. For more information, see
            \l{Create timeline animations}.
    \endlist

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