Command Palette API
Actions can be defined with the defineActions API.
These actions can then be passed to CommandPalette
Render CommandPalette at the root of your application.
<script>
import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette';
{/* Render command palette at the root of your application */}
// define actions using the defineActions API
const paletteMethods = createStoreMethods();
<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>
<CommandPalette
actions={defineActions([
{
// Unique identifier for your action
id: '1',
// title for you action
title: 'Go to github',
// subtitle for the action
subTitle: 'Press to redirect to github',
// description of the action
description: '1. something going here idk about?',
// called when the action is triggered along with palette state and methods
onRun: ({ action, storeProps, storeMethods }) => {
console.log('do something');
},
// decide whether to run the action based on your palette state
canActionRun: ({ action, storeProps, storeMethods }) => {
return true;
},
// keyboard shortcut to call the action
shortcut: 'G G',
// allows searching for actions via keywords
keywords: ['git', 'github']
}
])}
/>
</script>