Description

This is a button which carries a title and shows a flyout when clicked. The flyout can hold any content.

API properties

bool opened

True if the dropdown is currently opened

string title

Sets the text shown on the header

string titleColor

Sets the color of the text shown on the header

bool replaceDropDownTitle

On true the title of the DropDown box will be replaced to the selectedItem

bool showTitleInMenu

On true the title of the DropDown box will be shown in the ActionMenu

alias model

Contains the model of the menu

alias payload

Contains the payload of the menu

alias iconRow

Can hold a row of icons

int minWidth

The minimum width of the menu.

int maxWidth

The maximum width of the menu. Text that exceeds the maximum width will be elided.

string selectedTitle

The currently selected title

alias selectedIndex

Int, stores the index of the currently selected item. Can be set from outside, but make sure it's set after a model is set, because setting a model resets the selectedIndex to -1. See the example below where selectedIndex is set onCompleted.

Private properties

-

Signals

expandingChanged

Emitted if the box switches between expanded and not expanded

Parameters:

• bool expanded, indicates if the box is expanded or not

triggered

Returns the index of the clicked entry.

Parameters:

• int parameter, index of the current Item.

Functions

-

Example

DropDown {
    id: ddown

    anchors.centerIn: parent

    title: "DropDown"
    titleColor: "black"

    width: 400
    minWidth: 400
    maxWidth: 440

    model: [  "First choice", "Second choice", "Third choice" ]
    payload: [ 1, 2, 3 ]

    iconRow: [
        Image {
            height: parent.height * 0.9
            anchors.verticalCenter: parent.verticalCenter
            fillMode: Image.PreserveAspectFit
            source: "image://themedimage/images/camera/camera_lens_sm_up"
        }
    ]

    onTriggered: {
        //do something
    }

    Component.onCompleted: {
        selectedIndex = 0
    }
}