KDE

5293 readers

93 users here now

KDE is an international technology team creating user-friendly free and open source software for desktop and portable computing. KDE’s software runs on GNU/Linux, BSD and other operating systems, including Windows.

Plasma 6 Bugs

If you encounter a bug, proceed to https://bugs.kde.org, check whether it has been reported.

If it hasn't, report it yourself.

PLEASE THINK CAREFULLY BEFORE POSTING HERE.

Developers do not look for reports on social media, so they will not see it and all it does is clutter up the feed.

founded 1 year ago

MODERATORS

[email protected]

What is the correct way to place a Kirigami.SearchField inside the window header? (lemmy.kde.social)

submitted 1 year ago by [email protected] to c/[email protected]

4 comments fedilink hide all child comments

Hello! I'm trying to do this:

but I can't seem to find a "good" way to do it:

if I just place it in the Kirigami.Page it is displayed, well, in the page, as in the image above.

Kirigami.ApplicationWindow {
   pageStack.initialPage: Kirigami.ScrollablePage {
      Kirigami.SearchField { // TODO move in the page header
         id: searchField
         Layout.fillWidth: true
      }
   }
}

if I place it in the header of the window it is displayed before the actual header even:

Kirigami.ApplicationWindow {
    header: Kirigami.SearchField { // TODO move in the page header
         id: searchField
         Layout.fillWidth: true
      }
   pageStack.initialPage: Kirigami.ScrollablePage {
     
   }
}

if I place it just before the Page it goes inside the header, but all aligned to the top instead of nicely in the center:

Kirigami.ApplicationWindow {
    Kirigami.SearchField { // TODO move in the page header
         id: searchField
         Layout.fillWidth: true
      }
   pageStack.initialPage: Kirigami.ScrollablePage {
     
   }
}

what is the correct way of doing this?

thanks in advance!

top 4 comments

sorted by: hot top controversial new old

[–] [email protected] 4 points 1 year ago* (last edited 1 year ago) (2 children)

So what you want to do is put a Kirigami.SearchField inside the global toolbar created by the Kirigami.Page. It's not a header.

In the first case you're putting it inside the page, and because it's a direct child of a Kirigami.Page, it is automatically laid out for you, which is fine, but not what you want.

In the second case you're putting it in the header of the ApplicationWindow, but you actually want to put in the global toolbar of the page, so it's not what you want.

In the third case you're just putting a SearchField before the initialPage, so it's loaded on the same level as the page, it's not what you want.

You can put it in the header property of the Kirigami.Page, but the header area of the page doesn't include the global toolbar, so they just happen to be close together by chance.

The way I'd have expected to do that would be to override the globalToolBarItem of the Kirigami.Page, but it's read only, so I don't really know how to help you with that. You should ask in the Kirigami Matrix room or in the Discuss forum.

[–] [email protected] 2 points 1 year ago

Also, you should only use Layout attached properties when the object you're using it on is a child of a Layout, for example:

ApplicationWindow {
    ColumnLayout {
        anchors.fill: parent // Not a child of a layout, so you use anchors
        Controls.Button {
            Layout.fillWidth: true // It's a child of a layout, so you use Layout.fillWidth
        }
    }
}

[–] [email protected] 1 points 1 year ago

The way I'd have expected to do that would be to override the globalToolBarItem of the Kirigami.Page, but it's read only, so I don't really know how to help you with that. You should ask in the Kirigami Matrix room or in the Discuss forum.

Thank you very much for the detailed answer! So there is no "quick and easy" way to do it :(
I'll try to look for info in the matrix room you linked, thanks!

[–] [email protected] 2 points 1 year ago

I am not an expert in kirigami, but I think you have to roll your own version of ApplicationWindow.