Something went wrong. Try again.
Monorepo for the nibling.run platform
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title>nib-menu fixture</title> <style> body { margin: 0; padding: 16px; display: flex; justify-content: space-between; background: var(--nib-color-canvas); color: var(--nib-color-text); font: var(--nib-font-ui); } </style> </head> <body> <button id="before">before</button> <button id="trigger" type="button">Actions</button> <nib-menu id="menu"> <nib-menu-item id="new">New file</nib-menu-item> <nib-menu-item id="open">Open…</nib-menu-item> <nib-menu-item id="disabled">Disabled</nib-menu-item> <hr /> <nib-menu-group id="group"> <nib-menu-item id="alice">alice.test</nib-menu-item> <nib-menu-item id="bob">bob.test</nib-menu-item> </nib-menu-group> <hr /> <nib-menu-item id="save">Save</nib-menu-item> </nib-menu> <button id="after">after</button> <button id="edge" type="button">Edge</button> <nib-menu id="edge-menu"> <nib-menu-item>A rather long item label</nib-menu-item> </nib-menu> <output id="log"></output> <script type="module"> import "../src/tokens/tokens.css"; import "../src/menu/element.ts";
const menu = document.getElementById("menu"); menu.trigger = document.getElementById("trigger"); document.getElementById("disabled").disabled = true; document.getElementById("group").label = "Accounts"; document.getElementById("alice").checked = true; document.getElementById("bob").checked = false; menu.addEventListener("menuselect", (event) => { document.getElementById("log").textContent = `selected ${event.item.id}`; }); document.getElementById("edge-menu").trigger = document.getElementById("edge"); </script> </body></html>