mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-10 14:26:34 +00:00
03c6da6e9f
This introduces a new `StatusSelect` component which is a select form control.
The `model` property can be used to apply a `ListModel` for dynamic data.
To give users full control over what the menu items look like, `StatusSelect`
exposes a `selectMenu.delegate` property.
Most of the time this should be a `StatusMenuItemDelegate` to get access to the
comple `MenuItem` component (remember that `StatusMenuItem` is merely an `Action`
type).
`StatusMenuItemDelegate` derives most of its behaviour by its applied `action`,
so the easiest way to construct a dynamic select with StatusQ menu item look and feel
is a combination of `StatusMenuItemDelegate` and `StatusMenuItem` as shown below.
Further more, because `StatusSelect` can't know what the `delegate` is going to look like
it also can't decide what data goes into a `selectedItem`. Therefore, it offers another API,
the `selectedItemComponent` which can be any component. This component can then be accessed
by menu item actions to set corresponding properties.
Usage:
```qml
import StatusQ.Controls 0.1
StatusSelect {
label: "Some label"
model: ListModel {
ListElement {
name: "Pascal"
}
ListElement {
name: "Khushboo"
}
ListElement {
name: "Alexandra"
}
ListElement {
name: "Eric"
}
}
selectMenu.delegate: StatusMenuItemDelegate {
statusPopupMenu: select
action: StatusMenuItem {
iconSettings.name: "filled-account"
text: name
onTriggered: {
selectedItem.text = name
}
}
}
selectedItemComponent: Item {
id: selectedItem
anchors.fill: parent
property string text: ""
StatusBaseText {
text: selectedItem.text
anchors.centerIn: parent
color: Theme.palette.directColor1
}
}
}
```
Closes #436
55 lines
1.2 KiB
QML
55 lines
1.2 KiB
QML
import QtQuick 2.14
|
|
import QtQuick.Controls 2.14
|
|
import QtQuick.Layouts 1.14
|
|
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Popups 0.1
|
|
|
|
import Sandbox 0.1
|
|
Column {
|
|
spacing: 8
|
|
|
|
StatusSelect {
|
|
id: select
|
|
label: "Some label"
|
|
model: ListModel {
|
|
ListElement {
|
|
name: "Pascal"
|
|
}
|
|
ListElement {
|
|
name: "Khushboo"
|
|
}
|
|
ListElement {
|
|
name: "Alexandra"
|
|
}
|
|
ListElement {
|
|
name: "Eric"
|
|
}
|
|
}
|
|
selectMenu.delegate: StatusMenuItemDelegate {
|
|
statusPopupMenu: select
|
|
action: StatusMenuItem {
|
|
iconSettings.name: "filled-account"
|
|
text: name
|
|
onTriggered: {
|
|
selectedItem.text = name
|
|
}
|
|
}
|
|
}
|
|
selectedItemComponent: Item {
|
|
id: selectedItem
|
|
anchors.fill: parent
|
|
property string text: ""
|
|
|
|
StatusBaseText {
|
|
text: selectedItem.text
|
|
anchors.centerIn: parent
|
|
color: Theme.palette.directColor1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|