feat(StatusModal): expose loaded content

As discussed in #237, this is needed for consumers to access content
children from outside `content`.

Usage:

```qml
StatusModal {
  id: modal
  content: StatusBaseText {
      text: "Foo"
  }

  rightButtons: [
      StatusButton {
          text: "Change text"
          onClicked: {
              modal.contentComponent.text = "Bar"
          }
      }
  ]
}
```

Fixes #237
This commit is contained in:
Pascal Precht 2021-07-07 13:54:26 +02:00 committed by Pascal Precht
parent 1321760442
commit bd383e8746
2 changed files with 31 additions and 0 deletions

View File

@ -33,6 +33,11 @@ Column {
onClicked: modalExample.open() onClicked: modalExample.open()
} }
StatusButton {
text: "Modal with changable content"
onClicked: modalWithContentAccess.open()
}
StatusModal { StatusModal {
id: simpleModal id: simpleModal
anchors.centerIn: parent anchors.centerIn: parent
@ -142,4 +147,28 @@ Column {
icon.name: "info" icon.name: "info"
} }
} }
StatusModal {
id: modalWithContentAccess
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
content: StatusBaseText {
id: text
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithContentAccess.contentComponent.text = "Changed!"
}
}
]
}
} }

View File

@ -16,6 +16,7 @@ QC.Popup {
property alias headerActionButton: headerImpl.actionButton property alias headerActionButton: headerImpl.actionButton
property StatusModalHeaderSettings header: StatusModalHeaderSettings {} property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
property alias contentComponent: contentLoader.item
property alias rightButtons: footerImpl.rightButtons property alias rightButtons: footerImpl.rightButtons
property alias leftButtons: footerImpl.leftButtons property alias leftButtons: footerImpl.leftButtons
@ -56,6 +57,7 @@ QC.Popup {
} }
Loader { Loader {
id: contentLoader
active: true active: true
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
sourceComponent: statusModal.content sourceComponent: statusModal.content