--- name: interchange url: /interchange title: Interchange ---

Interchange

A simple JavaScript solution for responsive images. But not just images, it can even load in HTML partials. Interchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers.



Interchange allows you to specify what specific content to display based on the user's current screen size. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.

To set up Interchange, start with a container with the zf-interchange directive.


Use with Images

A basic example of Interchange involves images. In the below example, we're loading images with a lower resolution (and thus a lower file size) on small screens, and progressively higher-res images on larger screens.

Note the values of the media attributes on each item inside the container—these are the breakpoints defined in your Sass files. Check out the documentation for media queries to learn how these breakpoints can be changed.


Use with HTML

Interchange can also switch between entire chunks of HTML. These can be loaded as partials (external HTML files), or by dropping the content right into the tag.

Note that partials are reloaded every time, meaning if the user's device scales from medium, to small, back to medium, the medium partial will be loaded twice.

You are on a large screen.
You are on a large screen.

Interchange Directives

Interchange can also be achieved with our zf-if, zf-show, and zf-hide directives. These directives internally use ng-if, ng-show, and ng-hide, respectively, to achieve their interchange ability. Simply pass the desired query into the directive and let it do its magic!

Named Queries

Any named breakpoint can be used as a query, the defaults being: small, medium, large, xlarge, and xxlarge. Other supported queries include: landscape, portrait, and retina.

You are on a small or larger device.

You are on a medium or larger device.

You are on a large or larger device.

You are on a xlarge or larger device.

You are on a xxlarge or larger device.

You are in a landscape orientation.

You are in a portrait orientation.

You are on a retina device.

You are on a small or larger device.

You are on a medium or larger device.

You are on a large or larger device.

You are on a xlarge or larger device.

You are on a xxlarge or larger device.

You are in a landscape orientation.

You are in a portrait orientation.

You are on a retina device.


Only Operator

Named breakpoint queries support usage of the only operator. When using the only operator, the result of the query will be true if the current media EXACTLY matches the query.

You are only on a small device.

You are only on a medium device.

You are only on a large device.

You are only on a xlarge device.

You are only on a xxlarge device.

You are only on a small device.

You are only on a medium device.

You are only on a large device.

You are only on a xlarge device.

You are only on a xxlarge device.


Not Operator

Named breakpoint queries support usage of the not operator. Usage of the not operator implies usage of the only operator. When using the not operator, the result of the query will be true if the current media does NOT EXACTLY match the query.

You are not on a small device.

You are not on a medium device.

You are not on a large device.

You are not on a xlarge device.

You are not on a xxlarge device.

You are not on a small device.

You are not on a medium device.

You are not on a large device.

You are not on a xlarge device.

You are not on a xxlarge device.