@github/details-dialog-element
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.3 • Public • Published

    <details-dialog> element

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

    Installation

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

    Usage

    Script

    Import as ES modules:

    import '@github/details-dialog-element'

    Include with a script tag:

    <script type="module" src="./node_modules/@github/details-dialog-element/dist/index.js">

    Markup

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

    Install

    npm i @github/details-dialog-element

    DownloadsWeekly Downloads

    1,535

    Version

    3.1.3

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • jfuchs
    • githubbot
    • manuelpuyol
    • jonrohan
    • broccolini
    • mislav
    • mdo
    • primer-css
    • keithamus
    • mschoening
    • koddsson
    • emilybrick
    • lgarron
    • colebemis
    • smockle
    • simurai
    • khiga8
    • dustin.greif
    • srt32