mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(context-menu): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-04-20 15:16:45 -07:00
commit 9f3cb09694
1 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/components/ContextMenu.svx
View file

@ -6,26 +6,32 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </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. In the examples, right click anywhere within the iframe.
## Default ## 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" /> <FileSource src="/framed/ContextMenu/ContextMenu" />
## Custom target ## 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" /> <FileSource src="/framed/ContextMenu/ContextMenuTarget" />
## Multiple targets ## 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" /> <FileSource src="/framed/ContextMenu/ContextMenuTargets" />
## Radio groups ## Radio groups
Use `ContextMenuGroup` and `ContextMenuRadioGroup` to organize related options and create radio button selections.
<FileSource src="/framed/ContextMenu/ContextMenuGroups" /> <FileSource src="/framed/ContextMenu/ContextMenuGroups" />