status-desktop/ui/StatusQ/sandbox/pages/StatusSelectPage.qml

68 lines
1.5 KiB
QML
Raw Normal View History

feat(StatusQ.Controls): introduce `StatusSelect` 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
2021-10-12 15:29:40 +00:00
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
feat(StatusQ.Controls): introduce `StatusSelect` 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
2021-10-12 15:29:40 +00:00
Column {
spacing: 20
ListModel {
id: commmonModel
ListElement {
name: "Pascal"
}
ListElement {
name: "Khushboo"
}
ListElement {
name: "Alexandra"
}
ListElement {
name: "Eric"
}
}
feat(StatusQ.Controls): introduce `StatusSelect` 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
2021-10-12 15:29:40 +00:00
StatusBaseText {
font.pixelSize: 16
color: Theme.palette.dangerColor1
text: "This component should no longer be used.<br />Please, use `StatusComboBox` instead."
textFormat: Text.MarkdownText
}
feat(StatusQ.Controls): introduce `StatusSelect` 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
2021-10-12 15:29:40 +00:00
StatusSelect {
id: select
label: "Some label"
model: commmonModel
feat(StatusQ.Controls): introduce `StatusSelect` 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
2021-10-12 15:29:40 +00:00
selectMenu.delegate: StatusMenuItemDelegate {
statusPopupMenu: select
action: StatusMenuItem {
iconSettings.name: "filled-account"
text: name
onTriggered: {
selectedItem.text = name
}
}
}
feat(StatusQ.Controls): introduce `StatusSelect` 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
2021-10-12 15:29:40 +00:00
selectedItemComponent: Item {
id: selectedItem
anchors.fill: parent
property string text: ""
StatusBaseText {
text: selectedItem.text
anchors.centerIn: parent
color: Theme.palette.directColor1
}
}
}
}