| 1 | # Configure Shortcuts |
| 2 | |
| 3 | <Environment type="client" /> |
| 4 | |
| 5 | ## Getting started |
| 6 | |
| 7 | Create `./setup/shortcuts.ts` with the following content: |
| 8 | |
| 9 | ```ts twoslash [./setup/shortcuts.ts] |
| 10 | import type { NavOperations, ShortcutOptions } from '@slidev/types' |
| 11 | import { defineShortcutsSetup } from '@slidev/types' |
| 12 | |
| 13 | export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => { |
| 14 | return [ |
| 15 | ...base, // keep the existing shortcuts |
| 16 | { |
| 17 | key: 'enter', |
| 18 | fn: () => nav.next(), |
| 19 | autoRepeat: true, |
| 20 | }, |
| 21 | { |
| 22 | key: 'backspace', |
| 23 | fn: () => nav.prev(), |
| 24 | autoRepeat: true, |
| 25 | }, |
| 26 | ] |
| 27 | }) |
| 28 | ``` |
| 29 | |
| 30 | In the setup function, you can customize the keyboard shortcuts by returning a new array of shortcuts. The above example binds the `next` operation to <kbd>enter</kbd> and the `prev` operation to <kbd>backspace</kbd>. |
| 31 | |
| 32 | Please refer to [Navigation Actions](../guide/ui#navigation-actions) section for the default shortcuts and navigation operations. |
| 33 | |
| 34 | ## Key Binding Format |
| 35 | |
| 36 | The `key` of each shortcut can be either a string (e.g. `'Shift+Ctrl+A'`) or a computed boolean. Please refer to [`useMagicKeys` from VueUse](https://vueuse.org/core/useMagicKeys/) for |
| 37 |