# SelectionBar

```
import QtQuick 2.15
import QtQuick.Controls 2.15
import org.mauikit.controls 1.3 as Maui

Maui.ApplicationWindow
{
    id: root

    Maui.Page
    {
        anchors.fill: parent

        showCSDControls: true
        floatingFooter: true
        flickable: listBrowser.flickable //helps to keep the content from under the selection bar at the end.

        Component.onCompleted: {
            listBrowser.currentIndex = -1
        }

        headBar.rightContent: Switch
        {
            text: "Single selection"
            checked: selectionBar.singleSelection
            onToggled: selectionBar.singleSelection = !selectionBar.singleSelection
        }

        Maui.ListBrowser
        {
            id: listBrowser

            anchors.fill: parent
            anchors.margins: 10

            horizontalScrollBarPolicy: ScrollBar.AsNeeded
            verticalScrollBarPolicy: ScrollBar.AsNeeded

            model: 10

            delegate: Maui.ListBrowserDelegate
            {
                id: list

                property string id : index // we need an unique ID for the selectio nbar

                width: ListView.view.width
                height: 60

                label1.text: "An example delegate."
                label2.text: "The ID of this element is " + id

                iconSource: "folder"

                checkable: false

                Connections
                {
                    target: selectionBar
                    function onUriRemoved(uri) //watch when a uri is removed from the selection bar
                    {
                        if(uri == list.id)
                        {
                            list.checked = false
                        }
                    }

                    function onUriAdded(uri) //watch when an uri is successfully added and mark the delegate as checked
                    {
                        if(uri == list.id)
                        {
                            list.checked = true
                        }
                    }

                    function onCleared() //watch when the selection has been cleared and uncheck all the delegates
                    {
                        list.checked = false
                    }
                }

                onClicked: {
                    list.checked = list.checked ? false: true
                    list.checked ? selectionBar.append(list.id, ({'title': "Testing"})) : selectionBar.removeAtUri(list.id)
                }
            }
        }

        footer: Maui.SelectionBar
        {
            id: selectionBar

            anchors.horizontalCenter: parent.horizontalCenter
            width: Math.min(parent.width-(Maui.Style.space.medium*2), implicitWidth)
            maxListHeight: root.height - (Maui.Style.contentMargins*2)

            Action
            {
                icon.name: "love"
                onTriggered: console.log(selectionBar.getSelectedUrisString())
            }

            Action
            {
                icon.name: "folder"
                onTriggered: console.log(selectionBar.contains("0"))
            }

            Action
            {
                icon.name: "list-add"
            }

            onExitClicked: clear()
        }
    }
}

```

<figure><img src="/files/HmHwDnw0DV2CtcdLgZlJ" alt=""><figcaption></figcaption></figure>

## Propiedades

{% embed url="<https://api.kde.org/mauikit/mauikit/html/classSelectionBar.html>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.novaflowos.com/start/mauikit/controles/selectionbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.