Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vincentlaucsb/svelte-contextmenu
A simple but complete context menu library for Svelte
https://github.com/vincentlaucsb/svelte-contextmenu
context contextmenu menu svelte
Last synced: 26 days ago
JSON representation
A simple but complete context menu library for Svelte
- Host: GitHub
- URL: https://github.com/vincentlaucsb/svelte-contextmenu
- Owner: vincentlaucsb
- License: mit
- Created: 2022-06-06T00:09:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-15T12:43:44.000Z (almost 2 years ago)
- Last Synced: 2024-09-30T09:24:06.213Z (about 1 month ago)
- Topics: context, contextmenu, menu, svelte
- Language: Svelte
- Homepage:
- Size: 98.6 KB
- Stars: 9
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vince's Svelte Context Menu
A simple, no-frills context menu that works out of the box with Bootstrap but allows total customization. This context menu can be set up to work with `on:click` and `on:contextmenu`.
By default, the context menu will appear to the bottom and right of where a click occurred. However, it automatically repositions itself if it overflows.
[**Live Demo**](https://vincentlaucsb.github.io/context-menu/public/)
### Install
https://www.npmjs.com/package/svelte-contextmenu
`npm install --save-dev svelte-contextmenu`
## Basic Usage
```svelte
import ContextMenu, { Item, Divider, Settings } from "svelte-contextmenu";
let myMenu;
Left Click Trigger
{
console.log("Activating context menu");
myMenu.show(e);
}}>
Right click Trigger
This will be rendered with an anchor tag
This will be rendered as a button
```
## Using Custom Dropdown Items and Disabling Auto-Close Behavior
While `svelte-context-menu` provides `Item` and `Divider` components which should satisfy most use-cases, you are not limited to those.
For example, you can add forms and checkboxes to dropdown menus.
Furthermore, while clicking on the menu will automatically close it, this behavior can be disabled for indivdual items. The `Item` component has an `autoclose` prop which may be set to `false`, while custom children may assign the `data-autoclose` attribute.
```svelte
import ContextMenu, { Item, Divider, Settings } from "svelte-context-menu";
let openInNewTab = false;
let fireMenu : ContextMenu;
$: linkTarget = openInNewTab ? "blank" : "";
⛽ Give me fuel
🔥 Give me fire
🧞♀️ Give me that which I desire
Open links in a new tab
```
## Styling
For convenience, the context menus come with styling. However, you may override the default styling on a global
or an individual basis.
### CSS Variables
In most cases, the default styling can be changed to meet one's needs by defining
CSS variables.
```css
:root {
--ctx-menu-background: #eeeeee;
--ctx-menu-border: 1px solid #aaaaaa;
--ctx-menu-border-radius: 0.5rem;
--ctx-menu-hover-bg: #bbbbbb;
--ctx-menu-font-size: 0.9rem;
--ctx-menu-padding: 0.375rem 0.5rem;
}
```
More variables can be found by inspecting the rendered context menu.
### Individual Styling
`svelte-contextmenu` comes with default CSS classes, and they may be appended to or replaced entirely via the `Settings` class.
```svelte
import ContextMenu, { Item, Divider, Settings } from "svelte-contextmenu";
// Use default CSS class names *without* styling
const boldSettings = new Settings();
/* Alternative 1: Build off of default styling
* const boldSettings = Settings.DefaultCSS();
*/
/* Alternative 2: Build off of Bootstrap styling
* const boldSettings = Settings.BootstrapCss();
*/
boldSettings.Item.Class.push("fw-bold");
```
### Global Styling
In the above example, settings were created and applied to a single instance. However,
settings can also be set globally using the `defaultSettings` store.
```svelte
import ContextMenu, { defaultSettings, Settings } from "svelte-contextmenu";
const boldSettings = new Settings();
boldSettings.ItemContent.Class.push("fw-bold");
// Set global styles to `boldSettings`
defaultSettings.set(boldSettings);
```
#### Bootstrap Styling: A shorthand
`svelte-contextmenu` contains a simple `useBootstrap()` function that may be called at
the top of your app to make the menu use Bootstrap 5 classes everywhere.
```svelte
import ContextMenu, { useBootstrap } from "svelte-contextmenu";
// Use Bootstrap 5 classes globally
useBootstrap();
```