mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(context-menu): add target, multiple target examples

Browse source
This commit is contained in:
metonym 2021-11-18 13:23:28 -08:00
commit a651258b88
3 changed files with 149 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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. 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`.
<FileSource src="/framed/ContextMenu/ContextMenu" /> <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 ### Radio groups
<FileSource src="/framed/ContextMenu/ContextMenuGroups" /> <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>