Details Dialog Element Versions Save

A modal dialog that's opened with

.

v3.0.9

4 years ago
  • Merge pull request #44 from github/publish-to-gpr-as-well bdf8e31
  • publish to GPR as a postpublish step 3d69ed2

https://github.com/github/details-dialog-element/compare/v3.0.8...v3.0.9

3.0.9

4 years ago

<details-dialog> element

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

Installation

$ npm install --save @github/details-dialog-element

Usage

import '@github/details-dialog-element'

<details>
  <summary>Open dialog</summary>
  <details-dialog>
    Modal content
    <button type="button" data-close-dialog>Close</button>
  </details-dialog>
</details>

Deferred loading

Dialog content can be loaded from a server by embedding an <include-fragment> element.

<details>
  <summary>Robots</summary>
  <details-dialog src="/robots" preload>
    <include-fragment>Loading…</include-fragment>
  </details-dialog>
</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, hovering over the <details> element will trigger the server fetch.

Events

details-dialog-close

details-dialog-close event is fired from <details-dialog> when a request to close the dialog is made from

  • pressing escape,
  • clicking on summary, [data-close-dialog], or
  • dialog.toggle(false)

This event bubbles, and can be canceled to keep the dialog open.

document.addEventListener('details-dialog-close', function(event) {
  if (!confirm('Are you sure?')) {
    event.preventDefault()
  }
})

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

v3.0.7

4 years ago
  • npm audit fix 70eb697
  • Merge pull request #42 from github/update-deps abdf5e3
  • update eslint, eslint-plugin-github and flow-bin manually to latest versions 265bf09
  • fix shadowed variable ea1422d
  • run npm update 229d2b9

https://github.com/github/details-dialog-element/compare/v3.0.6...v3.0.7

v3.0.0

4 years ago
  • Breaking: event name change:
    • details-dialog:will-close -> details-dialog-close #28
  • Focusable elements determination fix #30

v3.0.1

4 years ago
  • preload/autofocus fixes #32

v3.0.2

4 years ago
  • Accessibility improvements #34

v3.0.3

4 years ago
  • Accessibility improvements #35.

v1.0.1

6 years ago

details-dialog-element

Custom dialog element to be used with <details>

v1.0.0

6 years ago

details-dialog-element

Custom dialog element to be used with <details>