Media Query

CSS Media Query for your Vue templates to conditionally render components based on screen width.

Usage

Edit Banshee - MediaQuery Basic

<!-- Hide 'hello' text at 600+ pixels  -->
<banshee-media-query min-width at="600" display="hidden">
  hello
</banshee-media-query>

The <banshee-media-query> component will only return the first child it wraps. For example, if two elements reside within the media query component as siblings, only the first one will be returned.

<banshee-media-query min-width at="600" display="hidden">
  <header>Title</header>
  <div>Some content...</div> <!-- this div will not be displayed -->
</banshee-media-query>

To return multiple elements, just wrap them within a root node like so:

<banshee-media-query min-width at="600" display="hidden">
  <section>
    <header>Title</header>
    <div>Some content...</div>
  </section>
</banshee-media-query>

Media Query

Attributes & Props

NameRequiredTypeDefaultDescription
attrueString, NumberN/Awidth at which you want the breakpoint to be set.
displaytrueString'visible'takes two possible values: 'visible' or 'hidden'. Tells the component whether to show or hide contents at specified breakpoint.
maxWidth[true]Booleanfalserender based on display prop at or below the at prop. Note either maxWidth or minWidth must be set.
minWidth[true]Booleanfalserender based on display prop at or above the at prop. Note either maxWidth or minWidth must be set.
unitfalseString'px'unit to measure at prop with. Accepts 'px' or 'em'.

More Examples

Table (Desktop) to Card (Mobile)

Edit Banshee - MediaQuery Table/Card Views

<banshee-media-query display="hidden" min-width at="787">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Faction</th>
        <th>Gold</th>
        <th>Lumber</th>
        <th>Food</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="unit in units" :key="unit.id">
        <td>{{ unit.name }}</td>
        <td>{{ unit.faction }}</td>
        <td>{{ unit.gold }}</td>
        <td>{{ unit.lumber }}</td>
        <td>{{ unit.food }}</td>
      </tr>
    </tbody>
  </table>
</banshee-media-query>
<banshee-media-query min-width at="787">
  <div>
    <div v-for="unit in units" :key="unit.id">
      <ul>
        <li>Name: {{ unit.name }}</li>
        <li>Faction: {{ unit.faction }}</li>
        <li>Gold: {{ unit.gold }}</li>
        <li>Lumber: {{ unit.lumber }}</li>
        <li>Food: {{ unit.food }}</li>
      </ul>
    </div>
  </div>
</banshee-media-query>
Last Updated: 6/13/2018, 10:57:53 PM