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

// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************

/*!
    \page qt-quick-toolbars.html
    \if defined(qtdesignstudio)
    \previouspage qtquick-text-editor.html
    \else
    \previouspage creator-how-tos.html
    \endif

    \ingroup creator-how-to-edit
    \ingroup studio-how-to-code

    \title Edit properties of QML types

    When you edit QML code in the code editor, you specify the properties of QML
    types. For some properties, such as colors and font names, this is not a
    trivial task. For example, few people can visualize the color \c {#18793f}.
    To easily edit these properties, use the Qt Quick toolbars.

    When you select a QML type in the code and a light bulb icon appears
    (\inlineimage {icons/refactormarker.png} {Light bulb icon}), select
    it to open a toolbar for changing the properties of that type.

    \section1 Preview images

    Edit the properties of
    \l {Border Image} and
    \if defined(qtdesignstudio)
    \l {Images}{Image} items
    \else
    \l Image items
    \endif
    to scale and tile the images, replace them with other images,
    preview them, and change the image margins.

    \image {qml-toolbar-image.png} {Qt Quick toolbar for images}

    To preview an image, double-click it on the toolbar. In the preview
    dialog, you can zoom the image. Drag the image margins to change them.

    \image {qml-toolbar-image-preview.png} {Image preview dialog}

    \section1 Format text

    Edit the properties of \l{Text} items to change the font family and size,
    as well as text formatting, style, alignment, and color.

    \note Move the mouse pointer over a color hex value in the code editor to
    see the color as a tooltip.

    If a property is assigned an expression instead of a value, you
    cannot use the toolbar to edit it. The button for editing the property
    is disabled.

    \image {qml-toolbar-text.png} {Qt Quick toolbar for text}

    By default, font size is specified as pixels. To use points, instead,
    change \uicontrol px to \uicontrol pt in the size field.

    \section1 Preview animations

    Edit the properties of PropertyAnimation items and the items that inherit it
    to change the easing curve type and duration. For some curves, you can also
    specify amplitude, period, and overshoot values.

    \image {qml-toolbar-animation.png} {Qt Quick toolbar for animation}

    Select the play button to preview your changes.

    \section1 Edit rectangles

    Edit the properties of
    \if defined(qtdesignstudio)
    \l {basic-rectangle}{Rectangle}
    \else
    Rectangle
    \endif
    items to change the fill and border colors and add gradients.

    \image {qml-toolbar-rectangle.png} {Qt Quick toolbar for rectangles}

    To add gradient stop points, click above the gradient bar. To remove
    stop points, drag them upwards.

    \section1 Show toolbars immediately

    To open toolbars immediately when you select a QML type, select
    \preferences > \uicontrol {Qt Quick} >
    \uicontrol {QML/JS Editing} > \uicontrol {Always show Qt Quick Toolbar}.

    \image {qtcreator-qml-js-editing.webp} {QML/JS Editing tab in Qt Quick preferences}

    \section1 Pin toolbars

    Drag the toolbar to pin it to another location. Select
    \inlineimage {icons/pin.png} {Pin} to unpin the toolbar and move
    it to its default location.

    To pin toolbars by default, select \uicontrol {Pin Qt Quick Toolbar}.

    \if defined(qtcreator)
    \sa {Tutorial: Qt Quick application}
    \endif
*/