docs(context-menu): improve docs

This commit is contained in:
Eric Liu 2025-04-20 15:16:45 -07:00
commit 5ec91a552e

View file

@ -6,26 +6,32 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex
import Preview from "../../components/Preview.svelte";
</script>
`ContextMenu` displays a menu when users right-click. Use it to provide quick access to contextual actions or options.
In the examples, right click anywhere within the iframe.
## Default
By default, the context menu will trigger when right clicking anywhere in the `window`.
The context menu appears when right-clicking anywhere in the window. Use `ContextMenuOption` for menu items and `ContextMenuDivider` for visual separation.
<FileSource src="/framed/ContextMenu/ContextMenu" />
## Custom target
Specify a custom `HTMLElement` using the `target` prop.
By default, the context menu will trigger when right clicking anywhere in the `window`.
Set `target` to specify which element triggers the context menu.
<FileSource src="/framed/ContextMenu/ContextMenuTarget" />
## Multiple targets
The `target` prop also accepts an array of elements.
Set `target` to an array of elements to trigger the context menu from multiple sources.
<FileSource src="/framed/ContextMenu/ContextMenuTargets" />
## Radio groups
Use `ContextMenuGroup` and `ContextMenuRadioGroup` to organize related options and create radio button selections.
<FileSource src="/framed/ContextMenu/ContextMenuGroups" />