mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Support custom target(s) for ContextMenu (#916)

Browse source 
* feat(context-menu): add target prop to selectively trigger context menu

* feat(context-menu): include clicked element in "open" event detail

* docs(context-menu): add target, multiple target examples
This commit is contained in:
Eric Liu 2021-11-18 13:32:13 -08:00 • committed by GitHub
commit ccc733f3f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 261 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

13
docs/src/COMPONENT_API.json
View file

@ -1809,6 +1809,17 @@
"moduleName": "ContextMenu",
"filePath": "src/ContextMenu/ContextMenu.svelte",
"props": [
{
"name": "target",
"kind": "let",
"description": "Specify an element or list of elements to trigger the context menu.\nIf no element is specified, the context menu applies to the entire window",
"type": "null | HTMLElement | HTMLElement[]",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "open",
"kind": "let",
@ -1856,9 +1867,9 @@
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{ "type": "dispatched", "name": "open", "detail": "HTMLElement" },
{ "type": "forwarded", "name": "click", "element": "ul" },
{ "type": "forwarded", "name": "keydown", "element": "ul" },
{ "type": "dispatched", "name": "open" },
{ "type": "dispatched", "name": "close" }
],
"typedefs": [],

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

@ -9,9 +9,23 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex
In the examples, right click anywhere within the iframe.
### Default
By default, the context menu will trigger when right clicking anywhere in the `window`.
<FileSource src="/framed/ContextMenu/ContextMenu" />
### Custom target
Specify a custom `HTMLElement` using the `target` prop.
<FileSource src="/framed/ContextMenu/ContextMenuTarget" />
### Multiple targets
The `target` prop also accepts an array of elements.
<FileSource src="/framed/ContextMenu/ContextMenuTargets" />
### Radio groups
<FileSource src="/framed/ContextMenu/ContextMenuGroups" />

65
docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte Normal file
View file

@ -0,0 +1,65 @@
<script>
import {
ContextMenu,
ContextMenuDivider,
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
let target;
</script>
<ContextMenu target="{target}" on:open="{(e) => console.log(e.detail)}">
<ContextMenuOption
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/>
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options">
<ContextMenuOption id="pdf" labelText="PDF" />
<ContextMenuOption id="txt" labelText="TXT" />
<ContextMenuOption id="mp3" labelText="MP3" />
</ContextMenuGroup>
</ContextMenuOption>
<ContextMenuDivider />
<ContextMenuOption selectable labelText="Remove metadata" />
<ContextMenuDivider />
<ContextMenuGroup labelText="Style options">
<ContextMenuOption id="0" labelText="Font smoothing" selected />
<ContextMenuOption id="1" labelText="Reduce noise" />
<ContextMenuOption id="2" labelText="Auto-sharpen" />
</ContextMenuGroup>
<ContextMenuDivider />
<ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>
<div>
<p bind:this="{target}">Right click this element</p>
</div>
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
}
p {
outline: 1px solid var(--cds-interactive-01);
}
</style>

70
docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte Normal file
View file

@ -0,0 +1,70 @@
<script>
import {
ContextMenu,
ContextMenuDivider,
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
let target;
let target2;
</script>
<ContextMenu
target="{[target, target2]}"
on:open="{(e) => console.log(e.detail)}"
>
<ContextMenuOption
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/>
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options">
<ContextMenuOption id="pdf" labelText="PDF" />
<ContextMenuOption id="txt" labelText="TXT" />
<ContextMenuOption id="mp3" labelText="MP3" />
</ContextMenuGroup>
</ContextMenuOption>
<ContextMenuDivider />
<ContextMenuOption selectable labelText="Remove metadata" />
<ContextMenuDivider />
<ContextMenuGroup labelText="Style options">
<ContextMenuOption id="0" labelText="Font smoothing" selected />
<ContextMenuOption id="1" labelText="Reduce noise" />
<ContextMenuOption id="2" labelText="Auto-sharpen" />
</ContextMenuGroup>
<ContextMenuDivider />
<ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>
<div>
<p bind:this="{target}">Right click this element</p>
<p bind:this="{target2}">... or this one</p>
</div>
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
}
p {
outline: 1px solid var(--cds-interactive-01);
}
</style>