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

feat(component): add OverflowMenu

Browse source 
Closes #22
This commit is contained in:
Eric Liu 2019-12-26 10:25:46 -08:00
commit 9e3d387da3
19 changed files with 421 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/components/OverflowMenu/OverflowMenu.Story.svelte Normal file
View file

@ -0,0 +1,72 @@
<script>
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import OverflowMenu from './OverflowMenu.svelte';
import OverflowMenuItem from './OverflowMenuItem.svelte';
let primaryFocus = true;
</script>
<Layout>
<div style="padding-left: 6rem">
{#if story === 'links'}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 1"
bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 2 is an example of a really long string and how we recommend handling this"
requireTitle />
<OverflowMenuItem {...$$props.menuItem} href="https://ibm.com" text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} href="https://ibm.com" text="Option 4" />
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Danger option"
danger />
</OverflowMenu>
{:else if story === 'trigger'}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}
style="width: auto">
<div slot="menu" style="padding: 0 1rem">Menu</div>
<OverflowMenuItem {...$$props.menuItem} text="Option 1" bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we recommend handling this"
requireTitle />
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
</OverflowMenu>
{:else}
<OverflowMenu
{...$$props.menu}
on:close={({ detail }) => {
console.log('close', detail);
}}>
<OverflowMenuItem {...$$props.menuItem} text="Option 1" bind:primaryFocus />
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we recommend handling this"
requireTitle />
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
</OverflowMenu>
{/if}
</div>
</Layout>