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

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

    \title Using UI components

    \quotation
    \l {Use UI components}{How to: Use UI components}
    \endquotation

    A \e {component} is specified within one file (with the file extension
    \c ui.qml or \c .qml). For example, a Button component may be defined
    in \c Button.ui.qml. Typically, the visual appearance of a component
    is defined in a \e {UI file} (\c {ui.qml}). To create component files,
    you can use \l{Create components from scratch}{wizard templates}, or
    \l{Turn component instances into custom components}
    {move component instances into separate component files}.

    The \uicontrol Component view lists the available components.

    \image {qtquick-components-tab.png} {Components view.}

    \uicontrol Components displays QML types from Qt modules that you import
    to the project. The modules contain visual components, such as basic shapes
    and UI controls, and add functionality to the project.

    You can style the UI controls to have the look and feel of a particular
    operating system, such as \macOS, Windows, Android, or iOS.

    Some modules have no visible components. For example, the
    \uicontrol {Qt.Multimedia} module adds support for audio and video
    files to your UI.

    For more information about creating your own components, see
    \l{Create custom components}.

    \section1 Component IDs

    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.
    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}.

    \section1 Using components economically

    Components come with performance costs. To use components efficiently and
    economically:

    \list
        \li Componentize your design by packaging your resources into reusable
            components that can be conveniently recombined to suit the needs of
            your UI.
        \li Use as few components as necessary. To minimize the number of
            components, use \l{Add property aliases}{alias properties} and
            \l{Working with states}{states} to create the differences in your
            component instances. We recommend reusing components
            instead of duplicating them, so the components do not need to be
            processed as completely new component types. This reduces loading
            and compilation time as well as the size of the binary.
        \li Any content that is data-driven should be exported as a public
            property (alias property) of the relevant component. For example,
            a speedometer should have an \c int or \c real property for speed
            to which the UI is bound.
        \li Separate UI from the application logic. Designers should work with
            the \l{UI files} (\c{}.ui.qml}), while developers should work on the
            corresponding implementation files (\c{.qml}) to define their
            programmatic behaviors or JavaScript. This enables iteration from
            both the design and development side of the process without the
            risk of overwriting each other's work.
    \endlist

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

/*!
    \page quick-how-to-import-modules.html
    \previouspage creator-reference.html

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

    \title Import modules

    When you \l{Creating projects}{create projects}, the wizard imports the Qt
    modules typically needed in such projects. For example, a Qt Quick
    application project contains basic components and UI controls.

    To view the list of available modules, select \imageplus.
    Most commonly used modules are placed at the top of the list in
    alphabetical order. You can search for components and modules by entering
    search criteria in the \uicontrol Search field.

    Select the module to add it to \uicontrol Components.

    \image {qtquick-components-tab-add.png} {Select modules to add.}

    This adds an \e {import statement} to the component code that you can see in
    the \uicontrol {Code} view or \uicontrol Edit mode. For example, if you add
    the \uicontrol QtQuick.Controls module, the following import statement
    is added to the code: \c {import QtQuick.Controls}.

    Because the added components and modules are packaged with your UI into the
    final application package, it is recommended that you select
    \uicontrol {Remove Module} to remove the ones you don't use in the project.

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