6e10959e40
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
|
||
|---|---|---|
| sandbox | ||
| src | ||
| .gitignore | ||
| CHANGELOG.md | ||
| README.md | ||
| statusq.qrc | ||
README.md
StatusQ
An emerging reusable QML UI component library for Status applications.
Usage
StatusQ introduces a module namespace that semantically groups components so they can be easily imported. These modules are:
- StatusQ.Core
- StatusQ.Core.Theme
- StatusQ.Core.Utils
- StatusQ.Components
- StatusQ.Controls
- StatusQ.Layout
- StatusQ.Platform
- StatusQ.Popups
Provided components can be viewed and tested in the sandbox application that comes with this repository. Other than that, modules and components can be used as expected.
Example:
import Status.Core 0.1
import Status.Controls 0.1
StatusInput {
...
}
Viewing and testing components
To make viewing and testing components easy, we've added a sandbox application to this repository in which StatusQ components are being build. This is the first place where components see the light of the world and can be run in a proper application environment.
Using Qt Creator
The easiest way to run the sandbox application is to simply open the provided sandbox.pro file using Qt Creator.
Using command line interface
To run the sandbox from within a command line interface, run the following commands:
$ git clone https://github.com/status-im/StatusQ
$ cd StatusQ/sandbox
$ ./scripts/build
Once that is done, the sandbox can be started with the generated executable:
$ ./bin/sandbox
More Documentation available on the wiki