luna-command-palette v0.3.1

Luna Command Palette

Command palette.

Demo

https://luna.liriliri.io/?path=/story/command-palette

Install

Add the following script and style to your page.

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-command-palette/luna-command-palette.css" />
<script src="//cdn.jsdelivr.net/npm/luna-command-palette/luna-command-palette.js"></script>

You can also get it on npm.

npm install luna-command-palette --save

import 'luna-command-palette/luna-command-palette.css'
import LunaCommandPalette from 'luna-command-palette'

Usage

const container = document.getElementById('container')
const commandPalette = new LunaCommandPalette(container, {
  placeholder: 'Type a command',
  shortcut: 'Ctrl+P',
  commands: [
    {
      title: 'Reload Page',
      shortcut: 'Ctrl+R',
      handler(e) {
        if (e && e.preventDefault) {
          e.preventDefault()
        }
        location.reload()
      }
    }
  ]
})
commandPalette.show()

Configuration

• commands(ICommand[]): Commands to show.
• placeholder(string): Search input placeholder.
• shortcut(string): Keyboard shortcut for opening the command palette.

Api

hide(): void

Hide command palette.

show(e: any): void

Show command palette.

Types

ICommand

• title(string): Command title.