cmd + k interface for dash applications
Project description
dash kbar
cmd + k interface for dash applications
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 |
Project details
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)
Built Distribution
dash_kbar-0.4.0-py3-none-any.whl
(101.3 kB
view details)
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:
- Size: 101.1 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.9.18
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | d481dee2e9d860a59e9519ead32a0efee7093bd50c4d33423008fcfa32213089 |
|
MD5 | b383c0b69c7e8495ec50c2e6aeb60bb9 |
|
BLAKE2b-256 | 9eafd43e2e933070d4d415ac2cbdd99ea624b939394d979513ba81f78cde9b8a |
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:
- Size: 101.3 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.9.18
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 858fdb2ef7d25ae5e512bb7de93cd9976eb2dde207d751d2f95665699c5ecdb8 |
|
MD5 | 15da61edf6cd36100e37da644af36905 |
|
BLAKE2b-256 | 2a85aa91564fc78e1380ecb81d966961b06aeb49684567af3cf1a8557ebd46f4 |