A menu opened with <details>.
MIT License
Bot releases are hidden (Show)
Full Changelog: https://github.com/github/details-menu-element/compare/v1.0.12...v1.0.13
This release brings us a bugfix for click events in nested elements within a <label>
element (See https://github.com/github/details-menu-element/pull/54)
https://github.com/github/details-menu-element/compare/v1.0.11...v1.0.12
This release includes a bugfix that will close the menu when a checked input is clicked.
https://github.com/github/details-menu-element/compare/v1.0.10...v1.0.11
This release brings you updated dependencies as well as a bugfix for <summary autofocus>
. The element should now focus on any autofocused element within the details menu when the summary has an autofocus
attribute.
Thanks to @pablonete for their contributions to this realease.
https://github.com/github/details-menu-element/compare/v1.0.9...v1.0.10
Published by muan over 4 years ago
Published by muan over 4 years ago
close()
if <details>
was open. https://github.com/github/details-menu-element/pull/45 This is to address an issue where user focus can be moved even though user was not interacting with the menu directly.https://github.com/github/details-menu-element/compare/v1.0.6...v1.0.7
Published by muan about 5 years ago
https://github.com/github/details-menu-element/pull/36
[autofocus]
elements when opening the menu with keydown<details-menu>
overriding its existing role attributerole=button
on <summary>
when there isn't a role set, so it's exposed to AThttps://github.com/github/details-menu-element/compare/v1.0.3...v1.0.4
Published by koddsson about 5 years ago
A menu that's opened with a <details> button.
$ npm install @github/details-menu-element
import '@github/details-menu-element'
<details>
<summary>Robots</summary>
<details-menu role="menu">
<button type="button" role="menuitem">Hubot</button>
<button type="button" role="menuitem">Bender</button>
<button type="button" role="menuitem">BB-8</button>
</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 role="menu">
<button type="button" role="menuitem" data-menu-button-text>Hubot</button>
<button type="button" role="menuitem" data-menu-button-text>Bender</button>
<button type="button" role="menuitem" data-menu-button-text>BB-8</button>
</details-menu>
</details>
Use label[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-menu role="menu">
<label tabindex="0" role="menuitemradio">
<input type="radio" name="robot" value="Hubot"> Hubot
</label>
<label tabindex="0" role="menuitemradio">
<input type="radio" name="robot" value="Bender"> Bender
</label>
<label tabindex="0" role="menuitemradio">
<input type="radio" name="robot" value="BB-8"> BB-8
</label>
</details-menu>
</details>
details-menu-select
(cancelable) - fired on <details-menu>
with event.detail.relatedTarget
being the item to be selected.details-menu-selected
- fired on <details-menu>
with event.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-menu src="/robots" preload>
<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.
If the preload
attribute is present, the server fetch will begin on mouse
hover over the <details>
button, so the content may be loaded by the time
the menu is opened.
Browsers without native custom element support require a polyfill.
npm install
npm test
Distributed under the MIT license. See LICENSE for details.
https://github.com/github/details-menu-element/compare/v1.0.2...v1.0.3
Published by dgraham over 5 years ago
First stable release with no changes since 0.10.1.
Published by muan over 5 years ago
Event changes:
_ | target | cancelable | bubbles | detail |
---|---|---|---|---|
details-menu-select |
selected item | true | true | null |
details-menu-selected |
selected item | false | true | null |
_ | target | cancelable | bubbles | detail |
---|---|---|---|---|
details-menu-select |
<details-menu> |
true | false | { relatedTarget: selectedItem } |
details-menu-selected |
<details-menu> |
false | false | { relatedTarget: selectedItem } |
Published by mislav over 5 years ago
Drop IE 11 compatibility
Stop transforming custom element classes
@flow strict