Miss any of our Open RFC calls?Watch the recordings here! »

@marko-tags/match-media

1.1.1 • Public • Published


@marko-tags/match-media
API Stability NPM Version Downloads

Media queries directly in your Marko templates.

Note: version 1.0.0 of this module requires Marko >= 4.14.20 as it uses the new tag parameter syntax

Installation

npm install @marko-tags/match-media

Example

<match-media|{ mobile, tablet, desktop }|
  mobile="(max-width: 767px)"
  tablet="(min-width: 768px) and (max-width: 1024px)"
  desktop="(min-width: 1025px)"
>
 
  <if(mobile)>
    <!-- Mobile version -->
  <else-if(tablet)>
    <!-- Tablet version -->
  </else-if>
  <else-if(desktop)>
    <!-- Desktop version -->
  </else-if>
  <else>
    <!-- Handle server side render (no media queries match) -->
  </else>
 
</match-media>

Full media query support

<match-media|{ portrait, landscape }|
  portrait="(orientation: portrait)"
  landscape="(orientation: landscape)"
>
 
  <!-- Render based on portrait or landscape -->
 
</match-media>

Install

npm i @marko-tags/match-media

DownloadsWeekly Downloads

24

Version

1.1.1

License

MIT

Unpacked Size

7.05 kB

Total Files

6

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar