- Notifications
You must be signed in to change notification settings - Fork40
A menu opened with <details>.
License
github/details-menu-element
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
A menu that's opened with a <details> button.
$ npm install @github/details-menu-element
Import as a module:
import'@github/details-menu-element'
With a script tag:
<scripttype="module"src="./node_modules/@github/details-menu-element/dist/index.js">
<details><summary>Robots</summary><details-menurole="menu"><buttontype="button"role="menuitem">Hubot</button><buttontype="button"role="menuitem">Bender</button><buttontype="button"role="menuitem">BB-8</button></details-menu></details>
Usedata-menu-button
anddata-menu-button-text
to update the button's text on menu item activation.
<details><summary>Preferred robot:<spandata-menu-button>None</span></summary><details-menurole="menu"><buttontype="button"role="menuitem"data-menu-button-text>Hubot</button><buttontype="button"role="menuitem"data-menu-button-text>Bender</button><buttontype="button"role="menuitem"data-menu-button-text>BB-8</button></details-menu></details>
Usedata-menu-button
anddata-menu-button-contents
to update the button's HTML content on menu item activation.
<details><summary>Preferred robot:<spandata-menu-button>None</span></summary><details-menurole="menu"><buttontype="button"role="menuitem"data-menu-button-contents><imgsrc="hubot.png"> Hubot</button><buttontype="button"role="menuitem"data-menu-button-contents><imgsrc="bender.png"> Bender</button><buttontype="button"role="menuitem"data-menu-button-contents><imgsrc="bb8.png"> BB-8</button></details-menu></details>
Uselabel[tabindex="0"][role=menuitemradio/menuitemcheckbox]
when dealing with radio and checkbox inputs menu items. Check states of the input element and the label will be synchronized.
<details><summary>Preferred robot</summary><details-menurole="menu"><labeltabindex="0"role="menuitemradio"><inputtype="radio"name="robot"value="Hubot"> Hubot</label><labeltabindex="0"role="menuitemradio"><inputtype="radio"name="robot"value="Bender"> Bender</label><labeltabindex="0"role="menuitemradio"><inputtype="radio"name="robot"value="BB-8"> BB-8</label></details-menu></details>
details-menu-select
(cancelable) - fired on<details-menu>
withevent.detail.relatedTarget
being the item to be selected.details-menu-selected
- fired on<details-menu>
withevent.detail.relatedTarget
being the item selected, after label is updated and menu is closed.
Menu content can be loaded from a server by embedding an<include-fragment>
element.
<details><summary>Robots</summary><details-menusrc="/robots"preload><include-fragment>Loading…</include-fragment></details-menu></details>
Thesrc
attribute value is copied to the<include-fragment>
the firsttime the<details>
button is toggled open, which starts the server fetch.
If thepreload
attribute is present, the server fetch will begin on mousehover over the<details>
button, so the content may be loaded by the timethe menu is opened.
Browsers without nativecustom element support require apolyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
npm installnpm test
Distributed under the MIT license. See LICENSE for details.
About
A menu opened with <details>.
Topics
Resources
License
Code of conduct
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.