Skip to content

Latest commit

 

History

History
72 lines (51 loc) · 1.32 KB

README.md

File metadata and controls

72 lines (51 loc) · 1.32 KB
Raw

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.