dash kbar

cmd + k interface for dash applications

dash_kbar_animation

Installation

pip install dash_kbar

Usage

dash_kbar.DashKbar(
    id="input",
    actions=[
        {"name": "Action 1", "id": "action1"},
        {"name": "Action 2", "id": "action2"},
    ],
    style={
        "itemTextColor": "grey",
    },
)

Look into usage.py for a functioning example usage.

API

The following properties are accepted by DashKbar.

Property	Description	Type	Default
`id`	The ID used to identify this component in Dash callbacks	`str`	`None`
`actions`	List of actions to display in the kbar	`list[dict[str, str]]`	`[]`
`style`	Style of the kbar	`dict[str, str]`	`{}`
`selected`	ID of the selected item. You can use this prop in callbacks.	`str`	`None`
`debug`	Show the id of the selected item in the browser console	`bool`	`False`

Actions

Actions should be a list of dictionaries with the following keys.

Key	Description	Type	Required
`name`	Name of the action	`str`	Yes
`id`	ID of the action	`str`	Yes
`subtitle`	Subtitle of the action	`str`	No
`keywords`	Keywords of the action	`list[str]`	No
`section`	Section of the action	`str`	No
`icon`	Icon of the action	`str`	No
`parent`	If this is a child item, give the id of the parent	`str`	No
`actionable`	Boolean denoting whether selecting this action will change the `selected` property. Set this to `False` for parent actions where selecting the parent should show the child actions.	`bool`	No
`shortcut`	Shortcut of the action	`list[str]`	No

Styling

Style should be a dictionary with one or more of the following keys.

Key	Description	Default
`maxWidth`	Maximum width of the kbar	`600px`
`width`	Width of the kbar	`100%`
`background`	Background color of the kbar	`white`
`searchBackground`	Background color of the search input box	`transparent`
`searchTextColor`	Text color of the search input box	`grey`
`fontFamily`	Font family of the kbar	`sans-serif`
`itemTextColor`	Text color of the items	`grey`
`itemSubtitleTextColor`	Text color of the item subtitles	`grey`
`sectionTitleTextColor`	Text color of the section titles	`grey`
`selectedBackground`	Background color of the selected item	`rgba(34, 139, 230, 0.1)`
`selectedTextColor`	Text color of the selected item	`grey`
`selectedLeftBorderColor`	Left border color of the selected item	`rgba(34, 139, 230, 1)`
`boxShadow`	Box shadow of the kbar	`0 0 20px rgba(0, 0, 0, 0.1)`
`borderRadius`	Border radius of the kbar	`8px`
`searchBoxFontSize`	Font size of the search input box	`16px`
`resultFontSize`	Font size of the items	`14px`
`subtitleFontSize`	Font size of the item subtitles	`12px`
`sectionTitleFontSize`	Font size of the section titles	`10px`

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash_kbar-0.4.0.tar.gz (101.1 kB view details)

Uploaded Dec 29, 2023 Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

The dropdown lists show the available interpreters, ABIs, and platforms. Enable javascript to be able to filter the list of wheel files.

dash_kbar-0.4.0-py3-none-any.whl (101.3 kB view details)

Uploaded Dec 29, 2023 Python 3

File details

Details for the file dash_kbar-0.4.0.tar.gz.

File metadata

Download URL: dash_kbar-0.4.0.tar.gz
Upload date: Dec 29, 2023
Size: 101.1 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: twine/4.0.2 CPython/3.9.18

File hashes

Hashes for dash_kbar-0.4.0.tar.gz
Algorithm	Hash digest
SHA256	`d481dee2e9d860a59e9519ead32a0efee7093bd50c4d33423008fcfa32213089`
MD5	`b383c0b69c7e8495ec50c2e6aeb60bb9`
BLAKE2b-256	`9eafd43e2e933070d4d415ac2cbdd99ea624b939394d979513ba81f78cde9b8a`

See more details on using hashes here.

File details

Details for the file dash_kbar-0.4.0-py3-none-any.whl.

File metadata

Download URL: dash_kbar-0.4.0-py3-none-any.whl
Upload date: Dec 29, 2023
Size: 101.3 kB
Tags: Python 3
Uploaded using Trusted Publishing? No
Uploaded via: twine/4.0.2 CPython/3.9.18

File hashes

Hashes for dash_kbar-0.4.0-py3-none-any.whl
Algorithm	Hash digest
SHA256	`858fdb2ef7d25ae5e512bb7de93cd9976eb2dde207d751d2f95665699c5ecdb8`
MD5	`15da61edf6cd36100e37da644af36905`
BLAKE2b-256	`2a85aa91564fc78e1380ecb81d966961b06aeb49684567af3cf1a8557ebd46f4`