dees-catalog/ts_web/elements/dees-contextmenu.demo.ts
2023-09-09 13:34:46 +02:00

57 lines
1.2 KiB
TypeScript

import { html } from '@design.estate/dees-element';
import * as plugins from './plugins.js';
import { DeesContextmenu } from './dees-contextmenu.js';
export const demoFunc = () => html`
<style>
.withMargin {
display: block;
margin: 20px;
}
</style>
<dees-button @contextmenu=${(eventArg) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [
{
name: 'copy',
iconName: 'copySolid',
action: async () => {
return null;
},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {
return null;
},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {
return null;
},
},
]);
}}>Hello</dees-button>
<dees-contextmenu class="withMargin"></dees-contextmenu>
<dees-contextmenu
class="withMargin"
.menuItems=${[
{
name: 'copy',
iconName: 'copySolid',
action: async () => {},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {},
},
] as plugins.tsclass.website.IMenuItem[]}
></dees-contextmenu>
`;