Skip to content

zachleat/details-utils

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
1 branch 4 tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
LICENSE.md
 
 
README.md
 
 
demo.html
 
 
details-utils.js
 
 
package.json
 
 
<details-utils> Installation Usage Changelog v2.0.0

README.md

<details-utils>

Related work elsewhere:

Installation

npm install @zachleat/details-utils

Add details-utils.js to your bundle.

Usage

Wrap <details-utils> around one or more <details> elements to add enhancements to their behavior:

  • Click outside to close (also bind an optional close button)
  • Animate open and close (obeys prefers-reduced-motion)
  • Force open/closed based on:
    • JavaScript
    • Media query
      • (e.g. viewport size, prefers-reduced-motion, even prefers-reduced-data if browsers ever support it 😅)
      • Optionally restores user state when media query does not match (use force-restore attribute)
  • Close via esc Key
    • With optional Media query.
  • Toggle Document Class (toggles a class on <html> when active, useful for modals to disable document overflow)

Changelog

v2.0.0

  • Renamed attribute force-closed to force-close
  • Added force-open to complement force-close
  • Added force-restore to be used with force-open and force-close (restores state when media query does not match).

About

A suite of utilities to add more features to the <details> element.

Resources

Readme

License

MIT license

Stars

211 stars

Watchers

5 watching

Forks

8 forks

Releases

4 tags

Packages

No packages published

Languages