Package Exports
- @github/details-menu-element
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@github/details-menu-element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
<details-menu> element
A menu that's opened with a <details> button.
Installation
$ npm install @github/details-menu-elementUsage
import '@github/details-menu-element'<details>
<summary>Robots</summary>
<details-menu>
<ul>
<li><button type="button" role="menuitem">Hubot</button></li>
<li><button type="button" role="menuitem">Bender</button></li>
<li><button type="button" role="menuitem">BB-8</button></li>
</ul>
</details-menu>
</details>Use data-menu-button and data-menu-button-text to have button text updated on menu item activation.
<details>
<summary>Preferred robot: <span data-menu-button>None</span></summary>
<details-menu>
<ul>
<li><button type="button" role="menuitem" data-menu-button-text>Hubot</button></li>
<li><button type="button" role="menuitem" data-menu-button-text>Bender</button></li>
<li><button type="button" role="menuitem" data-menu-button-text>BB-8</button></li>
</ul>
</details-menu>
</details>Deferred loading
Menu content can be loaded from a server by embedding an
<include-fragment> element.
<details>
<summary>Robots</summary>
<details-menu src="/robots">
<include-fragment>Loading…</include-fragment>
</details-menu>
</details>The src attribute value is copied to the <include-fragment> the first
time the <details> button is toggled open, which starts the server fetch.
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Internet Explorer 11
- Microsoft Edge
Development
npm install
npm testLicense
Distributed under the MIT license. See LICENSE for details.