mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
64 lines
1.3 KiB
Markdown
64 lines
1.3 KiB
Markdown
---
|
|
description: 'Learn how to display and define keyboard shortcuts in your app.'
|
|
---
|
|
|
|
## Overview
|
|
|
|
Some components like [Dropdown](/elements/dropdown), [Command Palette](/navigation/command-palette) and [Tooltip](/overlays/tooltip) support the display of keyboard shortcuts.
|
|
|
|
```vue
|
|
<UDropdown :items="[{ label: 'Edit', shortcuts: ['E'] }]" />
|
|
```
|
|
|
|
Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
|
|
|
|
```vue
|
|
<template>
|
|
<div class="flex items-center gap-0.5">
|
|
<UKbd>⌘</UKbd>
|
|
<UKbd>K</UKbd>
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
::alert{icon="i-heroicons-light-bulb"}
|
|
You will have a preview of how shortcuts are rendered in each component page.
|
|
::
|
|
|
|
## `defineShortcuts`
|
|
|
|
This module provides a `defineShortcuts` composable that allows you to define keyboard shortcuts in your app really easily.
|
|
|
|
```vue
|
|
<template>
|
|
<UModal v-model="isOpen" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const isOpen = ref(false)
|
|
|
|
defineShortcuts({
|
|
meta_k: {
|
|
usingInput: true,
|
|
handler: () => {
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
```
|
|
|
|
## `useShortcuts`
|
|
|
|
To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
|
|
|
|
```vue
|
|
<script setup>
|
|
const { metaSymbol } = useShortcuts()
|
|
</script>
|
|
|
|
<template>
|
|
<UKbd>{{ metaSymbol }}</UKbd>
|
|
</template>
|
|
```
|