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

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>