Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

X-QUERYBOX - An Element Query Web Component

How to use X-QUERYBOX

  1. Add the X-Tag Web Components library to your page
  2. Add the main.js amd main.css files located in /src to your page
  3. Start having hyper-responsive, element query fun!

Example Markup:

  <x-querybox media="query(small-width, (max-width: 300px))">

    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

  </x-querybox>

Example CSS:

  x-querybox[matched-media~="small-width"] {
    font-size: 50%; /* small text for a wee lil element! */
  }

Adding mediachange Event Listeners:

  document.querySelector('x-querybox').addEventListener('mediachange', function(e){
    if (e.detail.indexOf('small-width') > -1) {
      // the 'small-width' query is active, do some smally-widthy stuff!
    }
  });

About

An X-Tag Web Component that provides Element Query capabilities

Resources

Releases

No releases published

Packages

No packages published