1.9 KiB
| Title | Type |
|---|---|
| Context Menu | Document |
import {Code} from "astro:components" import {Zorn} from "@minpluto/zorn"
<Zorn PlayerName="ennie_and_yoyki" Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png" Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki:%20Non-Girly%20Games.mp4" ContextItems={ [ { "Type": "Button", "Name": "Copy URL", "Action": "null", }, { "Type": "Link", "Name": "Copy URL with Timestamp", "Action": "#", }, { "Type": "Link", "Name": "Copy Embed Code", "Action": "#", }, { "Type": "Link", "Name": "Troubleshoot Player", "Action": "#", } ] } />
Right-click in the demo above to see it action.
You can override the browser's default context menu by adding your own, this is done with the ContextItems variable being added with an array.
Example:
<Code lang="jsx" code={<Zorn ContextItems={ [ { "Type": "Button", "Name": "Copy URL", "Action": "null", }, { "Type": "Link", "Name": "Copy Embed Code", "Action": "#", }, { "Type": "Separator" }, { "Type": "Link", "Name": "Troubleshoot Player", "Action": "#", } ] } />}/>
If the ContextItems variable is not applied, Zorn will default to the browser's default context menu.
| Variable | Option |
|---|---|
| Type | Button, Link, or Separator |
| Name | string |
| Action (Button) | onclick - Use JavaScript |
| Action (Link) | href - Use a link |