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

docs(context-menu): add examples and test

Browse source
This commit is contained in:
Eric Y Liu 2021-03-20 06:01:34 -07:00
commit 831f3bfe76
4 changed files with 143 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
docs/src/pages/components/ContextMenu.svx Normal file
View file

@ -0,0 +1,17 @@
---
components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
---
<script>
import Preview from "../../components/Preview.svelte";
</script>
In the examples, right click anywhere within the iframe.
### Default
<FileSource src="/framed/ContextMenu/ContextMenu" />
### Radio groups
<FileSource src="/framed/ContextMenu/ContextMenuGroups" />

45
docs/src/pages/framed/ContextMenu/ContextMenu.svelte Normal file
View file

@ -0,0 +1,45 @@
<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 selectedIds = [];
$: console.log("selectedIds", selectedIds);
</script>
<ContextMenu>
<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" bind:selectedIds>
<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>
</ContextMenu>

23
docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import {
ContextMenu,
ContextMenuDivider,
ContextMenuOption,
ContextMenuRadioGroup,
} from "carbon-components-svelte";
let selectedId = "0";
$: console.log("selectedId", selectedId);
</script>
<ContextMenu>
<ContextMenuOption indented labelText="Open" />
<ContextMenuDivider />
<ContextMenuRadioGroup bind:selectedId labelText="Radio group">
<ContextMenuOption id="0" labelText="Set as foreground" />
<ContextMenuOption id="1" labelText="Set as background" />
</ContextMenuRadioGroup>
<ContextMenuDivider />
<ContextMenuOption selectable labelText="Lock layer" />
</ContextMenu>

58
tests/ContextMenu.test.svelte Normal file
View file

@ -0,0 +1,58 @@
<script lang="ts">
import {
ContextMenu,
ContextMenuDivider,
ContextMenuOption,
ContextMenuRadioGroup,
ContextMenuGroup,
} from "../types";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
let selectedId = "0";
let selectedIds = [];
$: console.log("selectedId", selectedId);
</script>
<ContextMenu>
<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" bind:selectedIds>
<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>
</ContextMenu>
<ContextMenu on:open on:close>
<ContextMenuOption indented labelText="Open" />
<ContextMenuDivider />
<ContextMenuRadioGroup bind:selectedId labelText="Radio group">
<ContextMenuOption id="0" labelText="Set as foreground" />
<ContextMenuOption id="1" labelText="Set as background" />
</ContextMenuRadioGroup>
<ContextMenuDivider />
<ContextMenuOption indented labelText="Lock layer" />
</ContextMenu>