Command bar for Dash

Dash Python
1

Hi,
I have been playing around with react based KBar library and thought it would be cool to have it as component in Dash.

So here is dash-kbar.

Pressing ctrl + k will open up the command window.

Usage

You pass in a list of dicts as actions. There are different aspects of the actions that you can customize (section, subtitle, keywords, shortcut, parent etc). When the user selects an item (either through the menu or using shortcuts, the selected prop changes to the ID of the selected item.

Below is an example. (not the one in the animation! :slight_smile: )

from dash import Dash, callback, html, Input, Output
from dash_kbar import DashKbar

app = Dash(__name__)

app.layout = html.Div(
    [
        DashKbar(
            id="input",
            actions=[
                {
                    "name": "Action 1",
                    "id": "action1",
                    "section": "Section 1",
                    "shortcut": ["a"],
                },
                {
                    "name": "Action 2",
                    "id": "action2",
                    "section": "Section 1",
                    "shortcut": ["b"],
                    "priority": 1,
                },
                {
                    "name": "Action 3",
                    "id": "action3",
                    "section": "Section 1",
                    "keywords": ["action", "three"],
                },
                {
                    "name": "Parent",
                    "id": "parent",
                    "section": "Section 1",
                    "actionable": False,
                    "shortcut": ["p"],
                },
                {"name": "Child 1", "id": "child1", "parent": "parent"},
                {"name": "Child 2", "id": "child2", "parent": "parent"},
            ],
            debug=True,
            style={
                "selectedLeftBorderColor": "red",
            },
        ),
        html.Button("Add action", id="button"),
        html.Div(id="output"),
    ]
)


@callback(Output("output", "children"), Input("input", "selected"))
def update_output(selected):
    if selected is None:
        return "No action selected"
    return f"Action {selected} selected"


if __name__ == "__main__":
    app.run_server(debug=True)

Any suggestions to improve are welcome!

1 Like