Command <dialog>
Command dialog and keyboard shortcuts palette for web apps.
Features
- Keyboard navigation
- Build in dark/light themes
- Customizable action shortcuts with hotkeys.js
- Responsive design
- Native
<dialog>
element - Fuzzy search with Fuse.js
Install
npm i cmd-dialog
From CDN
<script type="module" src="https://esm.run/cmd-dialog"></script>
or inside module script
<script type="module">
import cmdDialog from 'https://esm.run/cmd-dialog';
</script>
Usage
Attributes
theme
- Theme of the dialog. Possible values: light
or dark
. Default value is taken from browser preference.hotkey
- List of hotkeys. Default value: ctrl+k,cmd+k
.placeholder
- Placeholder text for the search input. Default value: Type a command or search...
.note
- The note in the footer of the dialog box. Default value show number of options.
Credits
- LitElement - A simple base class for creating fast, lightweight web components.
- Fuse.js - Lightweight fuzzy-search library.
- hotkeys.js - A robust Javascript library for capturing keyboard input.
- Ninja Keys - Keyboard shortcuts for any web application.