Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

A menu opened with <details>.

License

NotificationsYou must be signed in to change notification settings

github/details-menu-element

Repository files navigation

A menu that's opened with a <details> button.

Installation

$ npm install @github/details-menu-element

Usage

Script

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">

Markup

<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>

Events

  • 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.

Deferred loading

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.

Browser support

Browsers without nativecustom element support require apolyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm installnpm test

License

Distributed under the MIT license. See LICENSE for details.


[8]ページ先頭

©2009-2025 Movatter.jp