SVAR Menu is a ready to use Svelte component for creating context and popup menus. Easily customize each menu item with text, icons, and sub-items, and control the menu's position relative to its parent element.
To use SVAR Svelte Menu, simply import the package and include the component in your Svelte file:
<script>
import { Menu } from "wx-svelte-menu";
function onClick(item) {
const action = ev.detail.action;
message = action ? `clicked on ${action.id}` : "closed";
}
const options = [
{ id: "edit-cut", text: "Cut", icon: "wxi wxi-content-cut" },
{ id: "edit-copy", text: "Copy", icon: "wxi wxi-content-copy" },
{
id: "edit-paste",
text: "Paste",
icon: "wxi wxi-content-paste",
},
];
</script>
<Menu {options} on:click={clicked} />
Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
yarn
to install dependencies. Note that this project is a monorepo using yarn
workspaces, so npm will not workyarn start
To run the test:
yarn start:tests
yarn test:cypress